如何正确用Express.js搭建WebSocket服务器？连接失败求助

问题根源 #

你在src/api/index.ts中调用expressWs(express())创建了一个全新的Express实例，但这个实例并未与你实际启动的服务端app关联，导致WebSocket路由根本没有被挂载到运行的服务器上，自然无法响应客户端的连接请求。

修复步骤 #

1. 修改src/app.ts，将expressWs绑定到实际运行的app #

import express from 'express'
import expressWs from 'express-ws'
import api from './api'

const app = express()
// 为当前要启动的app实例添加WebSocket支持
expressWs(app)

app.use('/api/v1', api)

export default app

2. 修改src/api/index.ts，移除多余的实例创建代码 #

import express from 'express' // v4.18.1

const router = express.Router()

router.ws('/', (ws, req) => {
    ws.on('message', msg => {
        console.log(msg)
    })
})

export default router

原理说明 #

expressWs的作用是为Express的app和Router对象扩展.ws()方法，使其支持WebSocket路由。你之前在api模块中创建的新Express实例没有被启动，对应的WebSocket端点完全不存在。现在将初始化逻辑移到app.ts，让实际运行的服务端app拥有WebSocket能力，router的.ws()路由就能正常被挂载并响应请求。

验证 #

重启服务后，运行客户端代码：

const socket = new WebSocket('ws://localhost:41240/api/v1')

socket.addEventListener('open', () => {
    socket.send('iloveyou')
})

此时客户端能正常建立连接，服务端控制台会打印收到的iloveyou消息。

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