6.1 WebSocket的主要概念
WebSocket 是一個通信協議，提供單個TCP連接的完整雙工通信通道。 它允許進行客戶端與伺服器之間的雙向數據傳輸， 使其成為需要實時不斷數據交換的應用程序的理想選擇，例如聊天室、 在線遊戲和通知系統。
WebSocket的優勢
- 雙向通信：WebSocket提供雙向數據傳輸，允許伺服器和客戶端隨時互相發送消息。
- 延遲更低：與傳統HTTP請求相比，WebSocket通過持續連接降低了延遲。
- 伺服器負載較低：WebSocket減少了HTTP請求的數量，從而降低了伺服器負載。
WebSocket的主要組件
- WebSocket伺服器：接受和處理WebSocket連接的伺服器端部分。
- WebSocket客戶端：建立與WebSocket伺服器連接並交換數據的客戶端部分。
6.2 在JavaScript中使用WebSocket
在JavaScript中使用WebSocket是通過WebSocket對象進行的，該對象提供了建立連接、發送和接收消息以及事件處理的方法。
創建WebSocket連接：
JavaScript
const socket = new WebSocket('ws://server.example.com/chat');
WebSocket事件：
open：當連接建立時觸發。message：當收到來自伺服器的消息時觸發。error：當出現錯誤時觸發。close：當連接關閉時觸發。
WebSocket使用範例：
JavaScript
const socket = new WebSocket('ws://server.example.com/chat');
socket.addEventListener('open', (event) => {
console.log('Connected to the WebSocket server');
socket.send('Hello Server!');
});
socket.addEventListener('message', (event) => {
console.log('Message from server:', event.data);
});
socket.addEventListener('error', (event) => {
console.error('WebSocket error:', event);
});
socket.addEventListener('close', (event) => {
console.log('Disconnected from WebSocket server');
});
6.3 在Node.js中使用WebSocket伺服器範例
可以在Node.js中使用ws庫來創建WebSocket伺服器。
安裝庫：
Terminal
npm install ws
WebSocket伺服器範例：
JavaScript
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', (ws) => {
console.log('New client connected');
ws.on('message', (message) => {
console.log('Received:', message);
ws.send(`Server says: ${message}`);
});
ws.on('close', () => {
console.log('Client disconnected');
});
});
console.log('WebSocket server is running on ws://localhost:8080');
6.4 WebSocket的主要事件與方法
客戶端事件：
onopen：當WebSocket連接建立時觸發onmessage：當收到來自伺服器的消息時觸發onclose：當WebSocket連接關閉時觸發onerror：當WebSocket出現錯誤時觸發
客戶端方法
send(data)：向伺服器發送數據close(code, reason)：用指定的代碼和原因關閉WebSocket連接
伺服器事件
connection：當有客戶端連接到伺服器時觸發message：當伺服器收到來自客戶端的消息時觸發close：當WebSocket連接關閉時觸發error：當WebSocket出現錯誤時觸發
伺服器方法
send(data)：向客戶端發送數據close(code, reason)：用指定的代碼和原因關閉WebSocket連接
6.5 WebSocket的使用範例
範例：實時聊天
客戶端部分：
HTML
<!DOCTYPE html>
<html>
<head>
<title>WebSocket Chat</title>
</head>
<body>
<input type="text" id="message" placeholder="Enter your message" />
<button onclick="sendMessage()">Send</button>
<div id="chat"></div>
<script>
const socket = new WebSocket('ws://localhost:8080');
const chat = document.getElementById('chat');
socket.onopen = function() {
console.log('WebSocket is open now.');
};
socket.onmessage = function(event) {
const message = document.createElement('p');
message.textContent = event.data;
chat.appendChild(message);
};
socket.onclose = function() {
console.log('WebSocket is closed now.');
};
socket.onerror = function(event) {
console.error('WebSocket error observed:', event);
};
function sendMessage() {
const messageInput = document.getElementById('message');
const message = messageInput.value;
socket.send(message);
messageInput.value = '';
}
</script>
</body>
</html>
伺服器部分：
JavaScript
const WebSocket = require('ws');
const server = new WebSocket.Server({ port: 8080 });
server.on('connection', (ws) => {
console.log('New client connected!');
ws.on('message', (message) => {
console.log('Received:', message);
// 向所有連接的客戶端廣播消息
server.clients.forEach(client => {
if (client.readyState === WebSocket.OPEN) {
client.send(message);
}
});
});
ws.on('close', () => {
console.log('Client disconnected');
});
ws.on('error', (error) => {
console.error('WebSocket error:', error);
});
});
console.log('WebSocket server is running on ws://localhost:8080');
GO TO FULL VERSION