什么是 SSE
SSE即服务器发送事件(Server-Sent Events),是一种基于HTTP协议的服务器端推送技术,用于实时向客户端推送数据。相较于Websocket,SSE具有更轻量、更易实现、更符合RESTful架构等特点,缺点是单向通信,不适用于需要客户端请求服务端数据的场景。
SSE 协议的特点
- SSE 只能用于单向通信,对于需要双向通信的场景应该使用 Websocket。
- SSE 基于HTTP协议,使用 HTTP 的长连接机制,因此较容易实现。
- SSE 推送数据是文本格式,支持 Event 字段,可以按事件类型进行分类。
- SSE 相较于 Websocket 更符合 RESTful 架构,可以与现有的 RESTful API 很好地集成。
SSE 协议的使用方法
服务端
服务端需要提供 SSE 服务,提供以下 HTTP 接口:
- 建立连接接口(GET方法)。客户端通过该接口向服务端建立 SSE 连接。
- 推送数据接口(POST方法)。服务端向客户端推送数据时,使用该接口向客户端发送数据。
// javascriptcn.com 代码示例 // 建立 SSE 连接接口 app.get('/api/sse', (req, res) => { // 设置响应头为SSE协议 res.set({ 'Content-Type': 'text/event-stream', 'Cache-Control': 'no-cache', 'Connection': 'keep-alive', }); // 发送数据,使用 send 会自动添加 \n 分隔符。 res.write(`event: welcome\n`); res.write(`data: ${JSON.stringify({ message: 'Welcome to SSE.' })}\n\n`); }); // 推送数据接口 app.post('/api/sse/push', (req, res) => { // 发送数据,使用 send 会自动添加 \n 分隔符。 res.write(`event: message\n`); res.write(`data: ${JSON.stringify({ message: 'Hello, SSE!' })}\n\n`); });
客户端
客户端需要使用 JavaScript 创建 EventSource 对象,建立 SSE 连接,监听服务端的推送数据。
const eventSource = new EventSource('/api/sse'); eventSource.addEventListener('welcome', (event) => { console.log(event.data); }); eventSource.addEventListener('message', (event) => { console.log(event.data); });
SSE 协议的案例
以下是一个 SSE 协议的案例。
服务端
// javascriptcn.com 代码示例 const express = require('express'); const app = express(); app.get('/api/sse', (req, res) => { // 设置响应头为SSE协议 res.set({ 'Content-Type': 'text/event-stream', 'Cache-Control': 'no-cache', 'Connection': 'keep-alive', }); // 定时向客户端发送数据 let count = 0; const timer = setInterval(() => { res.write(`event: message\n`); res.write(`data: ${JSON.stringify({ message: `Hello, SSE! count: ${count++}` })}\n\n`); }, 1000); // 客户端连接关闭时,清除定时器 req.on('close', () => { clearInterval(timer); res.end(); }); }); app.listen(3000, () => { console.log('SSE server started on http://localhost:3000'); });
客户端
// javascriptcn.com 代码示例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>SSE Example</title> </head> <body> <h1>SSE Example</h1> <ul></ul> <script> const eventSource = new EventSource('/api/sse'); eventSource.addEventListener('message', (event) => { const message = JSON.parse(event.data); const li = document.createElement('li'); li.textContent = message.message; document.querySelector('ul').appendChild(li); }); </script> </body> </html>
总结
SSE 协议是基于 HTTP 协议的服务器端推送技术,能够实现实时向客户端推送数据。相较于 Websocket,SSE 更轻量、易于实现、符合 RESTful 架构等特点。但是,SSE 是单向通信的,不适用于需要客户端请求服务端数据的场景。
来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/653640397d4982a6ebe3943f