Django + Vue + websocketでつまづいたところまとめ

Django + Vue + websocketでつまづいたところまとめ

wsで使用するURLが間違えてた

以下の形でwsのURLを管理していた

  const url = new URL(window.location.href);
  let protocol = ''

  // httpsかどうかで、wsのURLが変化
  protocol = (url.protocol == 'https:') ? 'wss:' : 'ws:';

  this.ws = new WebSocket(
      protocol + '//' + url.host + '/ws/wbs'
  )

至極当然当たり前の話ではあるが、Vue CLIでbuildした静的ファイルをDjanoの静的ファイルとして扱うような作りにしていたので、
・Djanoの静的ファイルとしてアクセスした時
・Vue CLIの開発ローカルサーバーでアクセスした時
でhostがホストが違うので、アクセスできない

ログインセッションを意識していなかった

WSにおいては
・Djanoの静的ファイルとしてアクセスした時
・Vue CLIの開発ローカルサーバーでアクセスした時
でユーザー認証が微妙に異なるらしい

consumers.pyにおいて以下の実装を行なっていた

async def connect(self):
    try:
        await self.accept()

        self.user = self.scope["user"]
        if not self.user.is_authenticated:
            await self.close()

        self.room_group_id = f"chat_{self.user.id}"
        await self.channel_layer.group_add(
            self.room_group_id,
            self.channel_name
        )
    except Exception:
        raise

前者の場合問題なく認証できるが、後者の場合認証に失敗した。
原因はまだわかっていないが、解決策としてはjwt認証を行わないといけないと思われる。