在前端开发中，我们经常需要实现实时通信功能，比如聊天室、在线游戏等。而 SSE 和 Websocket 是两种常用的实现实时通信的技术。本文将介绍 SSE 和 Websocket 的区别与联系，并给出示例代码。
SSE
SSE（Server-Sent Events）是一种基于 HTTP 协议的服务器推送技术，通过浏览器和服务器之间的持久连接实现实时通信。SSE 的优点是简单易用，只需要使用浏览器内置的 EventSource 对象即可接收服务器端推送的消息。另外，SSE 也支持跨域通信。
下面是一个基本的 SSE 示例代码：
----- ----------- - --- -------------------- --------------------- - ------- -- - ------------------------ --
上面的代码中，我们创建了一个 EventSource 对象，将其连接到服务器端的 /sse 路径。当服务器端有消息推送时，浏览器会触发 onmessage 事件，并将消息内容存储在 event.data 属性中。
Websocket
Websocket 是一种双向通信协议，可以在浏览器和服务器之间建立持久连接，实现实时通信。与 SSE 不同的是，Websocket 是一种独立的协议，需要使用专门的 Websocket 对象进行通信。
下面是一个基本的 Websocket 示例代码：
----- --------- - --- --------------------------------- ------------------- - ------- -- - ------------------------ -- ------------------------
上面的代码中，我们创建了一个 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