React回合制游戏与Node.js服务器的SSL证书配置及连接问题

配置方式是否可行？ #

完全可行。Node.js 本身支持通过内置的 https 模块直接配置 SSL 证书，启动 HTTPS 服务器，搭配 ws 库就能提供 WSS 服务，不需要依赖 Apache、Nginx 或 Kubernetes 这类反向代理（生产环境用反向代理做负载均衡、证书管理是常见方案，但并非必须）。

连接失败的常见原因及解决方法 #

1. 自签名证书未被客户端信任 #

浏览器默认会拒绝信任自签名证书，这是 WSS 连接失败最常见的原因：

• 开发环境：
  • 手动将 server-cert.pem 导入浏览器的信任证书列表（比如 Chrome 可在「设置-隐私和安全-安全-管理证书」中操作）。
  • 用 mkcert 工具生成本地可信自签名证书，它会自动将根证书导入系统信任库，无需手动配置。
• 生产环境：必须使用公开可信 CA（如 Let's Encrypt）签发的证书，不能使用自签名证书。

2. 端口、路径或域名配置错误 #

• 确认 Node 服务器监听的 HTTPS 端口（默认是 443，开发环境常用 8443 等非特权端口），客户端 WSS URL 必须对应正确端口，比如 wss://your-domain:8443。
• 检查后端 WebSocket 路径配置：如果后端给 WSS 指定了特定路径（如 new WebSocket.Server({ server, path: '/ws' })），客户端 URL 需加上对应路径，比如 wss://your-domain:8443/ws。

3. 证书文件加载异常 #

• 检查 readFileSync 的文件路径是否正确，确保服务器能读取到证书文件（比如路径是否相对当前工作目录、文件权限是否允许读取）。
• 验证证书格式：确保证书是 PEM 格式（内容以 -----BEGIN CERTIFICATE----- 和 -----END CERTIFICATE----- 包裹），其他格式（如 DER）需转换后使用。

4. 客户端证书的误解 #

只有当后端配置了双向 SSL 认证（要求客户端提供证书）时，才需要客户端配置证书。默认的单向认证（仅客户端验证服务器证书）无需客户端做任何证书操作：

• 如果后端确实开启了双向认证，原生浏览器 WebSocket API 不支持直接传入证书文件，需将客户端证书导入浏览器或操作系统信任库，浏览器会自动在连接时使用该证书。

正确配置示例 #

Node.js 后端 WSS 配置 #

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

// 加载证书文件
const serverOptions = {
  cert: fs.readFileSync('./sslCertif/server-cert.pem'),
  key: fs.readFileSync('./sslCertif/server-key.pem')
};

// 创建 HTTPS 服务器
const server = https.createServer(serverOptions, (req, res) => {
  res.writeHead(200);
  res.end('HTTPS server running');
});

// 绑定 WSS 服务到 HTTPS 服务器
const wss = new WebSocket.Server({ server });

wss.on('connection', (ws) => {
  console.log('Client connected');
  ws.send('Welcome to WSS server');

  ws.on('message', (data) => {
    console.log('Received:', data.toString());
  });
});

// 启动服务器
server.listen(8443, () => {
  console.log('Server running on https://localhost:8443');
});

React 客户端连接代码 #

import { useEffect } from 'react';

function WsComponent() {
  useEffect(() => {
    // 替换为你的服务器域名和端口
    const ws = new WebSocket('wss://localhost:8443');

    ws.onopen = () => {
      console.log('WSS connection established');
      ws.send('Hello from React client');
    };

    ws.onmessage = (event) => {
      console.log('Server message:', event.data);
    };

    ws.onerror = (error) => {
      console.error('WSS error:', error);
    };

    ws.onclose = () => {
      console.log('WSS connection closed');
    };

    // 组件卸载时关闭连接
    return () => {
      ws.close();
    };
  }, []);

  return <div>WebSocket Client</div>;
}

export default WsComponent;

内容的提问来源于stack exchange，提问作者Rémi Baldy