WebSocket 使用教程

WebSocket 使用教程

WebSocket 是一种在现代网络应用中广泛使用的网络通信协议，旨在实现服务器与客户端之间高效、实时的双向通信。与传统的 HTTP 协议相比，WebSocket 提供了更低的延迟和更高的互动性，使其成为构建实时应用的理想选择。无论是在在线聊天、实时数据监控，还是协同编辑等场景中，WebSocket 都展现出了其强大的优势。

本教程将深入介绍 WebSocket 的基本概念、在客户端和服务器端的实现方式、一个完整的示例，以及 WebSocket 的优势与劣势对比。通过本教程，您将全面了解如何在自己的项目中应用 WebSocket 技术。

一、WebSocket 基本概念

1. 握手过程

WebSocket 的通信始于一个握手过程。客户端通过发送一个特殊的 HTTP 请求，包含诸如 Upgrade: websocket 和 Connection: Upgrade 等头字段，请求将连接从 HTTP 升级到 WebSocket。如果服务器同意升级，会返回一个 101 状态码的响应，握手成功后，连接即进入 WebSocket 模式，开始进行全双工通信。

2. 数据帧

握手成功后，客户端和服务器通过传输数据帧进行通信。WebSocket 数据帧可以承载文本或二进制数据，支持掩码处理以确保数据的完整性和安全性。

3. 连接管理

任何一方都可以随时发送关闭帧来终止 WebSocket 连接。通常，关闭帧包含状态码和可选的关闭原因，用于告知对方连接关闭的原因。

二、客户端使用 WebSocket

在浏览器环境中，JavaScript 提供了 WebSocket 对象，使得客户端能够轻松创建和管理 WebSocket 连接。

示例代码

以下是一个简单的客户端示例，展示如何连接到服务器、发送消息并接收服务器的响应：

// 创建一个新的 WebSocket 实例，连接到指定的 WebSocket 端点
const socket = new WebSocket('ws://example.com/socket');

// 监听连接开启事件
socket.addEventListener('open', (event) => {
   
    console.log('WebSocket 连接已打开');
    // 向服务器发送消息
    socket.send('你好，服务器！');
});

// 监听接收消息事件
socket.addEventListener('message', (event) => {
   
    console.log('接收到服务器消息:', event.data);
});

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