Django开发聊天应用点击发送触发Cannot read property 'send' of null报错

故障原因 #

报错核心是 chatSocket 变量为 null，说明WebSocket连接没有初始化成功，或初始化代码的执行时机/逻辑存在问题，导致点击发送按钮调用chatSocket.send()时找不到有效的WebSocket实例。

解决方案 #

• 第一步：补全WebSocket初始化逻辑
  你需要在现有JS代码前补充Django Channels标准的WebSocket初始化逻辑，注意替换为你自己的路由规则：

  // 注意要先正确获取到roomId的值再初始化
  const roomId = "你的当前聊天室ID"; 
  const chatSocket = new WebSocket(
      'ws://' + window.location.host + '/ws/chat/' + roomId + '/'
  );
  
  // 补充异常兜底处理
  chatSocket.onclose = function(e) {
      console.error('WebSocket连接意外关闭');
      // 可自行添加自动重连逻辑
  };
  chatSocket.onerror = function(e) {
      console.error('WebSocket连接错误:', e);
  };
  

• 第二步：调整代码执行时机，增加边界判断
  将所有JS逻辑包裹在DOM加载完成的回调中，避免元素未渲染、变量未赋值就执行逻辑，同时增加发送前的状态校验：

  document.addEventListener('DOMContentLoaded', function() {
      // 1. 优先获取roomId、初始化WebSocket
      const roomId = document.getElementById('你存储roomId的元素ID').textContent; // 替换为你自己的roomId获取方式
      const chatSocket = new WebSocket(
          'ws://' + window.location.host + '/ws/chat/' + roomId + '/'
      );
  
      // 2. 原有交互逻辑移到回调内部
      document.getElementById('id_chat_message_input').focus();
      document.getElementById('id_chat_message_input').onkeyup = function(e) {
          if (e.keyCode === 13 && e.shiftKey) {
              // 换行由textarea自动处理
          } else if(e.keyCode === 13 && !e.shiftKey){
              document.getElementById('id_chat_message_submit').click();
          }
      };
  
      document.getElementById('id_chat_message_submit').onclick = function(e) {
          e.preventDefault(); // 阻止默认事件避免页面刷新
          // 发送前先校验WebSocket连接状态
          if (chatSocket && chatSocket.readyState === WebSocket.OPEN) {
              const messageInputDom = document.getElementById('id_chat_message_input');
              const message = messageInputDom.value.trim();
              if (message) { // 过滤空消息
                  chatSocket.send(JSON.stringify({
                      "command": "send",
                      "message": message,
                      "room": roomId
                  }));
              }
              messageInputDom.value = '';
          } else {
              alert('聊天连接未就绪，请稍后重试');
          }
      };
  });
  

• 第三步：排查后端配置
  确认Django后端routing.py中的WebSocket路由和前端拼接的路径完全匹配，同时Channels通道层（如Redis）配置正确，能够正常处理WebSocket握手请求。

额外排查点 #

• 打开浏览器控制台「网络」面板，切换到WebSocket标签，刷新页面查看对应ws请求的握手状态是否为101 Switching Protocols，如果握手失败根据返回报错排查后端路由或权限问题
• 确认roomId变量在WebSocket初始化前已经被正确赋值，不存在undefined的情况

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