Windows上的Socket環境
Windows WebSocket 開發環境設置指南
1. 基礎環境準備
1.1 安裝 Node.js
- 前往 https://nodejs.org/ 下載並安裝最新的 LTS 版本
- 開啟命令提示字元，確認安裝：
node --version npm --version
1.2 建立專案
mkdir websocket-project
cd websocket-project
npm init -y2. WebSocket 伺服器設置
2.1 安裝 ws 套件
npm install ws2.2 建立基本 WebSocket 伺服器
建立 server.js：
const WebSocket = require('ws');
// 建立 WebSocket 伺服器，監聽 8080 port
const wss = new WebSocket.Server({ port: 8080 });
// 連線事件處理
wss.on('connection', function connection(ws) {
console.log('新的客戶端連線');
// 接收訊息
ws.on('message', function incoming(message) {
console.log('收到: %s', message);
// 回傳訊息給客戶端
ws.send(`伺服器收到訊息: ${message}`);
});
// 傳送歡迎訊息
ws.send('歡迎連線到 WebSocket 伺服器！');
});
console.log('WebSocket 伺服器已啟動於 ws://localhost:8080');3. WebSocket 客戶端設置
3.1 建立測試用 HTML 頁面
建立 index.html：
<!DOCTYPE html>
<html>
<head>
<title>WebSocket 測試</title>
</head>
<body>
<h2>WebSocket 測試頁面</h2>
<input type="text" id="messageInput" placeholder="輸入訊息">
<button onclick="sendMessage()">傳送</button>
<div id="messages"></div>
<script>
const ws = new WebSocket('ws://localhost:8080');
ws.onopen = function() {
appendMessage('已連線到伺服器');
};
ws.onmessage = function(event) {
appendMessage(`收到: ${event.data}`);
};
ws.onclose = function() {
appendMessage('連線已關閉');
};
function sendMessage() {
const input = document.getElementById('messageInput');
const message = input.value;
ws.send(message);
appendMessage(`傳送: ${message}`);
input.value = '';
}
function appendMessage(message) {
const messagesDiv = document.getElementById('messages');
messagesDiv.innerHTML += `<div>${message}</div>`;
}
</script>
</body>
</html>4. 執行與測試
4.1 啟動伺服器
node server.js4.2 設置靜態檔案伺服器
安裝 http-server：
npm install -g http-server在新的命令提示字元視窗中執行：
http-server4.3 測試步驟
- 開啟瀏覽器，訪問 http://localhost:8080
- 開啟開發者工具（F12）查看 WebSocket 連線狀態
- 在輸入框中輸入訊息並點擊傳送
- 觀察伺服器端的命令提示字元輸出
5. 進階功能設置
5.1 錯誤處理
修改 server.js，加入錯誤處理：
ws.on('error', function error(err) {
console.error('WebSocket 錯誤:', err);
});
process.on('uncaughtException', function(err) {
console.error('未捕獲的異常:', err);
});5.2 心跳檢測
加入心跳機制確保連線存活：
function heartbeat() {
this.isAlive = true;
}
wss.on('connection', function connection(ws) {
ws.isAlive = true;
ws.on('pong', heartbeat);
});
const interval = setInterval(function ping() {
wss.clients.forEach(function each(ws) {
if (ws.isAlive === false) return ws.terminate();
ws.isAlive = false;
ws.ping();
});
}, 30000);6. 安全性設置
6.1 設置 SSL/TLS
使用 HTTPS 的 WebSocket（WSS）：
const https = require('https');
const fs = require('fs');
const server = https.createServer({
cert: fs.readFileSync('path/to/cert.pem'),
key: fs.readFileSync('path/to/key.pem')
});
const wss = new WebSocket.Server({ server });
server.listen(8080);6.2 訊息驗證
加入基本的訊息驗證：
ws.on('message', function incoming(message) {
try {
const data = JSON.parse(message);
if (!data.token) {
ws.send(JSON.stringify({ error: '未授權的請求' }));
return;
}
// 處理訊息
} catch (e) {
ws.send(JSON.stringify({ error: '無效的訊息格式' }));
}
});7. 常見問題排解
-
連線被拒絕
- 檢查防火牆設置
- 確認 port 未被佔用
- 驗證伺服器是否正在運行
-
連線不穩定
- 實作重連機制
- 檢查網路狀態
- 調整心跳間隔
-
效能問題
- 限制同時連線數
- 實作訊息佇列
- 優化訊息大小
8. 開發工具建議
-
VSCode 擴充功能：
- WebSocket Client
- Live Server
- Node.js Debug
-
測試工具：
- Postman
- WebSocket King Client
- Chrome DevTools
9. 最佳實踐
- 錯誤處理：實作完整的錯誤處理機制
- 重連機制：處理斷線情況
- 訊息格式：使用標準的 JSON 格式
- 安全性：實作適當的認證機制
- 監控：加入日誌記錄功能