Firefox无法连接wss://localhost:8000的Node.js WebSocket服务问题求助

核心问题 #

你当前的服务端代码最核心的问题是没有将WebSocket升级请求处理逻辑绑定到HTTPS服务器的upgrade事件上，浏览器发起的wss握手请求完全没有被WebSocket服务接管，因此直接连接失败。

分步排查修复方案 #

• 第一步：补全服务端upgrade事件监听逻辑
  你已经完成了accept处理函数的编写，但没有把它挂载到HTTPS服务器的upgrade事件上，修改server.js中HTTPS服务启动的代码如下：

https.createServer(options, function (req, res) {
  res.writeHead(200);
  res.end("hello world\n");
}).on('upgrade', accept) // 新增这一行，绑定WebSocket升级请求处理逻辑
.listen(8000);

• 第二步：处理本地自签证书信任问题
  你使用了自签的key.pem和cert.pem搭建HTTPS服务，火狐默认不信任自签证书，会直接阻断wss连接：

  1. 先直接在火狐地址栏访问https://localhost:8000
  2. 点击高级→接受风险并继续，为当前域名添加证书信任例外
  3. 再重新发起WebSocket连接测试

• 第三步：添加服务端日志排查请求状态
  你当前服务端没有任何日志输出，无法判断请求是否到达服务端，可以在关键位置添加日志：

function accept(req, res) {
  console.log('收到请求，请求头：', req.headers)
  // 原有逻辑保持不变
}

function onConnect(ws) {
  console.log('新的WebSocket客户端已成功连接')
  // 原有逻辑保持不变
}

• 第四步：排查端口与启动状态

  1. 确认Node服务启动后没有抛出报错，8000端口没有被其他程序占用
  2. 如果你的React前端是通过vite/webpack启动的开发服务，端口和8000不一致也不需要额外处理WebSocket跨域，只要完成证书信任即可正常连接

• 第五步：前端添加错误监听定位问题
  可以在前端WebSocket代码中添加错误监听，查看具体的报错信息：

componentDidMount() {
  var connection = new WebSocket('wss://localhost:8000/');
  // 新增错误监听逻辑
  connection.onerror = function(e) {
    console.error('WebSocket连接错误：', e)
  }
  // 原有onopen、onmessage逻辑保持不变
}

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