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

Question

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

然而，我一直收到这个错误Firefox无法在ws://localhost:3000/ws/canvas_data&则插座自动闭合。显然，在前端和前端之间不能保持连接；后端。我在路由URL中尝试了几个选项，但都不起作用。也许问题出在端口上，因为HTTP&ws-

这是我第一次与Django频道打交道，所以请原谅我缺乏知识。

这就是消费者：

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