前端开发之WebSocket通信

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)	服务器单向推送更新至浏览器。	浏览器原生支持，实现简单，适合服务器推送数据。仅支持文本数据。	实时数据推送，如新闻、股票、实时日志。