无法在 React JS 和 Django 频道之间建立连接

Question

我有一个使用 Django Rest Framework 和 React 的网络应用程序。我正在尝试向其中添加网络套接字。我选择了 Django 频道，因为它们是最受推荐的。

但是，我不断收到此错误 Firefox 无法在 ws://localhost:3000/ws/canvas_data 建立与服务器的连接，然后是套接字自动关闭。显然，无法在前端和后端之间保持连接。我在路由 URL 中尝试了几个选项，但没有任何效果。也许问题出在端口上，因为 HTTP 和 ws 使用了相同的端口。

这是我第一次使用 Django Channels，所以请原谅我的知识不足。

这是消费者：

from channels.generic.websocket import WebsocketConsumer, AsyncWebsocketConsumer
from time import sleep
import json

class WSConsumer(AsyncWebsocketConsumer):

    async def connect(self):
        print("CONNECTION IS NOW OPEN !!")
        await self.accept()
        for i in range(20):      #The logic should be here, this is just an example to test
            await self.send(json.dumps({"nom_rapport": "pv"}))
            sleep(1)

    async def disconnect(self, message):
        print("CONNECTION IS NOW CLOSED !!")
        pass

asgi.py配置：

import os

from channels.routing import ProtocolTypeRouter, URLRouter
from django.core.asgi import get_asgi_application
from django.urls import path
from Dashboard.consumers import WSConsumer

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

application = ProtocolTypeRouter({
    'http': get_asgi_application(),
    'websocket': URLRouter([
        path(r'ws/canvas_data/', WSConsumer.as_asgi()),
    ])
})

settings.py 文件:

INSTALLED_APPS = [
     .....

    'channels',
    'rest_framework',

     .....
]

WSGI_APPLICATION = 'Dashboard_sise.wsgi.application'

ASGI_APPLICATION = 'Dashboard_sise.asgi.application'

CHANNEL_LAYERS = {
    "default": {
        "BACKEND": "channels_redis.core.RedisChannelLayer",
        "CONFIG": {
            "hosts": ['redis://localhost:6379']
        }
    },
}

WebSocket 声明如下：

 componentDidMount(){

        var socketPath = 'ws://localhost:3000/ws/canvas_data';

        const Socket = new WebSocket(socketPath);

        Socket.onopen = () => {
        console.log('Socket is connected');
        }

        Socket.onmessage = (e) => { //Logic will be placed here

            console.log("MESSAGE :", e.data);
            this.setState({messages: e.data});
        };

        Socket.onclose = (e) => {
            console.error('Chat socket closed unexpectedly');
        };
    }

前端运行在3000端口，后端在8000端口

提前致谢。

Answer 1

您必须启动一个支持套接字的服务器，例如 daphne

daphne -b 0.0.0.0 -p 8001 django_project.asgi:application

无法在 React JS 和 Django 频道之间建立连接

Can't establish connection between React JS & Django Channels

websocket

django-rest-framework

reactjs

django-channels