问 无法连接到django通道上的使用web套接字的本地应用程序

EN

我试图使用web套接字连接到Django服务器/通道。HTTP视图正在工作，但是"ws“( WebSocket )连接正在被 拒绝， ，但只有 的 上的 反应本地应用程序 。它在React应用程序上运行得很好

App.js For React本地移动应用程序

  var ws = React.useRef(
new WebSocket('ws://192.168.10.14:8000/ws/chat/Hello/'),
).current;
ws.onopen = () => {
    setServerState('Connected to the server');
  ws.onclose = e => {
    setServerState('Disconnected. Check internet or server.');
  ws.onerror = e => {
    console.error(e);
    setServerState(e.message);
  ws.onmessage = e => {
    serverMessagesList.push(e.data);
    setServerMessages([...serverMessagesList]);
  const submitMessage = () => {
    ws.send(messageText);
    setMessageText('');
    setInputFieldEmpty(true);
  };

我得到错误 错误{"isTrusted"：false，"message"：“预期HTTP101Response，但'403访问被拒绝‘”}

但在网上

用于React 的 App.js

  let W3CWebSocket = require("websocket").w3cwebsocket;
  var client = new W3CWebSocket("ws://192.168.10.14:8000/ws/chat/Hello/");
  client.onerror = function (e) {
    console.log("Connection Error: " + JSON.stringify(e));
    console.log("Connection Error");
  client.onopen = function () {
    console.log("WebSocket Client Connected");
    let data = JSON.stringify({ message: "Hello Socket!" }); 
    client.send(data);
  client.onclose = function () {
    console.log("echo-protocol Client Closed");
  client.onmessage = function (e) {
    if (typeof e.data === "string") {
      console.log("Received: '" + e.data + "'");
  };

这个代码运行得很好

现在是BackEnd url.py

websocket_urlpatterns = [
    re_path(r'ws/chat/(?P<room_name>\w+)/$', consumer.ChatConsumer.as_asgi()),
]

Consumer.py

from asgiref.sync import async_to_sync
import json
# WebsocketConsumer is a class that we can inherit from to create a consumer
# A consumer is a class that handles WebSocket connections
# so that we can send and receive messages over the WebSocket
from channels.generic.websocket import WebsocketConsumer
class ChatConsumer(WebsocketConsumer):
    def connect(self):
        self.room_name = self.scope['url_route']['kwargs']['room_name']
        self.room_group_name = 'chat_%s' % self.room_name
        # Join room group
        async_to_sync(self.channel_layer.group_add)(
            self.room_group_name,
            self.channel_name
        self.accept()
    def disconnect(self, close_code):
        print(close_code)
        # Leave room group
        async_to_sync(self.channel_layer.group_discard)(
            self.room_group_name,
            self.channel_name
    # Receive message from WebSocket
    def receive(self, text_data):
        text_data_json = json.loads(text_data)
        message = text_data_json['message']
        # Send message to room group
        async_to_sync(self.channel_layer.group_send)(
            self.room_group_name,
                'type': 'chat_message',
                'message': message
    # Receive message from room group
    def chat_message(self, event):
        message = event['message']
        # Send message to WebSocket
        self.send(text_data=json.dumps({
            'message': message
        }))

Settings.py

ASGI_APPLICATION = "xyz.asgi.application"
CHANNEL_LAYERS = {
    'default': {
        'BACKEND': "channels.layers.InMemoryChannelLayer",
        'hosts': [('localhost')],
}

asgi.py

"""
ASGI config for XYZ project.
import Appointments
import os
from channels.routing import ProtocolTypeRouter, URLRouter
from channels.auth import AuthMiddlewareStack
from channels.security.websocket import AllowedHostsOriginValidator
from django.core.asgi import get_asgi_application
os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'XYZ.settings')
django_asgi_app = get_asgi_application()
application = ProtocolTypeRouter({
    "http": django_asgi_app,
    "websocket": AllowedHostsOriginValidator(
        AuthMiddlewareStack(
            URLRouter(
                Appointments.urls.websocket_urlpatterns