hello~亲爱的看官老爷们大家好~过完年第一周已经结束，是时候开始制定新的工作计划了。主要负责的项目是数据可视化平台，而使用中如果服务器能有推送能力让页端得到相关通知的话，就能实现很多功能上的优化。鉴于项目中 Node 端已经正式投入使用，前端拥有了自己的服务器，搞事情起来自然方便很多。
技术选型：SSE（Server-sent Events） or WebSocket
若干年前，服务器并没有主动推送的能力，主要是通过轮询的方式来达到近似于服务器推送的能力。现在不需要这么麻烦，轮询只作为向下兼容的方案即可，当前主流的服务器推送是使用 SSE 或者 WebSocket 来实现的。两者对比如下：
| 是否基于新协议 | 是否双向通信 | 是否支持跨域 | 接入成本 | |
|---|---|---|---|---|
| SSE | 否（Http） |
否（服务器单向） | 否（Firefox 支持跨域） | 低 |
| WebSocket | 是（ws） |
是 | 是 | 高 |
需要稍微解释一下的是接入成本。SSE 是相对轻量级的协议，（Node）代码实现上比较简单，而 WebSocket 是比较复杂的协议，虽然也有类库可以套用，也许页端方面两者代码量差不多，但服务器方面实现就复杂不少了。同时，要实现 WebSocket，是需要另起一个服务，而 SSE 并不需要。
比较之后，对 SSE 与 WebSocket 有了大致的理解。项目对服务器推送的要求是发送通知，而未来可能需要接入实时同步的功能，结合项目实际情况与接入成本后，选择了 SSE。
最后看一下浏览器支持情况以作参考：
IE 就 let it go吧，日常不支持~其他浏览器还是绿油油的，支持度还是挺高的。
示例
Node端
项目中使用 Egg 作为框架，底层是 Koa2 的，因而使用 Koa2 作为示例。Node 端关键代码如下：
app.use(async (ctx) => {
const { res, request: { url } } = ctx;
res.writeHead(200, {
'Content-Type': 'text/event-stream', // 服务器声明接下来发送的是事件流
});
let stream = new PassThrough();
let i = 0;
let timer = setInterval(() => {
if (i === 5) {
stream.write('event: pause\n'); // 事件类型
} else {
stream.write('event: test\n'); // 事件类型
}
stream.write(`id: ${+new Date()}\n`); // 消息ID
stream.write(`data: ${i}\n`); // 消息数据
stream.write('retry: 10000\n'); // 重连时间
stream.write('\n\n'); // 消息结束
i++;
}, 1000);
stream.on('close', function() {
console.log('closed.')
clearInterval(timer);
})
ctx.body = stream;
});
服务器告诉客户端，返回的类型是事件流（text/event-stream），查阅 MDN 文档可知：事件流仅仅是一个简单的文本数据流，文本应该使用 UTF- 8 格式的编码。每条消息后面都由一个空行作为分隔符。以冒号开头的行为注释行，会被忽略。
之后就是消息主体了，尽管例子使用 setInterval 模拟不断发送推送，但换成任意条件触发推送也是可以的。stream.write 调用了5次，对应规范中的各个字段，理解如下：
event为消息的事件类型。客户端在EventSource中可以通过addEventListener收听相关的消息。该字段可省略，省略后客户端触发message事件。id为事件 ID。作为客户端内部的“最后一个事件 ID”的属性值，用于重连，不可省略。data为消息的数据字段，简单说就是客户端监听时间后，通过e.data拿到的数据。retry为重连时间，可省略该参数。- 最后是结束该次通知的
\n\n，不可省略。除了上面规定的字段名，其他所有的字段名都会被忽略。
更详细的解释可以查阅 MDN 文档。有一个小细节需要注意，在 SSE 的草案中提到，”text/event-stream” 的 MIME 类型传输应当在静置 15 秒后自动断开。但实测（仅用了 Chrome）后发现，即使静置时间超过 15 秒，浏览器与客户端均不会断开连接。查阅了不少文章，均建议维护一套发送 \n\n 的心跳机制。个人认为此举有助于提高客户端程序的健壮性，但不是必须的。
最后是监听事件流的 close 事件，用于结束此次的链接。测试后发现，无论是让客户端调用 close 方法（下文有例子~），还是异常结束，包括关闭窗口、关闭程序等，都能触发服务器的 close 事件。
客户端
客户端代码更简单，示例如下：
const source = new EventSource('http://localhost:3000/test');
source.addEventListener('open', () => {
console.log('Connected');
}, false);
source.addEventListener('message', e => {
console.log(e.data);
}, false);
source.addEventListener('pause', e => {
source.close();
}, false);
前端童鞋对于这样的代码应该挺熟悉的，一切都是事件触发，根据不同的事件执行对应的代码。稍微说明一下 EventSource 拥有的属性和方法，相信大家就可以愉快地使用了。
EventSource 有三个默认的事件，分别是：
open：在连接打开时被调用。message：收到一个没有 event 属性的消息时被调用。error：当发生错误时被调用。
两个只读属性：
readyState：代表连接状态。可能值是CONNECTING (0), OPEN (1), 或者 CLOSED (2)。url：代表连接的 URL。
一个方法：
close：调用后关闭连接（也就是上文所提及的）。
更详细的解释可以查阅 MDN 文档
小结
关于服务器 SSE 的简单介绍就到此为止了，可以看到，SSE 开发起来还是比较简单的，接入成本非常低。但并不是说 WebSocket 就是不好的，抛开实际场景谈业务就是耍流氓。此外上述代码只是演示，还能进一步进行优化的。如为了减轻服务器开销，可以建立一套机制有目的地断开与重连等，大家可以自行实现。
相关的代码已经丢到 Github 上，欢迎查阅。
感谢各位看官大人看到这里，知易行难，希望本文对你有所帮助~谢谢！