WebSocket 连接失败 Django 通道

Question

我正在尝试使用 Django-Channels 创建一个基于套接字的应用程序，但我在连接到 WebSocket 时遇到问题。为了展示我的问题，我创建了一个测试项目。

来自 JS 控制台的错误消息：

WebSocket 与“ws://127.0.0.1:8000/”的连接失败：

该错误似乎发生在 html 文件的第 25 行，该文件正在创建 WebSocket() 的实例

错误截图

这是代码：

# consumers.py

import ...


class ChatConsumer(AsyncJsonWebsocketConsumer):
    async def connect(self):
        self.groupname = 'dashboard'
        await self.channel_layer.group_add(
            self.groupname,
            self.channel_name,
        )
        await self.accept()

    ...

# routing.py

import...

websocket_urlpatterns = [
    path("", ChatConsumer.as_asgi()),
]

# views.py

import ...


def chatPage(request, *args, **kwargs):
    context = {}
    return render(request, "chatPage.html", context)

# asgi.py

import ...

os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'ChatApp.settings')

application = ProtocolTypeRouter(
    {
        "http": get_asgi_application(),
        "websocket": AuthMiddlewareStack(
            URLRouter(
                routing.websocket_urlpatterns
            )
        )
    }
)

# settings.py

...
CHANNEL_LAYERS = {
    "default": {
        "BACKEND": "channels.layers.InMemoryChannelLayer"
    }
}
...

<!--chatPage.html-->

...
    <script>
      const chatSocket = new WebSocket("ws://" + window.location.host + "/");

      document.querySelector("#id_message_send_input").focus();
      document.querySelector("#id_message_send_input").onkeyup = function (e) {
        if (e.keyCode === 13) {
          document.querySelector("#id_message_send_button").click();
        }
      };
      document.querySelector("#id_message_send_button").onclick = function (e) {
          const messageInput = document.querySelector(
              "#id_message_send_input"
          ).value;
          chatSocket.send(JSON.stringify({ message: messageInput, username : "{{request.user.username}}"}));
      };
      chatSocket.onmessage = function (e) {
        const data = JSON.parse(e.data);
        const div = document.createElement("div");
        div.innerHTML = data.username + " : " + data.message;
        document.querySelector("#id_message_send_input").value = "";
        document.querySelector("#id_chat_item_container").appendChild(div);
      };
    </script>
...

经过一些研究，我发现通道层可能无法正常工作，但我不确定是否是这种情况，如果是，我想知道修复它的方法。

PS我目前在windows上工作，所以我没有使用redis，我仍然不确定当我切换到redis时是否会出现同样的问题。

Answer 1

对我来说，降级 django 频道 package 似乎有效。

pip uninstall channels
pip install channels==3.0.5