WebSocket 与长轮询 HTTP

由 Mux 赞助的 DEV 全球展示挑战赛：展示你的项目！

WebSocket 是一种用于客户端和服务器之间双向数据传输的标准协议。WebSocket 协议基于 TCP 协议，而非 HTTP 协议。使用 HTTP 轮询方式会带来极大的弊端，因为它会浪费资源并可能导致连接超时。

我最近开发了一个聊天应用，使用 AJAX 将聊天记录存储到服务器端的数据库中。服务器端还运行着 Socket.io。由于 AJAX 用于向服务器端数据库发送 GET/POST 聊天数据，我原本以为 Socket.io 客户端不会也使用 HTTP AJAX 轮询，但它实际上却使用了 HTTP 轮询而非 AJAX。

以下简要解释一下通过 AJAX 和仅通过 WebSocket 进行 HTTP 长轮询之间的区别。

通过 AJAX 进行长轮询时，服务器会持续轮询 WSGI 服务器以检查是否有新数据。HTTP 协议并非设计用于服务器频繁向客户端发送数据而保持连接打开状态。以下是一种通过 AJAX 请求实现长轮询的旧方法。

通过使用 WebSocket，服务器响应（或数据推送）效率更高。服务器端无需持续向客户端发送空数据包。当服务器服务大量客户端时，其优势更为显著。

如果你仍然需要同时使用 AJAX 和 Socket.io，你可以强制 Socket.io 只使用 WebSocket。以下方法甚至可以移除客户端和服务器之间用于建立 WebSocket 连接的初始 XHR 请求。真是太棒了！

服务器端：

以下代码的第二行可以强制服务器仅使用 WebSocket。

module.exports = function(io) {
io.set('transports', ['websocket']); 
io.on('connection', socket => {
socket.on('join', params => {

客户端：

以下代码的第一行告诉 Socket.io 客户端，即使在同一个客户端代码中使用了 AJAX，也只使用 WebSocket。

const socket = io({ transports: ['websocket'] });
const postMessage = function(message) {
$.post('http://localhost:5000/api', message);
};

这个简单的技巧在大多数现代浏览器上都能正常工作，除了老旧的IE9。建议避免使用任何XHR回退机制，仅使用WebSocket传输。

参考：
https ://www.fullstackpython.com/websockets.html