前端开发之WebSocket通信

上一篇👉: 前端开发之TCP与UDP

WebSocket

WebSocket是一种在单个TCP连接上进行全双工通信（双向同时通信）的协议，它允许服务器和客户端之间自由地交换数据，无需反复建立连接。其特点包括：

• 双向通信：实时性强，支持服务器向客户端推送数据，也支持客户端向服务器发送数据。
• 轻量级数据格式：减少传输开销，提高通信效率。
• 基于TCP：确保数据传输的可靠性。
• 无同源限制：可以跨域通信。
• 协议标识：ws（非加密）或wss（加密）。
• 兼容性：现代浏览器广泛支持，但老版本浏览器可能需要降级方案。

应用场景：在线聊天、实时游戏、协同编辑等对实时性要求高的场景。

客户端（JavaScript）:

var socket = new WebSocket('ws://yourserver.com/socket');
socket.onopen = function() {
  socket.send('Hello Server!');
};
socket.onmessage = function(event) {
  console.log('Received:', event.data);
};
socket.onclose = function() {
  console.log('Connection closed');
};

服务器端（Node.js + ws库）:

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', ws => {
  ws.on('message', message => {
    console.log('Received:', message);
    ws.send('Hello Client!');
  });
});

即时通讯的其他实现方式：

1.短轮询

• 原理：客户端定时向服务器发送请求查询是否有新数据。
• 优点：实现简单。
• 缺点：频繁请求造成资源浪费，实时性差。

应用场景：实时性要求不高的简单应用。

setInterval(function() {
  fetch('/api/data')
    .then(response => response.json())
    .then(data => console.log('Data:', data));
}, 2000); // 每2秒轮询一次

2.长轮询

• 原理：客户端发起请求，服务器无新数据则挂起连接，直到有新数据才响应。
• 优点：相较于短轮询减少请求次数，提升效率。
• 缺点：服务器端资源占用较高，长时间连接可能导致资源泄露。

应用场景：实时性要求较高，但可以接受一定延迟的场景。

简化版代码如下：

function longPoll() {
  fetch('/api/longPoll')
    .then(response => response.json())
    .then(data => {
      if (data.updated) {
        console.log('Update:', data);
      } else {
        setTimeout(longPoll, 5000); // 无更新，5秒后再次轮询
      }
    });
}
longPoll();

3.SSE (Server-Sent Events)

允许服务器向浏览器推送更新，单向通信。

• 原理：基于HTTP的单向通信，服务器通过事件流向浏览器推送数据。
• 优点：简单易用，浏览器支持良好（不包括旧版IE）。
• 缺点：仅支持服务器到客户端的通信，不支持客户端向服务器发送数据。

客户端（JavaScript）：

var es = new EventSource('/api/sse');
es.onmessage = function(event) {
  console.log('Received:', event.data);
};

服务器端（Node.js + Express）:

const express = require('express');
const app = express();

app.get('/api/sse', (req, res) => {
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  setInterval(() => {
    res.write(`data: ${new Date().toISOString()}\n\n`);
  }, 5000);
});

app.listen(3000);

即时通讯的实现：短轮询、长轮询、SSE 和 WebSocket 间的区别？

技术	描述	特点	适用场景
WebSocket	基于TCP的全双工通信协议，实现双向实时数据传输。	实时性强，双向通信，低延迟，高效率。支持二进制数据。	实时交互应用，如在线游戏、即时聊天、协同编辑。
短轮询	定时向服务器发送请求检查数据更新。	实现简单，资源消耗大，实时性较差。	实时性要求不高的场景，需要高度兼容性。
长轮询	客户端请求后，服务器无更新则挂起连接，有更新即响应。	相较短轮询减少请求次数，提高效率，服务器端资源占用较高。	实时性要求较高，可接受短暂延迟的应用。
Server-Sent Events (SSE)	服务器单向推送更新至浏览器。	浏览器原生支持，实现简单，适合服务器推送数据。仅支持文本数据。	实时数据推送，如新闻、股票、实时日志。

性能与兼容性权衡

• 性能排序（高到低）：WebSocket > SSE > 长轮询 > 短轮询
• 兼容性排序（低到高）：WebSocket > SSE > 长轮询 > 短轮询

以上，每种技术都有其适用场景和局限性，开我们需根据实际需求选择最合适的技术方案。WebSocket由于其全双工和低延迟的特性，成为现代实时应用的首选方案，但在考虑兼容性和实现简易性时，短轮询、长轮询和SSE仍有其价值。

下一篇👉: 前端开发之HTTP协议