前端如何实现即时通讯

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

• 短轮询
• Comet
• SSE
• WebSocket

短轮询

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

优缺点：

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

Comet

有两种实现 Comet 的方式：

0. 使用 Ajax 长轮询（long-polling）
1. 使用 HTTP 长连接（基于 iframe 和 htmlfile 的流）

优缺点：

• 优点：浏览器兼容性好，即时性好，不存在⽆⽤请求
• 缺点：服务器压力较大（维护⻓连接会消耗较多服务器资源）

参考文章：Comet技术详解

SSE

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

优缺点：

• 优点：基于 HTTP，无需太多改造就能使⽤；相比 WebSocket 要简单方便很多

• 缺点：基于⽂本传输，效率没有 WebSocket ⾼；不是严格的双向通信，客户端⽆法复⽤连接来向服务端发送请求，

  而是每次都需重新创建新请求

参考文章：SSE教程

WebSocket socket.io.js

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

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

优缺点：

• 优点：真正意义上的双向实时通信，性能好、延迟低
• 缺点：由于是独⽴于 HTTP 的协议，因此要使用的话需要对项⽬作改造；使⽤复杂度较⾼，通常需要引⼊成熟的库；并且⽆法兼容低版本的浏览器

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