在 Web 应用中实现实时通信是一个常见需求。WebSocket 和 Server-Sent Events (SSE) 是实现这一目标的两种关键技术。本文将更深入地探讨这两种技术,并提供一些实际的使用示例。
WebSocket 允许在单个 TCP 连接上进行「全双工通信」,适用于需要高频双向数据交换的应用。
Upgrade: websocket
头的 HTTP 请求来初始化 WebSocket 连接。服务器响应 101 Switching Protocols
状态码,确认升级。实现代码示例:
// 创建 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 (Server-Sent Events) 是一种基于 HTTP 的技术,允许「服务器向客户端单向发送数据流」,适用于不需要客户端响应的场景。
EventSource 是浏览器提供的一个接口,允许你轻松接收来自服务器的 SSE 消息流。
const eventSource = new EventSource("http://example.com/sse");
当服务器发送消息时,可以通过监听 onmessage
事件来处理这些数据。
eventSource.onmessage = function (event) {
console.log("Received message:", event.data);
};
如果你想手动关闭连接,可以调用 close
方法。
eventSource.close();
WebSocket 和 SSE 都是实现 Web 应用中实时通信的强大工具。它们各自有不同的优势和适用场景。理解这两种技术的工作原理、EventSource 的使用方法及其实际应用示例,可以帮助开发人员为他们的项目选择最适合的实时通信解决方案。
往期回顾
#
如何使用 TypeScript 开发 React 函数式组件?
#
#
#
#
6 个你必须明白 Vue3 的 ref 和 reactive 问题
#
#