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仍有其價值。