共享服务器下Node.js/Express+WS配置指定路径WebSocket连接失败求助

现有代码存在三处问题，导致WebSocket握手请求无法被正确处理：

• 未正确引入ws包提供的WebSocketServer类，代码运行时会直接抛出引用错误，WebSocket服务逻辑根本无法生效
• 初始化WebSocket服务时配置了noServer: true，该配置会禁用ws包自带的HTTP服务自动绑定逻辑，但代码中未手动将Express服务收到的WebSocket协议升级请求转发给ws实例处理，所有升级请求会被Express直接丢弃，无法建立连接
• 额外隐患：process.env.PORT未设置默认值，若环境变量未配置，服务监听端口会是undefined，根本无法正常启动

服务端代码修正 #

补全依赖导入，拿到Express启动后返回的原生HTTP服务实例，手动绑定upgrade事件处理WebSocket握手：

import express from 'express'
import { WebSocketServer } from 'ws'
const app = express()

const wss = new WebSocketServer({ noServer: true, path: '/websocket' });
wss.on('connection', (ws) => {
  console.log('Client connected');
  // 连通性测试：连接建立后主动发一条消息
  ws.send('WebSocket connection established')
});

// 端口增加默认值，避免环境变量缺失导致服务启动失败
const port = process.env.PORT || 3000

// 保存HTTP服务实例
const server = app.listen(port, () => {
  console.log(`Serving on port ${port}`);
});

// 手动处理WebSocket协议升级请求
server.on('upgrade', (request, socket, head) => {
  // 仅处理指定路径的WebSocket请求
  if (request.url === '/websocket') {
    wss.handleUpgrade(request, socket, head, (ws) => {
      wss.emit('connection', ws, request)
    })
  } else {
    socket.destroy()
  }
})

客户端注意事项 #

• 本地调试时确认端口匹配：如果React前端启动端口不是3000（比如Vite默认5173、CRA默认3000但端口被占用会自动顺延），需要把WebSocket地址里的端口改成服务实际监听的端口
• 部署到共享服务器时：如果服务配置了HTTPS，需要把连接地址前缀从ws://换成wss://，避免浏览器混合内容拦截；如果前端和服务不同源，注意不要写错服务域名
• 本地开发用前端代理的场景：需要在前端开发服务配置中，把/websocket路径的代理开启WebSocket支持，否则代理层会拦截升级请求

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