HTTP 服务器推送也称 HTTP 流，是一种客户端-服务器通讯模式，它将信息从 HTTP 服务器异步推送到客户端，而无需客户端请求。如今的 web 和 app 中，愈来愈多的场景使用这种通讯模式，好比实时的消息提醒，IM在线聊天，多人文档协做等。之前实现这种相似的功能通常都是用ajax长轮询，而如今咱们有了新的、更优雅的选择 —— WebSocket 和 SSE。javascript
WebSocket是HTML5开始提供的一种在单个 TCP 链接上进行全双工通信的协议。在WebSocket API中，浏览器和服务器只须要作一个握手的动做，而后，浏览器和服务器之间就造成了一条快速通道。二者之间就直接能够数据互相传送。浏览器经过 JavaScript 向服务器发出创建 WebSocket 链接的请求，链接创建之后，客户端和服务器端就能够经过 TCP 链接直接交换数据。当你获取 Web Socket 链接后，你能够经过 send() 方法来向服务器发送数据，并经过 onmessage 事件来接收服务器返回的数据。java
SSE 是 Server-Sent Events 的简称， 是一种服务器端到客户端(浏览器)的单项消息推送。对应的浏览器端实现 Event Source 接口被制定为HTML5 的一部分。不过如今IE不支持该技术。相比于 WebSocket，SSE 简单不少，服务器端和客户端工做量都要小不少、简单不少，同时实现的功能也要有局限。node
SSE&WebSocket
SSE与WebSocket有类似功能，都是用来创建浏览器与服务器之间的通讯渠道。二者的区别在于：
WebSocket是全双工通道，能够双向通讯，功能更强；SSE是单向通道，只能服务器向浏览器端发送。
WebSocket是一个新的协议，须要服务器端支持；SSE则是部署在 HTTP协议之上的，现有的服务器软件都支持。
SSE是一个轻量级协议，相对简单；WebSocket是一种较重的协议，相对复杂。
SSE默认支持断线重连，WebSocket则须要额外部署。
SSE支持自定义发送的数据类型。
SSE不支持CORS，参数url就是服务器网址，必须与当前网页的网址在同一个网域(domain)，并且协议和端口都必须相同。WebSocket支持
客户端 EventSource
API
[Constructor(DOMString url, optional EventSourceInit eventSourceInitDict)]
interface EventSource : EventTarget {
readonly attribute DOMString url;
readonly attribute boolean withCredentials;
// ready state
const unsigned short CONNECTING = 0;
const unsigned short OPEN = 1;
const unsigned short CLOSED = 2;
readonly attribute unsigned short readyState;
// networking
attribute EventHandler onopen;
attribute EventHandler onmessage;
attribute EventHandler onerror;
void close();
};
dictionary EventSourceInit {
boolean withCredentials = false;
};
复制代码
基本用法
建立EventSource 实例
var source = new EventSource(url)
复制代码
事件监听
// 创建链接后，触发`open` 事件
source.onopen = (event)=>{
// ...
}
// 收到消息，触发`message` 事件
source.onmessage = (event)=>{
// ...
}
// 发生错误，触发`error` 事件
source.onerror = (event)=>{
// ...
}
// 自定义事件
source.addEventListener('eventName', event => {
// ...
}, false)
复制代码
关闭链接
source.close()
复制代码
服务器端开发
响应头设置
SSE的相应，须要设置以下的Http头信息web
Content-Type: text/event-stream
Cache-Control: no-cache
Connection: keep-alive
复制代码
第一行，Content-Type 指定的 MIME 类型必须为 text/event-streamajax
消息格式
SSE 推送的消息必须是UTF-8编码的纯文本。每次推送有若干个事件消息组成，每一个事件消息之间用两个换行(\n\n)分割。每一个事件消息又有若干行组成，每行格式以键值对形式组成：express
[key]: value\n
复制代码
key 有一下几个值可取浏览器
data: 消息内容
event: 消息事件名称，默认为 message，浏览器能够用 addEventListener()监听该事件。
id: 消息编号。浏览器用lastEventId属性读取这个值。一旦链接断线，浏览器会发送一个 HTTP 头，里面包含一个特殊的Last-Event-ID头信息，将这个值发送回来，用来帮助服务器端重建链接。所以，这个头信息能够被视为一种同步机制
retry: 浏览器从新发起链接的时间间隔。
示例
浏览器端代码bash
// index.js
var source = new EventSource('/stream');
source.onmessage = function(event){
var message = event.data;
// do stuff based on received message
};
复制代码
服务器端代码(nodejs)服务器
var express = require('express')
var fs = require('fs')
var app = express()
app.get('/stream', (req, res) => {
res.writeHead(200, {
"Content-Type": "text/event-stream",
"Cache-Control": "no-cache",
"Connection": "keep-alive"
});
var interval = setInterval(function (){
res.write("data: " + (new Date()) + "\n\n");
}, 1000);
req.connection.addListener("close", function (){
clearInterval(interval);
}, false);
})
app.listen(9999, (err) => {
if (err) {
console.log(err)
return
}
console.log('listening on port 9999')
})
复制代码
关注咱们
