JavaScript客户端WebSocket无法连接至服务器问题求助

核心问题：客户端连接地址错误 #

你在客户端代码中使用ws://localhost:6000，但网站托管在Glitch平台时，客户端（浏览器）运行在用户本地设备，localhost指向的是用户自身电脑而非Glitch服务器，这是连接失败的关键原因。

具体修复步骤 #

1. 修正客户端连接地址 #

将客户端的WebSocket连接地址替换为Glitch项目的域名，格式如下：

var socket = new WebSocket("wss://你的项目名称.glitch.me");

注：Glitch默认支持安全WebSocket协议wss，使用该协议可避免协议兼容问题，稳定性更强。

2. 适配Glitch的端口规则 #

Glitch不允许自定义端口（如6000），会通过环境变量PORT自动分配可用端口。需修改服务器代码，绑定到HTTP服务器而非单独指定端口：

const express = require("express");
const app = express();
const http = require('http')
const server = http.createServer(app)
const WebSocket = require('ws')

// 使用Glitch提供的PORT环境变量，本地调试 fallback 到6000
const port = process.env.PORT || 6000;
// 将WebSocket服务器绑定到已创建的HTTP服务器
var wss = new WebSocket.Server({ server });

wss.on('connection', function connection(ws) {
    console.log('Connected WebSocket')
    ws.on('message', function incoming(message) {
        console.log(message)
    })
})

// 启动HTTP服务器
server.listen(port, () => {
    console.log(`Server running on port ${port}`);
});

修改后WebSocket服务器将与Express HTTP服务器共享同一端口，符合Glitch部署要求。

3. 增加客户端调试监听（推荐） #

在客户端代码中添加错误和连接状态监听，便于排查后续问题：

var socket = new WebSocket("wss://你的项目名称.glitch.me");

socket.onmessage = function(event) {
  console.log(event.data)
};

socket.onerror = function(error) {
  console.error('WebSocket错误:', error);
};

socket.onopen = function() {
  console.log('WebSocket连接成功');
};

socket.onclose = function(event) {
  console.log('WebSocket连接关闭:', event.code, event.reason);
};

额外注意事项 #

• Glitch项目域名可在编辑器的「Share」按钮中获取，格式为https://项目名称.glitch.me，替换WebSocket协议为wss://即可使用。
• 可通过Glitch项目的「Logs」面板查看服务器运行状态，确认无语法错误或启动异常。

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