摘要：这个实现结合了 ES6 的类语法、箭头函数、模板字符串等特性，提供了较为完整的 WebSocket 客户端功能。你可以根据具体需求扩展或修改这个基础实现。
以下是使用 ES6 实现 Websocket 客户端功能的示例代码：
javascript
class WebSocketClient {
constructor(url) {
this.url = url;
this.socket = null;
this.isConnected = false;
this.reconnectAttempts = 0;
this.maxReconnectAttempts = 5;
// 自动连接
this.connect;
}
connect {
this.socket = new WebSocket(this.url);
// 连接成功
this.socket.onopen = => {
this.isConnected = true;
this.reconnectAttempts = 0;
console.log('WebSocket connected');
this.onOpen;
};
// 接收消息
this.socket.onmessage = (event) => {
console.log('Received:', event.data);
this.onMessage(event.data);
};
// 连接关闭
this.socket.onclose = (event) => {
this.isConnected = false;
console.log(`Connection closed: ${event.reason}`);
this.onClose(event);
this.handleReconnect;
};
// 错误处理
this.socket.onerror = (error) => {
console.error('WebSocket error:', error);
this.onError(error);
};
}
// 发送消息
send(data) {
if (this.isConnected) {
this.socket.send(JSON.stringify(data));
} else {
console.error('WebSocket not connected');
}
}
// 关闭连接
close {
if (this.socket) {
this.socket.close;
}
}
// 重连机制
handleReconnect {
if (this.reconnectAttempts
this.reconnectAttempts++;
console.log(`Reconnecting... (Attempt ${this.reconnectAttempts})`);
setTimeout( => this.connect, 3000);
}
}
// 需要被子类覆盖的方法
onOpen {}
onMessage(data) {}
onClose(event) {}
onError(error) {}
}
// 使用示例
const wsClient = new WebSocketClient('wss://echo.websocket.org');
wsClient.onOpen = => {
console.log('Connected!');
wsClient.send({ message: 'Hello Server!' });
};
wsClient.onMessage = (data) => {
try {
const message = JSON.parse(data);
console.log('Parsed message:', message);
} catch (e) {
console.log('Received text:', data);
}
};
wsClient.onClose = (event) => {
console.log('Connection closed:', event.reason);
};
wsClient.onError = (error) => {
console.error('WebSocket error:', error);
};
功能说明：
自动重连：在连接意外断开时自动尝试重新连接（最多5次）JSON 支持：自动处理消息的序列化和反序列化事件处理：提供 onOpen、onMessage、onClose、onError 等可扩展的回调方法状态管理：内置连接状态跟踪错误处理：完善的错误处理机制服务端示例（Node.js 使用 ws 库）：
javascript
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', (ws) => {
console.log('Client connected');
ws.on('message', (message) => {
console.log('Received:', message);
ws.send(`Server received: ${message}`);
});
ws.on('close', => {
console.log('Client disconnected');
});
});
console.log('WebSocket server running on ws://localhost:8080');
主要 API 方法：
new WebSocketClient(url) - 创建 WebSocket 客户端实例send(data) - 发送数据（支持对象自动序列化）close - 手动关闭连接事件回调：Ø onOpen - 连接建立时触发
Ø onMessage(data) - 收到消息时触发
Ø onClose(event) - 连接关闭时触发
Ø onError(error) - 发生错误时触发
建议使用 wss:// 协议保证安全连接需要处理消息边界（WebSocket 是面向消息的协议）建议添加心跳机制保持连接浏览器端可能需要处理跨域问题大数据传输建议分片处理这个实现结合了 ES6 的类语法、箭头函数、模板字符串等特性，提供了较为完整的 WebSocket 客户端功能。你可以根据具体需求扩展或修改这个基础实现。
来源：老客数据一点号
