在线咨询实现方案 ​

短轮询 ​

通过定时器，每隔一段时间发起请求。

优点

• 兼容性高，实现简单。

缺点

• 延迟性高，请求中有大半是无用，非常消耗带宽和服务器资源，影响性能。

应用场景

• 二维码扫码确认，信息通知

comet(长轮询、长连接) ​

长轮循 ​

客户端向服务器发送 Ajax 请求，服务器接到请求后 hold 住连接，直到有新消息才返回响应信息并关闭连接，客户端处理完响应信息后再向服务器发送新的请求。

优点

• 兼容性好，在无消息的情况下不会频繁的请求，资源浪费较小。

缺点

• 服务器 hold 连接会消耗资源，返回数据顺序无保证，难于管理维护

应用场景

• webQQ、开心网、校内，Hi 网页版、Facebook IM 等等

长连接 ​

在页面里嵌入一个隐蔵 iframe，将这个隐蔵 iframe 的 src 属性设为对一个长连接的请求或是采用 xhr 请求，服务器端就能源源不断地往客户端输入数据。 此方法已经过时，毕竟现在都已经放弃 iframe。

优点

• 兼容性好，消息即时到达，不发无用请求

缺点

• 服务器维护长连接消耗资源

应用场景

• Gmail 聊天

SSE （Server-Sent Events） ​

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

优点

• 基于 HTTP 而生，因此不需要太多改造就能使用，使用方便，而 websocket 非常复杂，必须借助成熟的库或框架

缺点

• 基于文本传输效率没有 websocket 高，不是严格的双向通信，客户端向服务端发送请求无法复用之前的连接，需要重新发出独立的请求，并且不兼容 IE

Websocket ​

Websocket 是一个全新的、独立的协议，基于 TCP 协议，与 http 协议兼容、却不会融入 http 协议，仅仅作为 html5 的一部分，其作用就是在服务器和客户端之间建立实时的双向通信。

优点

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

缺点

• 独立与 http 的协议，因此需要额外的项目改造，使用复杂度高，必须引入成熟的库，无法兼容低版本浏览器

实现方式

浏览器为 HTTP 通信提供了 XMLHttpRequest 对象，同样的，也为 WebSocket 通信提供了一个通信操作接口：WebSocket。

var ws = new WebSocket("wss://echo.websocket.org");

// 当连接建立成功，触发 open 事件
ws.onopen = function (evt) {
  console.log("建立连接成功 ...");

  // 连接建立成功以后，就可以使用这个连接对象通信了
  // send 方法发送数据
  ws.send("Hello WebSockets!");
};

// 当接收到对方发送的消息的时候，触发 message 事件
// 我们可以通过回调函数的 evt.data 获取对方发送的数据内容
ws.onmessage = function (evt) {
  console.log("接收到消息: " + evt.data);

  // 当不需要通信的时候，可以手动的关闭连接
  // ws.close();
};

// 当连接断开的时候触发 close 事件
ws.onclose = function (evt) {
  console.log("连接已关闭.");
};