【总结】1892- 理解 WebSocket 和 SSE

pingan8787

发布于 2023-12-13 12:17:19

3150

发布于 2023-12-13 12:17:19

文章被收录于专栏：前端自习课前端自习课

在 Web 应用中实现实时通信是一个常见需求。WebSocket 和 Server-Sent Events (SSE) 是实现这一目标的两种关键技术。本文将更深入地探讨这两种技术，并提供一些实际的使用示例。

WebSocket：全双工通信的实现

WebSocket 允许在单个 TCP 连接上进行「全双工通信」，适用于需要高频双向数据交换的应用。

工作原理

「握手阶段」：通过发送一个包含 Upgrade: websocket 头的 HTTP 请求来初始化 WebSocket 连接。服务器响应 101 Switching Protocols 状态码，确认升级。
「数据传输」：连接建立后，客户端和服务器可以自由地发送和接收数据。

使用示例

「聊天应用」：使用 WebSocket 实现一个基本的聊天应用，能够实时发送和接收消息。
「股票行情应用」：实时接收和展示股票市场的价格变动。

实现代码示例：

// 创建 WebSocket 连接
const socket = new WebSocket("ws://www.example.com/socketserver");

// 连接建立时的处理
socket.onopen = function (event) {
  // 发送消息
  socket.send("Hello, Server!");
};

// 接收消息
socket.onmessage = function (event) {
  console.log("Received message:", event.data);
};

SSE：简化的单向数据流

SSE (Server-Sent Events) 是一种基于 HTTP 的技术，允许「服务器向客户端单向发送数据流」，适用于不需要客户端响应的场景。

工作原理

「建立连接」：客户端发起一个 HTTP 请求，服务器响应并保持该连接打开。
「发送数据」：服务器可以随时通过这个连接向客户端发送消息。

EventSource 介绍

EventSource 是浏览器提供的一个接口，允许你轻松接收来自服务器的 SSE 消息流。

创建 EventSource 实例
要使用 SSE，你需要创建一个指向服务器端点的 EventSource 实例。

const eventSource = new EventSource("http://example.com/sse");

接收数据

当服务器发送消息时，可以通过监听 onmessage 事件来处理这些数据。

eventSource.onmessage = function (event) {
  console.log("Received message:", event.data);
};

关闭连接

如果你想手动关闭连接，可以调用 close 方法。

eventSource.close();

使用示例

新闻推送服务：自动更新最新新闻。
实时通知系统：如系统状态更新通知。

WebSocket 与 SSE 选择

「通信方式」：WebSocket 提供双向通信，适用于需要客户端和服务器间频繁交互的应用；SSE 仅支持从服务器到客户端的单向通信，适用于更新频率较低的场景。
「支持和兼容性」：WebSocket 需要特定的服务器和客户端支持；SSE 更容易集成到现有 HTTP 基础设施中。
「适用场景」：WebSocket 适合聊天应用、在线游戏等；SSE 适合新闻推送、实时通知等应用。