通过代理从浏览器连接NodeJS SSL服务的WebSocket连接异常问题

错误原因分析 #

1. 控制台的直接报错是因为 WebSocket 连接是异步建立的，创建实例后立刻调用send方法时，连接还处于CONNECTING状态，不允许发送数据。
2. 浏览器原生 WebSocket API 没有提供类似 C# 端的SetProxy方法，你不需要直连 8000 端口，直接走配置好的 Apache 代理路径即可。

解决方案 #

步骤1：调整连接地址与代码逻辑 #

直接连接 Apache 转发规则对应的代理路径即可，Apache 会自动将/server路径下的 WebSocket 流量转发到后端 8000 端口的 NodeJS 服务，同时要等待连接成功的open事件触发后再发送数据，示例代码如下：

// 直接使用代理路径作为WebSocket连接地址，无需指定8000端口
let socket = new WebSocket("wss://mydomain.io/server");

// 连接建立成功后再发送数据
socket.onopen = function() {
    socket.send('username#232');
};

// 监听服务端消息
socket.onmessage = function(e) {
    jQuery('#timer').html(e.data);
};

// 可选：添加错误、关闭事件方便排查问题
socket.onerror = function(error) {
    console.error('连接错误：', error);
};
socket.onclose = function(event) {
    console.log('连接关闭：', event.code, event.reason);
};

步骤2（可选）：优化Apache转发配置 #

如果调整代码后仍连接失败，是因为默认的代理配置没有处理WebSocket的协议升级请求，修改Location块的配置如下，重启Apache后生效：

<Location /server>
    ProxyPass wss://mydomain.io:8000
    ProxyPassReverse wss://mydomain.io:8000
    # 新增WebSocket协议升级处理规则
    RewriteEngine on
    RewriteCond %{HTTP:Upgrade} websocket [NC]
    RewriteCond %{HTTP:Connection} upgrade [NC]
    RewriteRule ^/server/?(.*) wss://mydomain.io:8000/$1 [P,L]
</Location>

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