前端实现即时通讯的方法整理

• 前言
• 一、前端如何实现即时通讯？
• 二、短轮询
• 三、长轮询
• 四、SSE
• 五、 WebSocket
• 总结

今天一起来看一下前端领域常用的即时通讯技术都有哪些，分别聊一聊它们的优缺点~

严格意义上: HTTP协议只能做到客户端请求服务器, 服务器做出响应, 做不到让服务器主动给客户端推送消息!

那么如果服务器数据更新了, 想要即时通知到客户端怎么办呢 ? (即时通信需求)

即时通信需求: 服务器数据一有更新, 希望推送给到浏览器

基于Web的前端，存在以下几种可实现即时通讯的方式：

• 短轮询 (历史方案)

  开个定时器, 每隔一段时间发请求 (实时性不强)

• Comet - ajax长轮询(历史方案)

  发送一个请求, 服务器只要数据不更新, 就一直阻塞 (服务器压力过大)

• SSE

  (利用了http协议, 流数据的传输, 并不是严格意义的双向通信, 无法复用连接)

• WebSocket (主流)

  性能和效率都高!

短轮询就是客户端定时发送请求，获取服务器上的最新数据。不是真正的即时通讯，但一定程度上可以模拟即时通讯的效果。

优缺点：

• 优点：浏览器兼容性好，实现简单 setInterval
• 缺点：实时性不高，资源消耗高，存在较多无用请求，影响性能

短轮询的实时性, 着实太差, 所以 Comet 技术方案应运而生, 用以实现即时通讯

使用 Ajax 长轮询（long-polling）

• 浏览器发出XMLHttpRequest 请求，服务器端接收到请求后，会阻塞请求直到有数据或者超时才返回

• 浏览器JS在处理返回信息(有数据或者超时) 后再次发出请求。服务器收到请求后, 会再次阻塞到有数据或者超时

优缺点：

• 优点：浏览器兼容性好，即时性好，不存在⽆⽤请求

• 缺点：服务器压力较大（维护⻓连接会消耗较多服务器资源）

服务端推送事件（Server-Sent Event），它是⼀种基于HTTP协议, 允许服务端向客户端推送新数据的 HTML5 技术。

问题: HTTP协议 不是 无法做到服务器主动向客户端推送消息么?

这些 SSE 采用了一些小技巧! 详细见 参考文章：SSE教程

优缺点：

• 优点：基于 HTTP，无需太多改造就能使⽤；相比 WebSocket 要简单一些
• 缺点：基于⽂本传输，效率没有 WebSocket ⾼；基于HTTP协议, 不是严格的双向通信

这是基于 TCP 协议的全新、独⽴的协议，作⽤是在服务器和客户端之间建⽴实时的双向通信。

WebSocket 协议与 HTTP 协议保持兼容，但它不会融⼊ HTTP 协议，仅作为 HTML 5 的⼀部分。

优缺点：

• 优点：真正意义上的双向实时通信，性能好、延迟低

• 缺点：由于是独⽴于 HTTP 的协议，因此要使用的话需要对项⽬作改造；

  使⽤复杂度会⾼一些，通常需要引⼊成熟的库 (如: Socket-io )；并且⽆法兼容低版本的浏览器

HTTP 和 WebSocket 的连接通信比较图：

Good wine needs no bush.