在 Web 程序设计中，需要在客户端和服务器之间传输数据。传统上，HTTP 请求和响应被用于这一目的，但它们是一次性的，即每次请求都需要发送新的数据。现在有两种技术可以提供持续和双向的数据传输：Server-sent Events 和 Websocket。
Server-sent Events
Server-sent Events 是一种服务器推送技术，允许服务器在任何时间向客户端发送数据，而不需要客户端发出一个请求。服务器可以为订阅者提供持续不断的数据流。
Server-sent Events 是纯文本协议，通过 HTTP 协议发送。接收方使用 EventSource API 来接收数据，并可以在 JavaScript 代码中定义回调函数来处理每个事件。以下是一个例子：
-- -------------------- ---- ------- --- ------ - --- ----------------------- ------------- - ---------- - ----------------------- ------- -- -------------- - --------------- - ------------------ ----------- ------- -- ---------------- - --------------- - -------------------- ----------- ------------ --
这些回调函数被定义用于处理 3 个事件：
- onopen：表示连接已建立
- onerror：表示连接发生错误
- onmessage：表示收到消息
Websocket
Websocket 是一种双向通信协议，允许客户端和服务器之间建立持久连接，并可以相互发送数据。Websocket 通过 HTTP 完成握手，然后每一方都可以使用 send 和 receive 方法发送和接收消息。
Websocket 是二进制协议，但它提供了一些库，例如 Socket.IO 和 SockJS，可以将 Websocket 转换为文本协议。
以下是一个 Websocket 的例子：
-- -------------------- ---- ------- --- ------ - --- --------------------------------- ------------- - ---------- - ----------------------- ------- -- -------------- - --------------- - ------------------ ----------- ------- -- ---------------- - --------------- - -------------------- ----------- ------------ -- ------------------- ----------
这些回调函数同样适用于 Websocket。此外，有两个其他的回调函数：
- onclose：当连接关闭时调用
- send：向另一方发送消息
区别和联系
Server-sent Events 和 Websocket 都可以提供持续和双向的通信，但它们有几个区别和联系。
首先，它们使用的协议不同。Server-sent Events 使用纯文本 HTTP 协议，而 Websocket 使用二进制协议。这使得 Server-sent Events 更加轻量，但也限制了其功能。
其次，Server-sent Events 只能从服务器向客户端发送数据，而 Websocket 客户端和服务器之间都可以发送数据。这意味着 Websocket 可以用于实现更加复杂的应用程序，例如在线游戏或聊天室。
但是，使用 Websocket 也需要更多的资源。Websocket 的握手过程需要更多的计算和更大的带宽，所以如果只需要一个简单的实时通信，Server-sent Events 可能更加适合。
总结
Server-sent Events 和 Websocket 都是提供实时通信的技术，但它们有很大的不同。Server-sent Events 是纯文本协议，只能从服务器向客户端发送数据，而 Websocket 可以相互发送数据。选择哪种技术应该根据应用场景和需求的复杂度来决定。
以上是一个简单的介绍，希望可以帮助大家更好的理解 Server-sent Events 和 Websocket 的区别和联系。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64756f5e968c7c53b0281200