Django Channels聊天应用本地正常，生产环境WebSocket连接失败求助

核心原因 #

生产环境页面通过HTTPS加载，浏览器出于安全限制，禁止从HTTPS页面发起未加密的ws://WebSocket连接，必须使用加密的wss://协议。

修复JavaScript代码 #

不要硬写ws://，而是根据当前页面的协议动态切换：

方法一：显式判断协议 #

const protocol = window.location.protocol === 'https:' ? 'wss://' : 'ws://';
const chatSocket = new WebSocket(
  protocol
  + window.location.host
  + '/ws/chat/'
  + roomName
  + '/'
);

方法二：替换协议前缀 #

更简洁的写法，自动适配HTTP/HTTPS对应的WebSocket协议：

const chatSocket = new WebSocket(
  window.location.protocol.replace('http', 'ws')
  + window.location.host
  + '/ws/chat/'
  + roomName
  + '/'
);

生产环境服务器配置补充 #

仅修改前端代码还不够，需要确保反向代理服务器（如Nginx）正确配置WebSocket代理，将wss请求转发到Django Channels的ASGI服务。以下是Nginx配置示例（假设ASGI服务运行在127.0.0.1:8001）：

location /ws/ {
    proxy_pass http://127.0.0.1:8001;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

配置完成后重启Nginx，确保ASGI服务正常运行，即可建立加密的WebSocket连接。

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