初识SSE

• 小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

昨天有位同事让我帮忙调试下代码，刚好用到了Server-Sent Events(简称SSE)，但是之前根本没有了解过see，所以赶紧抽时间来学习一下。

1.SSE简介

如果要实现服务器向浏览器推送消息，我们可能会立即想到使用WebSocket，除此之外还可以使用SSE。当然WebSocket是双向通信协议，而SSE是基于HTTP协议是单向通信协议，所以SSE只能实现服务器向浏览器单向推送消息。

• SSE 使用 HTTP 协议，现有的服务器软件都支持。WebSocket 是一个独立协议。
• SSE 属于轻量级，使用简单；WebSocket 协议相对复杂。
• SSE 默认支持断线重连，WebSocket 需要自己实现。
• SSE 一般只用来传送文本，二进制数据需要编码后传送，WebSocket 默认支持传送二进制数据。
• SSE 支持自定义发送的消息类型。

2.SSE在客户端的使用

SSE 的客户端 API 部署在EventSource对象上。使用前可以检查浏览器是否支持SSE。如果浏览器支持使用SSE，那么我们就可以使用SSE，向服务器发起连接。

// 生成EventSource实例，第一个参数是接口url，第二个参数是使其支持跨域
let source = new EventSource('http://10.88.125.xxx/test/sse', {withCredentials: true})

// 连接建立之后会发送open事件，可以在回调函数中做一些处理
source.onopen = function (event) {
    ...
}
// 或者也支持另一种写法
source.addEventListrner('open', function(event){
    ...
}, false)

// 客户端接受服务器发送的数据，会触发message事件，同样可以在回调函数中做一些处理
source.onmessage = function (event) {
  var data = event.data;
  // handle message
};
// 另一种写法
source.addEventListener('message', function (event) {
  var data = event.data;
  // handle message
}, false);

// 如果出现通信错误会触发error事件，可以在回调函数中做出相应处理
source.onerror = function (event) {
  // handle error event
};

// 另一种写法
source.addEventListener('error', function (event) {
  // handle error event
}, false);

// 当然也可以客户端和服务器协商自定义事件，触发自定义事件会触发自定义回调，如下触发test自定义事件
source.addEventListener('test', function (event) {
  var data = event.data;
  // handle message
}, false);

好了，了解了SSE之后再碰到适当的场景就可以使用SSE来解决问题了，用起来还是非常方便的。