Server-Sent Events 与 WebSocket 的异同

前端开发中，实时通信是一个常见的需求。Server-Sent Events（SSE）和WebSocket是两种常用的实现方式。虽然它们都可以实现实时通信，但是它们之间有很多异同点。本文将介绍SSE和WebSocket的异同点，并提供示例代码帮助读者更好地理解。

Server-Sent Events

Server-Sent Events是一种基于HTTP的实时通信协议。它基于HTTP长连接，服务器可以在任何时候向客户端发送事件。SSE使用EventSource对象来建立与服务器的连接，并通过监听message事件来接收服务器发送的数据。

优点

• SSE是基于HTTP的，不需要额外的协议支持，可以直接使用浏览器内置的HTTP协议。
• SSE支持浏览器自动重连，如果连接断开，浏览器会自动重新建立连接。
• SSE支持自定义事件，服务器可以向客户端发送自定义事件，并在客户端进行处理。

缺点

• SSE只能实现服务器到客户端的单向通信，无法进行双向通信。
• SSE无法发送二进制数据，只能发送文本数据。
• SSE的兼容性较差，不支持IE浏览器，需要使用polyfill进行兼容。

示例代码

以下是一个简单的SSE示例代码，服务器使用Node.js和Express框架实现：

-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------

--------------- ----- ---- -- -
  ---------
    --------------- --------------------
    ---------------- -----------
    ------------- ------------
  ---
  ----------------

  -------------- -- -
    ----- ---- - ------ ----- ---------------------------
    ----------------
  -- ------
---

---------------- -- -- -
  ------------------- -- ------- -- ---- -------
---

客户端代码：

const source = new EventSource('/sse');
source.addEventListener('message', (event) => {
  console.log(event.data);
});

WebSocket

WebSocket是一种全双工通信协议，可以实现双向通信。它基于TCP协议，可以在客户端和服务器之间建立持久连接。WebSocket使用WebSocket对象来建立与服务器的连接，并通过send方法来发送和接收数据。

优点

• WebSocket支持双向通信，服务器和客户端都可以发送和接收数据。
• WebSocket支持发送二进制数据，可以发送任何类型的数据。
• WebSocket的性能更好，可以实现更高效的实时通信。

缺点

• WebSocket需要额外的协议支持，需要使用WebSocket协议。
• WebSocket需要服务器端和客户端都支持，对于一些老旧的浏览器可能无法使用。

示例代码

以下是一个简单的WebSocket示例代码，服务器使用Node.js和ws库实现：

-- -------------------- ---- -------
----- --------- - --------------
----- ------ - --- ------------------ ----- ---- ---

----------------------- -------- -- -
  -------------- -- -
    ----- ---- - --- ---------------------
    ------------------
  -- ------
---

客户端代码：

const socket = new WebSocket('ws://localhost:3000');
socket.addEventListener('message', (event) => {
  console.log(event.data);
});

异同点对比

结论

Server-Sent Events和WebSocket都可以实现实时通信，但是它们之间存在很多异同点。根据实际需求，选择合适的实现方式可以更好地满足业务需求。如果需要双向通信和发送二进制数据，应该选择WebSocket；如果只需要单向通信和发送文本数据，可以选择Server-Sent Events。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67262d202e7021665e19ae98