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