使用原生 WebSocket API 可创建与服务器全双工通信的客户端，通过 new WebSocket('ws://localhost:8080') 建立连接，监听 open、message、error、close 事件处理连接状态与数据收发，调用 send() 方法发送字符串或 JSON 数据，现代浏览器无需额外依赖即可运行。
要实现一个简单的 WebSocket 客户端，只需要使用浏览器原生提供的 WebSocket API。它允许你与支持 WebSocket 协议的服务器进行全双工通信。下面是一个简洁、实用的实现示例。
创建 WebSocket 连接
使用 new WebSocket(url) 可以创建一个连接到指定地址的客户端。URL 通常以 ws://（非加密）或 wss://（加密）开头。
const socket = new WebSocket('ws://localhost:8080');
监听连接事件
WebSocket 提供了几个关键的事件回调，用于处理连接状态和数据收发。
1. 连接成功
立即学习“Java免费学习笔记（深入）”；
socket.addEventListener('open', function (event) {
console.log('连接已建立');
socket.send('你好，服务器！');
});
2. 接收消息
socket.addEventListener('message', function (event) {
console.log('收到消息:', event.data);
});
3. 处理错误
socket.addEventListener('error', function (event) {
console.error('发生错误:', event);
});
4. 连接关闭
socket.addEventListener('close', function (event) {
console.log('连接已关闭');
});
发送消息
通过调用 socket.send() 方法可以向服务器发送数据，支持字符串、Blob 或 ArrayBuffer。
// 发送文本
socket.send('这是一条测试消息');
// 发送 JSON 数据
const data = { type: 'chat', message: 'Hello' };
socket.send(JSON.stringify(data));
完整示例代码
// 创建 WebSocket 实例
const socket = new WebSocket('ws://localhost:8080');
// 连接打开时
socket.addEventListener('open', (event) => {
console.log('✅ 连接到服务器');
socket.send('客户端已上线');
});
// 监听来自服务器的消息
socket.addEventListener('message', (event) => {
console.log('? 收到:', event.data);
});
// 监听错误
socket.addEventListener('error', (event) => {
console.error('❌ 连接出错');
});
// 监听连接关闭
socket.addEventListener('close', (event) => {
console.log('⏹️ 连接已断开');
});
基本上就这些。只要服务器支持 WebSocket，这个客户端就能运行在现代浏览器中，无需额外依赖。注意确保服务端正在监听指定端口，并正确处理 WebSocket 握手协议。
