本文介绍如何根据网站子路径（如 /123、/3212）动态拼接 WebSocket URL，并建立连接以实时捕获服务器推送的二进制消息，适用于多端点、变路径的 WebSocket 场景。
本文介绍如何根据网站子路径（如 `/123`、`/3212`）动态拼接 websocket url，并建立连接以实时捕获服务器推送的二进制消息，适用于多端点、变路径的 websocket 场景。
在现代 Web 应用中，许多实时功能（如行情推送、协同编辑、IoT 设备通信）依赖 WebSocket 协议。当目标网站为同一域名下多个子路径（例如 https://example.com/123 和 https://example.com/3212）分别建立独立 WebSocket 连接时，其 WS 地址往往也遵循类似规律（如 wss://example.com/ws/123）。此时，硬编码单一连接不可行，需通过程序化方式动态生成并管理多个 WebSocket 实例。
以下是一个健壮、可复用的 JavaScript 实现方案：
// ✅ 配置区：请按实际环境修改
const WS_BASE_URL = 'wss://example.com/ws/'; // WebSocket 协议前缀 + 公共路径
const TARGET_SUB_PATHS = ['123', '3212', 'abc']; // 对应各子页面的唯一标识（即 URL 路径后缀）
// ? 核心连接函数：为指定子路径创建并启动 WebSocket
function connectToSubPath(subPath) {
const wsUrl = `${WS_BASE_URL}${subPath}`;
const socket = new WebSocket(wsUrl);
// 连接成功
socket.addEventListener('open', () => {
console.log(`✅ 已连接至 ${wsUrl}`);
});
// 接收消息（重点：支持二进制）
socket.addEventListener('message', (event) => {
const data = event.data;
// 自动识别 ArrayBuffer（二进制）或 Blob / String
if (data instanceof ArrayBuffer) {
console.log(`? 收到二进制数据（${subPath}）:`, new Uint8Array(data));
// ✨ 此处可进一步解析：如解码 Protocol Buffer、处理 JPEG 帧、提取结构化字段等
processBinaryData(data, subPath);
} else if (data instanceof Blob) {
console.warn(`⚠️ 接收到 Blob 类型数据（${subPath}），建议使用 .arrayBuffer() 转换`);
data.arrayBuffer().then(processBinaryData);
} else {
console.log(`? 文本消息（${subPath}）:`, data);
}
});
// 连接关闭与错误处理（生产环境务必保留）
socket.addEventListener('close', (e) => {
console.log(`? 连接已关闭（${subPath}）: code=${e.code}, reason=${e.reason}`);
});
socket.addEventListener('error', (e) => {
console.error(`❌ WebSocket 错误（${subPath}）:`, e);
});
return socket; // 返回实例便于后续手动控制（如 close()）
}
// ? 示例：二进制数据处理逻辑（按需定制）
function processBinaryData(arrayBuffer, context) {
const view = new DataView(arrayBuffer);
// 示例：读取前4字节作为长度头（常见协议设计）
if (arrayBuffer.byteLength >= 4) {
const payloadLen = view.getUint32(0, false); // 大端序
console.log(`[${context}] 解析有效载荷长度: ${payloadLen} 字节`);
}
// ? 此处替换为您自己的解析逻辑（如使用 protobufjs、自定义二进制协议等）
}
// ? 启动所有子路径连接
const activeSockets = TARGET_SUB_PATHS.map(connectToSubPath);
// ⚠️ 注意事项：
// 1. 同源策略限制：WebSocket 不受同源策略约束，但浏览器仍要求目标服务端明确允许跨域（通过 Sec-WebSocket-Origin 或 CORS 配置）；
// 2. 安全协议：生产环境必须使用 wss://（而非 ws://），否则现代浏览器将拒绝连接；
// 3. 连接数限制：单页面并发 WebSocket 数量通常受限于浏览器（Chrome 约 6–10 个），高并发场景建议复用连接或采用服务端路由；
// 4. 心跳与重连：上述代码未包含自动重连逻辑；真实项目中应监听 close/error 并实现指数退避重连；
// 5. 内存管理：若需动态断开，请保存 socket 引用并在适当时机调用 socket.close()，避免内存泄漏。该方案不仅解决了“URL 动态拼接”和“二进制消息接收”两大核心需求，还预留了协议解析入口与工程化扩展点。开发者只需替换 WS_BASE_URL 和 TARGET_SUB_PATHS，即可快速适配目标网站结构。对于更复杂的场景（如子路径需从 HTML <meta> 标签或 URL 参数动态提取），可结合 document.URL 或 new URL(window.location) 进一步增强自动化能力。
