React与Django Channels集成问题：WebSocket连接失败且消息无法接收

1. 跨域配置核查 #

React运行在3000端口、Django在8000端口，WebSocket跨域需要针对性配置：

• 确保已安装django-cors-headers，并在INSTALLED_APPS和MIDDLEWARE中正确注册
• 在settings.py中添加跨域白名单并允许凭证：

  CORS_ALLOWED_ORIGINS = ["http://localhost:3000"]
  CORS_ALLOW_CREDENTIALS = True
  

• 确认Daphne启动时未拦截WebSocket的跨域请求，若有自定义ASGI中间件，需放行WebSocket类型的请求

2. WebSocket路径与路由匹配检查 #

• React端连接地址需使用ws协议：ws://localhost:8000/ws/notifications/，避免误用http协议
• 核对routing.py中的WebSocket路由是否完全匹配路径：

  from django.urls import re_path
  from . import consumers
  
  websocket_urlpatterns = [
      re_path(r'ws/notifications/$', consumers.NotificationConsumer.as_asgi()),
  ]
  

• 确保settings.py中ASGI_APPLICATION指向正确的路由配置（如your_project.routing.application）

3. Consumer类实现校验 #

• 检查consumers.py的connect方法，避免认证逻辑错误导致连接中断：

  class NotificationConsumer(AsyncWebsocketConsumer):
      async def connect(self):
          self.user = self.scope["user"]
          # 根据业务需求处理未登录用户的连接，不要直接拒绝
          if self.user.is_authenticated:
              await self.channel_layer.group_add(
                  f"user_{self.user.id}",
                  self.channel_name
              )
          await self.accept()  # 必须调用accept()才能维持连接
  

• 确认send_notification等自定义方法已正确实现，且能将消息转发到前端：

  async def send_notification(self, event):
      await self.send(text_data=json.dumps({
          'message': event['message']
      }))
  

4. Channel Layer配置验证 #

• 检查settings.py中的Channel Layer后端（如Redis）配置是否正确：

  CHANNEL_LAYERS = {
      "default": {
          "BACKEND": "channels_redis.core.RedisChannelLayer",
          "CONFIG": {"hosts": [("127.0.0.1", 6379)]},
      },
  }
  

• 启动Redis服务后，通过shell测试Channel Layer可用性：

  from channels.layers import get_channel_layer
  from asgiref.sync import async_to_sync
  
  channel_layer = get_channel_layer()
  async_to_sync(channel_layer.group_send)(
      "test_group", {"type": "send_notification", "message": "test"}
  )
  

  若报错，说明Redis未启动或配置有误

5. 登录触发消息逻辑检查 #

• 确认登录接口中调用channel_layer时，目标组名与Consumer中加入的组名完全一致：

  # 登录视图示例
  from channels.layers import get_channel_layer
  from asgiref.sync import async_to_sync
  
  channel_layer = get_channel_layer()
  async_to_sync(channel_layer.group_send)(
      f"user_{request.user.id}",  # 需和Consumer中的组名严格匹配
      {"type": "send_notification", "message": "登录成功"}
  )
  

6. 日志与调试 #

• 查看Daphne运行日志，排查是否有Origin not allowed、路由匹配失败等错误
• 在浏览器控制台查看WebSocket连接状态，确认是否有403（权限）、404（路径错误）等状态码
• 在Consumer的关键方法（connect、send_notification）中添加打印日志，确认方法是否被触发

内容的提问来源于stack exchange，提问作者Axil