前言
很多人有疑問，安全可靠的http短連線不使用，為什麼需要WebSocket呢？ WebSocket是一種在單個 TCP 連線上進行全雙工通訊的協議。它提供了連續的雙向數據流，可以實時地在客戶端和伺服器間傳送資料。本篇文章將詳細講解 WebSocket 的使用注意事項以及適用場景，並透過程式碼案例展示如何在 Web 服務中對接 WebSocket 和 HTTP。
注意事項
首先需要知道是WebSocket也有弊端，下面簡單介紹WebSocket的注意事項
相容性：儘管 WebSocket 在現代瀏覽器中得到了廣泛支援，但在舊版瀏覽器（如 IE8 及以下版本）中可能無法工作。因此，在使用 WebSocket 時，請確保你的目標使用者使用的瀏覽器支援 WebSocket 協議。如有必要，可使用 polyfill 或長輪詢等技術作為相容方案。
安全性：WebSocket 通訊可能容易受到攻擊，例如跨站指令碼攻擊（XSS）和跨站請求偽造攻擊（CSRF）。為避免這些安全隱患，務必對 WebSocket 通訊進行加密（如使用
wss://協議），並驗證客戶端身份。資源消耗：由於 WebSocket 需要伺服器始終保持與客戶端的連線，這可能導致伺服器負載加重及資源消耗增加。在選擇使用 WebSocket 時，請充分評估伺服器效能，確保其能夠應對大量客戶端連線。
錯誤處理：與 HTTP 請求不同，WebSocket 連線在建立後保持長連線，因此錯誤處理方式也有所不同。要確保正確處理連線關閉、訊息錯誤等情況，同時對異常情況進行監控和報警。
擴充套件性：當專案需要擴充套件時，考慮 WebSocket 如何適應新的需求和變化。例如，當需要支援更多客戶端型別時，如何保證 WebSocket 服務的穩定性和可擴充套件性。
適用場景與程式碼案例
接下來重點介紹WebSocket兩種重要使用場景：實時通訊和資料推送
實時通訊
WebSocket 非常適合實時通訊場景，如線上聊天。下面的程式碼示例展示瞭如何使用 Node.js 和 WebSocket 庫搭建一個簡單的線上聊天室。
伺服器端程式碼：
const express = require('express');
const WebSocket = require('ws');
const app = express();
const server = new WebSocket.Server({ noServer: true });
app.use(express.static('public'));
server.on('connection', (socket) => {
console.log('User connected');
socket.on('message', (message) => {
server.clients.forEach((client) => {
if (client.readyState === WebSocket.OPEN) {
client.send(message);
}
});
});
socket.on('close', () => {
console.log('User disconnected');
});
});
const port = process.env.PORT || 3000;
const serverInstance = app.listen(port, () => {
console.log(`Listening on port ${port}`);
});
客戶端程式碼（HTML + JavaScript）：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>WebSocket Chat</title>
</head>
<body>
<div id="chat"></div>
<form id="message-form">
<input type="text" id="message-input" placeholder="Type a message">
<button type="submit">Send</button>
</form>
<script>
const chat = document.getElementById('chat');
const messageForm = document.getElementById('message-form');
const messageInput = document.getElementById('message-input');
const socket = new WebSocket('ws://localhost:3000');
socket.addEventListener('message', (event) => {
const message = document.createElement('div');
message.textContent = event.data;
chat.appendChild(message);
});
messageForm.addEventListener('submit', (event) => {
event.preventDefault();
const message = messageInput.value;
socket.send(message);
messageInput.value = '';
});
</script>
</body>
</html>
資料推送
在需要伺服器主動向客戶端推送資料的場景中，WebSocket 表現優秀。下面的程式碼示例展示瞭如何使用 Node.js 和 WebSocket 實現一個簡單的實時資料推送服務。
伺服器端程式碼：
const express = require('express');
const WebSocket = require('ws');
const app = express();
const server = new WebSocket.Server({ noServer: true });
let counter = 0;
setInterval(() => {
server.clients.forEach((client) => {
if (client.readyState === WebSocket.OPEN) {
client.send(`Data: ${counter++}`);
}
});
}, 1000);
app.use(express.static('public'));
server.on('connection', (socket) => {
console.log('User connected');
socket.on('close', () => {
console.log('User disconnected');
});
});
const port = process.env.PORT || 3000;
const serverInstance = app.listen(port, () => {
console.log(`Listening on port ${port}`);
});
客戶端程式碼（HTML + JavaScript）：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>WebSocket Data Push</title>
</head>
<body>
<div id="data"></div>
<script>
const dataDiv = document.getElementById('data');
const socket = new WebSocket('ws://localhost:3000');
socket.addEventListener('message', (event) => {
const data = document.createElement('div');
data.textContent = event.data;
dataDiv.appendChild(data);
});
</script>
</body>
</html>
透過以上程式碼示例，我們可以看到 WebSocket 在實時通訊和資料推送場景中的應用。同時，請注意在使用 WebSocket 時關注上述提及的注意事項。
