WebSocket 概述
WebSocket 是一種在單一 TCP 連線上提供全雙工通訊的協定 (RFC 6455, 2011)，實現瀏覽器與伺服器之間的雙向即時通訊。與傳統 HTTP 請求-回應模式不同，WebSocket 允許伺服器主動推送訊息。
WebSocket vs HTTP
| 特性 | HTTP | WebSocket |
|---|
| 通訊模式 | 請求-回應 | 雙向 |
| 連線建立 | 每次請求新建 | 一次建立持續使用 |
| 伺服器推送 | 不支援 | 支援 |
| 資源消耗 | 較高 | 較低 |
| 適用場景 | REST API | 即時應用 |
客戶端 API
const ws = new WebSocket('wss://api.example.com/ws');
ws.onopen = () => {
console.log('連線已建立');
ws.send(JSON.stringify({ type: 'chat', content: 'Hello' }));
};
ws.onmessage = (event) => {
const data = JSON.parse(event.data);
console.log('收到:', data);
};
ws.onerror = (error) => console.error('錯誤:', error);
ws.onclose = () => console.log('連線已關閉');
心跳與重連機制
class HeartbeatWS {
constructor(url) {
this.url = url;
this.connect();
}
connect() {
this.ws = new WebSocket(this.url);
this.ws.onopen = () => this.startHeartbeat();
this.ws.onclose = () => setTimeout(() => this.connect(), 3000);
}
startHeartbeat() {
setInterval(() => {
if (this.ws.readyState === WebSocket.OPEN)
this.ws.send('ping');
}, 30000);
}
}