在 Web 应用程序中,常常需要实现实时通信功能,例如聊天室、股票行情等。而在传统的 Web 技术中,客户端要获取服务器端的数据必须通过定时轮询或 Websocket 连接方式实现,这种方式不仅增加了服务器端和客户端的网络通信负担,而且对服务器和客户端的处理性能也有极高要求,而 SSE(Server-Sent Events)技术恰好可以解决这个问题,SSE 可以直接实现服务器向客户端推送数据的功能,无须客户端发起请求,提供了一种简单高效的实时交互解决方案。
SSE 简介
SSE 是一种建立在 HTTP 协议基础上的服务器向客户端单向发送事件流的 Web 技术。SSE 通常被用来推送实时数据到客户端,例如 Web 应用程序中的通知,或者股票行情等实时数据。SSE 基于服务器端的 EventSource 接口实现,客户端可以通过 JavaScript 的 EventSource API 接收服务器端推送来的数据。
客户端与服务器端之间的通信是基于 HTTP 协议的,通过 HTTP HEAD 请求,建立持久连接。一旦连接建立,服务器端就可以开始不间断地发送事件流,直到连接被关闭。SSE 的数据传输方式是文本格式,因此它比 WebSocket 更容易理解和实现,并且在大多数现代浏览器中都得到了很好的兼容性支持。
SSE 实现
SSE 的实现可以分为客户端和服务器端两个部分。
客户端实现
在客户端内部,SSE 通过 JavaScript 的 EventSource 对象实现。客户端可以通过创建 EventSource 对象来建立 SSE 连接,并通过监听 message 事件来接收来自服务器端的推送数据。
下面是一个简单的示例代码,演示了如何使用 EventSource 对象来建立 SSE 连接:
// 通过 EventSource 对象建立 SSE 连接 const eventSource = new EventSource('/sse'); // 监听服务器推送的数据 eventSource.addEventListener('message', event => { console.log(event.data); });
在上面的代码中,我们创建了一个 EventSource 对象,并通过指定服务器 SSE 终端的 URL(此处为 '/sse')来建立持久连接。建立连接后,我们可以通过事件监听机制去接收来自服务器的推送数据,并在控制台中打印输出。
服务器端实现
在服务器端实现 SSE 的过程中,我们需要提供一个路由接口用于客户端建立连接,同时编写代码来向客户端不断发送事件流数据。
在 Node.js 环境中,我们可以使用 http.createServer()
创建 HTTP 服务器实例,并监听客户端的请求。当客户端请求 SSE 终端时,我们需要在响应头中添加 'Content-Type': 'text/event-stream'
和 'Cache-Control': 'no-cache'
两个字段,通知浏览器建立 SSE 连接。
然后我们可以将事件流数据通过 response.write()
方法不断写入响应体中,分别使用 data:
、 event:
和 id:
三个字段表示数据、事件和数据序列的 ID。
以下是一个简单的 Node.js 示例:
-- -------------------- ---- ------- ----- ---- - ---------------- ----------------------- ---- -- - -- -------- --- ------- - -- ------------- --- -- ------------------ - --------------- -------------------- ---------------- ----------- --- -- ------- --- ----- - -- -------------- -- - -------- ----------------- ---------- ---------------- ------------------ ----- ---------- -- ------ - ---- - ------------------ - --------------- ------------ --- -------------- --------- - ----------------
在上面的代码中,我们首先判断客户端请求的 URL 是否为 '/sse',若是则设置响应头获知客户端 SSE 连接已建立。然后我们使用 setInterval()
不断向客户端发送带有事件和数据的响应数据。
总结
SSE 是一种服务器向客户端推送实时数据的高效方案,相较于轮询和 Websocket 连接,它更加轻量级和易于实现。令人惊叹的是,这种 Web 技术居然可以通过 HTTP 协议来实现。
利用 EventSource 对象和 SSE 协议,我们可以实现 Web 应用程序中实时化的功能,例如聊天室、股票行情等,其实现方式也相对简单。
现在,你可以尝试上述示例代码,建立简单的 SSE 连接并向客户端推送实时数据,同时,也可以通过 SSE 实现更多新奇的 Web 应用程序。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/64b3acfd48841e9894fed9bf