基于ServerSentEvent的简单在线聊天室.pdfVIP

Web 即时通信 所谓Web 即时通信，就是说我们可以通过一种机制在网页上立即通知用户一件事 情的发生，是不需要用户刷新网页的。Web 即时通信的用途有很多，比如实时聊 天，即时推送等。如当我们在登陆浏览 知乎时如果有人回答了我们的问题，知 乎就会即时提醒我们，再比如现在电子商务的在线客服功能。这些能大大提高用 户体验的功能都是基于Web 即时通信实现的。  普通HTTP 流程 1. 客户端从服务器端请求网页 2. 服务器作出相应的反应 3. 服务器返回相应到客户端 而由于HTTP 请求是无状态的，也就是说每次请求完成后，HTTP 链接就断开了， 服务器和浏览器互相之间是完全不可知的，只有下一次再发起一次请求 才能更 新相应的信息。谈到这里我们就不难想到，我们可以简单的让浏览器每隔一个周 期就发起一次请求，这样就能在一定程度上模拟实时效果了，这也就是轮训，术 语叫做Polling。  Polling 流程 1. 客户端使用普通的http 方式向服务器端请求网页 2. 客户端执行网页中的JavaScript 轮询脚本，定期循环的向服务器 发送请求（例如每5 秒发送一次请求），获取信息 3. 服务器对每次请求作出响应，并返回相应信息，就像正常的http 请求一样 通过轮训的方式我们就可以相对即时的获取信息。但是由于轮训的原理是使浏览 器频繁的向服务器发起请求，这在一定程度上会造成性能效率问题。为了优化 这 些性能问题，人们又想到了一种方法。那就是在服务器接收到请求的时候不理解 返回，而是只有当有数据变化（或者超时）的时候才返回。这样一来，我们就可 以 利用一次请求最大可能的保持连接的有效性，大大的减少了Polling 中的请 求次数。这个方法叫做长轮训，也叫做Long-Polling。  Long-Polling 流程 1. 客户端使用普通的http 方式向服务器端请求网页 2. 客户端执行网页中的JavaScript 脚本，向服务器发送数据、请求 信息 3. 服务器并不是立即就对客户端的请求作出响应，而是等待有效的更 新 4. 当信息是有效的更新时，服务器才会把数据推送给客户端 5. 当客户端接收到服务器的通知时，立即会发送一个新的请求，进入 到下一次的轮询 以上方法是实现Web 实时通信的常用方法。当然在HTML5 出来之后，我们就有更 好的选择啦。在HTML5 中，我们可以使用SSE 或者是WebSocket。SSE 的全称是 Server Send Event，听名字就很好理解啦。也就是由服务器来推送数据。看到 这里是不是兴奋呢？其实很多情况下，我们只需要这种简单的功能：由服务器推 送数据到浏览器。比如推送比赛信息、股价的变化等等。  Server Send Event 流程 1. 客户端使用普通的http 方式向服务器端请求网页 2. 客户端执行网页中的JavaScript 脚本，与服务器之间建立了一个 连接 3. 当服务器端有更新时，会发送一个事件到客户端 如果SSE 还不能满足我们的需求的话，我们完全就可以使用WebSocket 啦。当使 用WebSocket 时，浏览器和服务器之间就建立了一个全双工通道，互相都可以发 送消息，完全的做到了及时，就像使用tcp socket 一样。  SSE 和WebSocket 的简单对比： o WebSocket 是全双工通道，可以双向通信，功能更强；SSE 是单向 通道，只能服务器向浏览器端发送。 o WebSocket 是一个新的协议，需要服务器端支持；SSE 则是部署在 HTTP 协议之上的，现有服务器软件都支持。 o SSE 是一个轻量级协议，相对简单；WebSocket 是一种较重的协议， 相对复杂。 到这里我们就基本了解了一些事先Web 实时通信的机制，下一节中，我们将使用 SSE 实现一个简单的在线聊天室。