一个超级好用，但又有点冷门的信息推送Server Send Event(SSE)
应用场景
在目前项目中，经常有好多交互信息需要事实的更新，在当前项目中有智能硬件，服务器，客户端三者之间的通信。
经常一个http请求的交互到服务端，服务端与硬件进行一次交互，收到通知再告知客户端。一个交互链路的变长，发生错误的概率就会大大的增加，万一某一个环节出了问题，都会导致整个通信全部失败。率先整个简单粗暴的websocket服务再说。后面觉得websocket有点low，物联网那块很多都用mq，领导已决定，那就换成mqtt吧，mqtt的实践可以查看之前发布的文章。后面在uniapp打包成apk后，兼容性太差，不能用了，换成3，4版本都存在问题，后面只能打包成h5.再嵌套android壳。有点不甘心，在广泛阅读文档中发现SSE即（Server Send Event）也是个不错的选择。
Server Send Event（SSE）概念
Server Send Event （SSE）是HTML5的API，用于在服务器和客户端之间实时推送数据流。它与WebSocket不同的是，SSE是一个单工通信，是服务端向客户端定向的推送消息。
Server Send Event协议
SSE协议本质上就是一个Http的get请求，当然也是支持Https，服务端在接到该请求后，返回状态。同时请求头设置也变为流形式。
Content-Type: text/event-stream,
Cache-Control: no-cache,
Connection: keep-alive
兼容性
客户端实现
客户端通过EventSource对象与服务器的一个http get请求建立长连接。
new EventSource（）建立与服务端的连接。
onmessage（）用来监听服务端发来的消息。
onerror（）用来监听连接的错误。
客户端代码如下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>Server Send Event测试</h2>
<ul id="ul">
</ul>
<script>
const source = new EventSource('/sse');
source.onopen = () => {
console.log('连接成功');
}
source.onmessage = (res) => {
console.log('获得的数据是:' + res.data );
var ulDoom = document.getElementById('ul')
var child = document.createElement('li')
child.innerHTML=res.data
ulDoom.append(child)
}
source.onerror = (err) => {
console.log(err);
}
</script>
</body>
</html>
服务端实现
PassThrough将字节转成流形式。
router.get('/sse', async (ctx, next)，创建一个get请求（也就是路由，用来响应）。
Content-Type': 'text/event-stream 这里必须将请求设置成流的形式 ctx.body = stream;将消息以流的形式返回给客户端
const Koa = require('koa');
const Router = require('koa-router');
const { PassThrough } = require('stream')
//路径管理
const path = require('path');
const static = require('koa-static');
const main = static(path.join(__dirname) + '/www/');
const app = new Koa();
const router = new Router();
app.use(main)
// 发送消息
const sendMessage = async (stream) => {
const data = [
'hello,jerry',
'have not see you for a long time',
'how are you',
'what are you doing now ',
'i am missing you',
];
// 循环上面数组: 推送数据、休眠 2 秒
for (const value of data) {
stream.write(`data: ${JSON.stringify(value)}\n\n`); // 写入数据(推送数据)
await new Promise((resolve) => setTimeout(resolve, 2000));
}
// 结束流
// stream.end();
};
// SSE 路由处理
router.get('/sse', async (ctx, next) => {
// 设置响应头
ctx.set({
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive'
});
// 2. 创建流、并作为接口数据进行返回
const stream = new PassThrough();
ctx.body = stream;
ctx.status = 200;
// 3. 推送流数据
sendMessage(stream, ctx);
});
app.use(router.routes()).use(router.allowedMethods());
app.listen(3000, () => {
console.log('Server is running on http://localhost:3000');
});
运行成功截图
