详解如何实现在线聊天系统中的实时消息获取

序言

传统web浏览器应用采用客户端主动请求方式，只有在收到浏览器请求时服务端才返回消息，这种模式已经不能满足日益多样化的web应用需求，例如：

在线聊天系统：需要实时获取聊天消息。

实时监控系统：需要实时获取监控对象状态。如仪表读数、告警信息等。

随着html技术演进，发展出了多种服务器推送技术，用于服务器向浏览器客户端推送消息。

 

Ajax轮询

采用Ajax定时向服务端发送请求检查有无消息更新。网页定时向服务器发送请求，若服务器有消息推送，则返回消息，否则返回空消息，如下图所示：

这种轮询方式需要发送大量无效请求，大大消耗了服务器资源，且推送消息的实时性较低。

 

Ajax长轮询

Ajax长轮询对前面的Ajax轮询方式做了改进，服务端收到请求后，不再立即返回，而是等待有消息推送时返回。网页收到服务端返回的消息后，立即发起一个新的请求，等待下一个推送消息。

采用这种方式的服务端实现比前者复杂，需要维护一个客户端建立的连接列表，当产生对某个客户端的推送消息后找到对应的连接并发送。优势是减少了轮询消耗，发送事件的实时性得到增强。

 

Server-Send Event

Server-Send Event是html5标准新增的技术，它延用了Ajax长轮询的思路，并对其进行了一些规范。Server-Send Event让服务端可以向客户端流式发送文本消息，并在发送完一个消息后保持请求不结束，连接始终保持。如下图所示：

 

网页调用EventSource接口向服务器发送请求：

var source = new EventSource('http://localhost:8080');    

source.addEventListener('message', function(e) { console.log(e.data); }, false);

 

服务器返回的Content-Type头必须为text/event-stream，且返回完一个消息后不关闭请求，后续消息仍然使用同一个请求返回。浏览器会自动以换行符识别每个消息。

 

响应头

Content-Type