SSE 与 Websocket 的区别与联系-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常需要实现实时通信功能，比如聊天室、在线游戏等。而 SSE 和 Websocket 是两种常用的实现实时通信的技术。本文将介绍 SSE 和 Websocket 的区别与联系，并给出示例代码。

SSE

SSE（Server-Sent Events）是一种基于 HTTP 协议的服务器推送技术，通过浏览器和服务器之间的持久连接实现实时通信。SSE 的优点是简单易用，只需要使用浏览器内置的 EventSource 对象即可接收服务器端推送的消息。另外，SSE 也支持跨域通信。

下面是一个基本的 SSE 示例代码：

const eventSource = new EventSource('/sse');
eventSource.onmessage = (event) => {
  console.log(event.data);
};

上面的代码中，我们创建了一个 EventSource 对象，将其连接到服务器端的 /sse 路径。当服务器端有消息推送时，浏览器会触发 onmessage 事件，并将消息内容存储在 event.data 属性中。

Websocket

Websocket 是一种双向通信协议，可以在浏览器和服务器之间建立持久连接，实现实时通信。与 SSE 不同的是，Websocket 是一种独立的协议，需要使用专门的 Websocket 对象进行通信。

下面是一个基本的 Websocket 示例代码：

const websocket = new WebSocket('ws://localhost:8080');
websocket.onmessage = (event) => {
  console.log(event.data);
};
websocket.send('hello');

上面的代码中，我们创建了一个 WebSocket 对象，将其连接到服务器端的 ws://localhost:8080 地址。当服务器端有消息推送时，浏览器会触发 onmessage 事件，并将消息内容存储在 event.data 属性中。我们也可以使用 websocket.send 方法向服务器端发送消息。

区别与联系

SSE 和 Websocket 都可以实现实时通信，但在使用上有一些区别：

SSE 是基于 HTTP 协议的，而 Websocket 是一种独立的协议。
SSE 是单向通信，只能从服务器端向浏览器推送消息，而 Websocket 是双向通信，可以在浏览器和服务器之间进行双向通信。
SSE 可以使用浏览器内置的 EventSource 对象进行通信，而 Websocket 需要使用专门的 WebSocket 对象进行通信。
SSE 通常用于服务器向浏览器推送实时数据，比如股票行情、天气预报等；而 Websocket 通常用于浏览器和服务器之间的实时双向通信，比如聊天室、在线游戏等。

总结

本文介绍了 SSE 和 Websocket 的区别与联系。SSE 和 Websocket 都是实现实时通信的常用技术，选择哪种技术取决于具体的应用场景。在实际开发中，我们可以根据需求选择合适的技术实现实时通信功能。

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