如何让Express与WebSocket共用端口并实现WSS加密连接？

核心思路 #

要实现WSS://安全连接，必须让Express（HTTPS）和WebSocket服务共用同一个HTTPS服务器实例，而非分别启动两个独立服务。这样SSL/TLS层会统一处理所有流量，WebSocket连接通过HTTP升级请求自动转换为WSS连接。

具体步骤与代码修改 #

1. 确认SSL证书有效性 #

确保你拥有匹配域名的有效SSL证书（如Let's Encrypt颁发的），证书文件通常为fullchain.pem（公钥）和privkey.pem（私钥），存放在服务器的安全目录下。

2. 重构服务器代码：合并Express与WebSocket #

将原本分端口运行的Express和WebSocket服务，改为基于同一HTTPS服务器挂载：

const express = require('express');
const https = require('https');
const fs = require('fs');
const WebSocket = require('ws');
const cors = require('cors');

const app = express();

// 配置CORS，允许两个React应用的域名
app.use(cors({
  origin: ['https://your-first-react-app.com', 'https://your-second-react-app.com'],
  credentials: true
}));

// Express业务路由：生成随机链接接口
app.get('/generate-link', (req, res) => {
  const randomLink = `room-${Math.random().toString(36).slice(2, 10)}`;
  res.json({ link: randomLink });
});

// 加载SSL证书配置
const sslOptions = {
  key: fs.readFileSync('/path/to/privkey.pem'),
  cert: fs.readFileSync('/path/to/fullchain.pem')
};

// 创建HTTPS服务器，同时承载Express和WebSocket
const server = https.createServer(sslOptions, app);

// 初始化WebSocket服务器，挂载到HTTPS实例上
const wss = new WebSocket.Server({ server, path: '/ws' });

// WebSocket连接处理逻辑
wss.on('connection', (ws) => {
  console.log('新的WSS连接建立');
  
  ws.on('message', (data) => {
    // 示例：转发消息到其他在线客户端
    wss.clients.forEach(client => {
      if (client !== ws && client.readyState === WebSocket.OPEN) {
        client.send(data);
      }
    });
  });

  ws.on('close', () => {
    console.log('WSS连接关闭');
  });
});

// 监听标准HTTPS/WSS端口443
const PORT = 443;
server.listen(PORT, () => {
  console.log(`服务器运行在https://your-domain.com:${PORT}`);
});

3. 前端React应用修改连接地址 #

将原ws://开头的连接地址，改为wss://协议并指向同一端口（路径需与服务器配置的path一致）：

// React组件中的WSS连接代码
const ws = new WebSocket('wss://your-domain.com/ws');

ws.onopen = () => {
  console.log('WSS连接成功');
};

// 消息接收、发送逻辑...

常见错误排查 #

• 端口占用：用lsof -i :443检查端口是否被其他服务占用，如有则停止对应服务或更换端口（如8443）。
• 证书问题：若浏览器提示证书无效，检查证书路径是否正确、证书是否过期、域名是否匹配。
• 跨域拦截：确保Express的CORS配置包含两个React应用的域名；也可在WebSocket服务器中添加来源验证：

  const wss = new WebSocket.Server({ 
    server, 
    path: '/ws',
    verifyClient: (info, done) => {
      const allowedOrigins = ['https://your-first-react-app.com', 'https://your-second-react-app.com'];
      done(allowedOrigins.includes(info.origin), 403, 'Origin not allowed');
    }
  });
  

• 防火墙限制：检查VPS防火墙是否开放443端口，确保入站规则允许HTTPS流量。

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