前言
当今互联网的应用场景越来越广泛，前端技术不断发展和创新。为了满足不同的业务需求，前端工程师需要掌握一些高级的技术。本文将对两种流行的前端技术 SSE 和 Websocket 进行比较，旨在帮助读者选择最适合其业务需求的技术。
SSE
SSE（Server-Sent Events）是 HTML5 遵循 W3C 标准提出的客户端和服务端之间进行实时通信的协议。
优点
SSE 客户端可以接收来自服务器的“流”数据，而不需要进行轮询。由于没有浪费的请求，因此 SSE 对于减轻服务器的压力非常有用。
SSE 使用纯 JavaScript 实现简单，不需要额外的插件或库来处理消息。客户端可以使用 EventSource 接口轻松地与 SSE 服务器通信。
SSE 天生具有自适应性，由于 SSE 是基于 HTTP 响应使用 EventStream 传递消息，因此它利用了 HTTP 的开销和互联网上的结构。
SSE 可以与任何服务器语言和平台一起使用，因为 SSE 是一种规定了消息传递方式的技术，不依赖于具体的服务器语言和平台。
缺点
SSE 是单向通信，只能从服务器推送到客户端。如果应用程序需要双向通信，就需要使用 Websocket。
SSE无法发送二进制数据，只能发送 UTF-8 编码的文本。如果应用程序需要发送二进制数据，就需要使用 Websocket。
SSE 不是所有浏览器都支持。虽然 SSE 是 HTML5 的一部分，但具体的浏览器支持性可能会有差异。
示例代码
let eventSource = new EventSource('/events');
eventSource.onmessage = function(event) {
console.log('Received message: ' + event.data);
};
eventSource.onerror = function(event) {
console.log('Error occurred: ' + event);
};Websocket
Websocket 是 HTML5 的一部分，提供了一种双向通信的机制。
优点
Websocket 支持双向通信。使用 Websocket 可以同时向客户端发送和接收数据。
Websocket 协议可以传输二进制数据，这使得 Websocket 更加灵活和强大。
Websocket 连接长期存在，而不需要仅仅为了接收数据而保持 HTTP 连接打开。
Websocket 的实现支持跨域的通信，可以方便地进行跨域通信。
缺点
Websocket 不支持所有浏览器。特别是老浏览器可能不支持 Websocket 协议。
Websocket 是一种全双工的通信方式。由于 Websocket 长期存在，会占用服务器资源。在高并发场景下，应该考虑使用 SSE。
示例代码
-- -------------------- ---- ------- --- -- - --- ---------------------------------------- --------- - --------------- - ----------------------- --------- ----------------- -- ------------ - --------------- - --------------------- -------- - - ------------ -- ---------- - --------------- - ----------------------- --------- --
总结
SSE 和 Websocket 都是现代应用程序中非常有用的技术。SSE 特别适用于需要从服务器获取流数据的应用程序，而 Websocket 更适用于双向通信。选择 SSE 还是 Websocket 取决于具体的业务需求。即使您不选择 SSE 或 Websocket 中的任何一种，了解它们的优缺点以及如何使用它们可能对您来说是一个有用的技能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6474411c968c7c53b01a4030