一、WebSocket简介

WebSocket是一种在单个TCP连接上进行全双工通信的协议。与HTTP不同，WebSocket在初始握手后保持连接打开，客户端和服务器可以随时互相发送数据。这大大减少了通信开销，尤其适合高频、小数据量的实时交互场景。

在浏览器中，WebSocket 是一个内置的全局对象，我们可以通过 new WebSocket(url) 的方式创建连接。URL通常以 ws://（非加密）或 wss://（加密）开头。

二、创建基础WebSocket客户端

以下是一个最基础的WebSocket客户端实现：

javascript
// 定义WebSocket连接地址
const socketUrl = 'ws://localhost:8080';

// 创建WebSocket实例
const socket = new WebSocket(socketUrl);

// 监听连接成功事件
socket.addEventListener('open', (event) => {
console.log('WebSocket连接已建立');
// 连接成功后可立即发送消息
socket.send('客户端已上线');
});

// 监听来自服务器的消息
socket.addEventListener('message', (event) => {
console.log('收到消息:', event.data);
// 可在此处处理不同类型的消息
handleServerMessage(event.data);
});

// 监听连接关闭事件
socket.addEventListener('close', (event) => {
console.log('连接已关闭', event.code, event.reason);
});

// 监听错误事件
socket.addEventListener('error', (event) => {
console.error('发生错误:', event);
});

上述代码展示了WebSocket的基本使用流程：创建实例、监听关键事件（open、message、close、error），并实现了消息的发送与接收。

三、增强客户端功能

为了提升稳定性和用户体验，我们需要为客户端添加更多实用功能。

1. 消息处理函数

javascript function handleServerMessage(data) { try { const message = JSON.parse(data); // 假设服务器发送的是JSON格式 switch (message.type) { case 'chat': displayChatMessage(message.content); break; case 'notice': showSystemNotice(message.content); break; default: console.log('未知消息类型:', message); } } catch (e) { console.warn('消息解析失败:', data); } }

2. 发送封装函数

javascript function sendMessage(type, content) { if (socket.readyState === WebSocket.OPEN) { const msg = JSON.stringify({ type, content }); socket.send(msg); } else { console.warn('连接未就绪，无法发送消息'); } }

3. 自动重连机制

网络不稳定时，连接可能中断。加入自动重连逻辑能显著提升健壮性：

javascript
let reconnectInterval = 1000; // 初始重连间隔（毫秒）
let maxReconnectInterval = 30000; // 最大重连间隔
let shouldReconnect = true;

function connect() {
const ws = new WebSocket(socketUrl);

ws.addEventListener('open', () => {
    console.log('连接成功');
    reconnectInterval = 1000; // 成功后重置重连时间
});

ws.addEventListener('close', () => {
    if (shouldReconnect) {
        console.log(`连接断开，${reconnectInterval / 1000}秒后尝试重连...`);
        setTimeout(connect, reconnectInterval);
        reconnectInterval = Math.min(reconnectInterval * 2, maxReconnectInterval);
    }
});

ws.addEventListener('error', (e) => {
    console.error('连接异常:', e);
});

// 将新实例赋值给全局socket（注意：需处理旧连接）
socket = ws;

}

4. 安全关闭连接

提供手动关闭接口，避免资源浪费：

javascript function closeConnection() { shouldReconnect = false; if (socket && socket.readyState === WebSocket.OPEN) { socket.close(1000, '用户主动断开'); } }

四、实际应用场景建议

在真实项目中，还需考虑心跳机制防止连接被中间代理断开，以及消息队列缓存离线期间的消息。此外，建议对敏感操作增加身份验证（如通过JWT令牌在握手阶段认证）。

通过以上实现，你已经拥有了一个具备生产级基础能力的WebSocket客户端。它轻量、可控，适用于大多数需要实时通信的前端场景。随着业务复杂度提升，可进一步封装成类或模块，便于复用与维护。

WebSocket打开了浏览器实时通信的大门，掌握其客户端实现，是每位现代前端开发者必备的技能。