利用H5的EventSource,小试服务器推送(SSE)

H5在最后定稿的时候,出现了一个新的JS API:EventSource(也许是我之前一直没关注吧)。

EventSource有什么用呢?简单来说,就是实现Web端的服务器主动推送功能(SSE,Server-Sent-Events)。

废话少说,先上一段代码:

这段代码运行后,会开始监听服务器推送的事件,例如任意时刻,sse.php输出一句hello world,客户端的console就会立马有输出。

我们来深入了解一下。

窥探EventSource细节:

首先, new EventSource(url) ,客户端会立马向该url发出一个HTTP请求(没错,的确是HTTP请求,整个SSE都是建立在HTTP协议上面的,这是于WebSocket的本质区别),然后观察这个HTTP的Header,它的MIME类型是text/event-stream。

text/event-stream是专门为SSE设计的MIME类型,这个是构造SSE请求的关键。

当服务端收到接到请求后,会hold住这个请求,当需要服务端推送数据的时候,才往这个请求中返回所需要的信息,以 data:'这个是返回的消息内容' 格式的写入,并利用HTTP/1.1中的分块传输的机制,立马刷新缓存中,输出内容并不释放连接,当有下一个内容需要推送的时候,又立马扔到HTTP的返回中。

上面的流程是不是很熟息?和以前的长连接的玩法很像?SSE就是把原来的HTTP长连接的玩法给标准化了。

继续阅读“利用H5的EventSource,小试服务器推送(SSE)”