教你如何使用WebSocket发送和接收数据

WebSocket 是一种支持服务器与客户端全双工通信的技术，通过单一持久连接实现双向数据传输。以下是使用 WebSocket 发送和接收数据的详细步骤及代码示例：

一、发送文本数据

核心方法：通过 WebSocket.send() 方法发送数据，需先建立连接。

1. 基础示例：直接发送数据// 创建 WebSocket 连接（使用 wss 协议确保安全性）var connection = new WebSocket('wss://echo.websocket.org');// 发送数据connection.send('样本数据');

说明：此示例创建连接后立即发送字符串 "样本数据"，但实际应用中需在连接就绪后发送。

2. 动态发送表单数据

通过按钮点击事件发送用户输入的内容：

<input type="text" id="text" placeholder="输入要发送的数据"><button id="btn">发送</button><script> var connection = new WebSocket('wss://echo.websocket.org'); var btn = document.getElementById('btn'); btn.addEventListener('click', function(e) { var text = document.getElementById('text'); connection.send(text.value); // 发送输入框的值 });</script>

关键点：
监听按钮点击事件，获取输入框内容。
调用 send() 方法时需确保连接已建立（可通过 onopen 事件确认）。

二、接收文本数据

核心方法：通过 onmessage 事件处理服务器返回的数据。

1. 基础接收示例var connection = new WebSocket('wss://echo.websocket.org');connection.onmessage = function(e) { console.log('收到数据:', e.data); // 打印服务器返回的数据};

说明：测试服务器 echo.websocket.org 会原样返回客户端发送的数据，此处直接打印到控制台。

2. 接收后关闭连接

若需单次通信后断开连接：

connection.onmessage = function(e) { console.log('收到数据:', e.data); connection.close(); // 立即关闭连接};

注意事项：
调用 close() 后需重新建立连接才能再次通信。
关闭前可监听 onclose 事件处理清理逻辑。

三、完整生命周期示例

以下代码整合了连接建立、发送、接收和关闭的完整流程：

// 1. 创建连接var connection = new WebSocket('wss://echo.websocket.org');// 2. 连接建立时触发connection.onopen = function() { console.log('连接已建立'); connection.send('Hello, Server!'); // 发送测试消息};// 3. 接收消息时触发connection.onmessage = function(e) { console.log('收到回复:', e.data); connection.close(); // 可选：自动关闭连接};// 4. 连接关闭时触发connection.onclose = function() { console.log('连接已关闭');};// 5. 错误处理connection.onerror = function(error) { console.error('WebSocket错误:', error);};

关键事件：
onopen：连接就绪后发送初始化数据。
onmessage：处理服务器返回的任意格式数据（如 JSON 需解析）。
onclose/onerror：监控连接状态，增强健壮性。

四、进阶场景1. 发送 JSON 数据var data = { type: 'message', content: 'Hello' };connection.send(JSON.stringify(data)); // 序列化为字符串发送// 接收时解析connection.onmessage = function(e) { var response = JSON.parse(e.data); console.log(response.content); // 输出: Hello};2. 二进制数据传输

使用 ArrayBuffer 或 Blob 发送二进制数据：

// 发送 ArrayBuffer 示例var buffer = new ArrayBuffer(8);var view = new Uint8Array(buffer);view[0] = 42;connection.send(buffer);// 接收二进制数据（需设置 binaryType）connection.binaryType = 'arraybuffer';connection.onmessage = function(e) { console.log(new Uint8Array(e.data)); // 输出接收到的二进制数据};五、注意事项

协议选择：生产环境务必使用 wss://（加密 WebSocket）避免数据泄露。
心跳机制：长时间空闲连接可能被中断，需定期发送心跳包（如空消息）维持连接。
兼容性：部分旧浏览器需使用 polyfill（如 Socket.IO）实现兼容。
重连策略：网络波动导致断开时，应实现指数退避重连逻辑。

图：WebSocket 双向通信示意图

通过以上方法，开发者可以灵活实现实时聊天、股票推送、多人协作等需要低延迟双向通信的场景。

您可能感兴趣问答

Collapsible

热门标签

热点问答