推送技术是现代网页架构中越来越重要的一部分。在这篇文章中，我们将介绍基于 Server-sent Events 实现网页推送技术的原理、实现细节以及示例代码。本文适合对前端开发具有一定了解的读者。
什么是 Server-sent Events（SSE）
Server-sent Events(以下简称SSE) 是一种Web API，用于在客户端和服务器之间建立单向通信。它是基于 HTTP 协议的一种技术，属于 HTML5 规范的一部分。SSE 主要用于服务器向客户端推送数据。
与 WebSocket 技术不同，SSE 仅支持服务器到客户端的单向通信，不支持客户端向服务器发起请求。虽然 SSE 功能上不如 WebSocket 强大，但其优点是简单易用，可用于更广泛的应用场景。
SSE 的基本原理
使用 SSE 技术时，客户端通过创建 EventSource 对象与服务器建立连接。连接建立后，服务器端可以定期推送消息到客户端。
下面是 SSE 连接的建立流程：
1.服务器通过 HTTP 响应头指定 Content-Type 为 text/event-stream，以表示返回的是 SSE 数据流。
HTTP/1.1 200 OK Content-Type: text/event-stream
- 在 HTTP 响应头中，服务器必须添加一个
Cache-Control字段，并将其设置为no-cache。这样可以确保浏览器不会对返回的数据流进行缓存。此外，也可以在响应头中添加其他自定义字段，以告诉浏览器客户端的最大缓存时间或其他信息。
Cache-Control: no-cache
- 接下来，服务器向客户端发送数据流。每个 SSE 事件数据都由字符串格式组成，并且以
event:，data:以及一个空行作为分隔符。例如：
event: new_message data: {"sender":"user1","message":"hello world!"}
在这个示例中，事件名称是 new_message， 数据是一个 JSON 对象，其中包含了发送者和消息内容。
- 客户端通过 JavaScript 创建
EventSource对象，并指定服务器 URL。例如：
var source = new EventSource('/events');
在这个示例中，客户端会通过向 /events 这个 URL 发送一个 HTTP 请求，以与服务器建立 SSE 连接。
- 连接建立后，服务器会发送事件数据流到客户端。客户端需要监听
source对象的message事件，在事件处理程序中处理接收到的数据流。
source.addEventListener('new_message', function(event) { var data = JSON.parse(event.data); console.log(data.sender + ' says ' + data.message); });
在这个示例中，客户端会监听 new_message 事件，并在事件处理程序中解析事件数据。当新消息到达时，客户端会将消息内容打印到控制台。
SSE 的实现细节
下面是关于 SSE 技术的一些实现细节:
SSE 连接不会关闭，直到客户端或服务器关闭连接或发生错误。这在一些实时应用中非常有用。
SSE 连接与 AJAX 请求不同，其响应数据流可以通过多个
data:字段组成。这意味着服务器可以向客户端发送任意多的数据。这种灵活性对实时应用非常有用。SSE 连接支持自定义事件类型。这意味着服务器可以通过发送不同的事件类型来告诉客户端发生了什么事件。例如，服务器可以发送一个
error事件，以告诉客户端发生了错误。SSE 可以实现无限滚动效果。
示例代码
下面是一个使用 SSE 实现的聊天室示例代码。本示例使用 Node.js 和 Express 框架搭建服务器端，使用 jQuery 和 Bootstrap 框架构建客户端。
服务器端代码
-- -------------------- ---- ------- ----- ------- - ------------------- ----- --- - ---------- --------- ----- ---- - ----- ---- --- -- ------------ ----- ---- -- - ---------------------- - --------------- --- ---- --- -- ------------------ ----- ---- -- - ------- ------------------ - --------------- -------------------- ---------------- ----------- ------------- ------------ --- ------ -------------- -- - ----- ---- - - ------- -------- -------- ------ ---- -------- -- ----------------- ---------------- ---------------- - - -------------------- - -------- -- ------ --- ------- ---------------- -- -- - ------------------- --------- -- ---- ---------- ---展开代码
客户端代码
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ----------- ------------ ---- -- ------ - --------- -- --- ------- ----------------------------------------------------------- ----- ---------------- ------------------------------------------------------------------------------- ----------------------------------------------------------------------------------- ------------------------ ------- ------ ---- ------------------ -------- --------- ---- ---- ------------ ---- ----------------- ---- --------- --- --- ------------------- --- ---------------------- ------------ -------- --- --------------------------------------- ----- ------ ---- ----------------- ---- ------- --- ------ ---- ------------------- ------ ------------------------------ ------ ----------- -------------------- ------------ ------------------ --------- ------ ------- ------------- ---------- -------------------------- ------- ------ ------ ------ ---- -- --------- ---------- --- ------- ---------------------------------------------------------------- ------- ----------------------------------------------------------------------------------- ---------------------------------------------------------------------------------- --------------------------------- ------- ---------------------------------------------------------------------------- ----------------------------------------------------------------------------------- --------------------------------- -------- ---------------------------- - ---- --- -- --- ------ - --- ----------------------- ---------- -------------------------------------- --------------- - --- ---- - ----------------------- ------------ ------------------------------------------- ------------------------- - ----------- - -- - - ------------ - --------- --- ---------- -------------------------------- - ----------------------- -------- --- ------- - -------------------- ------------ ------------------------------------------- ------------------------- - ---- - - ------- - --------- ------ ---------------------- --- --- --------- ------- -------展开代码
运行代码后，访问 http://localhost:3000 即可在浏览器中打开聊天窗口。每当服务器发送一条消息时，聊天窗口将自动显示。同时你也可以在表单中输入消息并发送。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c3b37a314edc2684dc8b1f
