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