什么是 WebSocket?
WebSocket 是一种网络通信协议,它允许在单个 TCP 连接上进行全双工通信。简单来说,它可以让服务器和客户端之间进行实时数据交换,而不需要像传统的 HTTP 那样,每次请求都建立一个连接。
为什么使用 WebSocket?
传统的 HTTP 请求是基于请求-响应模式的,客户端发起请求,服务器处理请求并返回响应,这个过程是同步的。而在某些应用场景中,例如实时聊天、在线游戏等,需要服务器和客户端能够实时地交换数据。WebSocket 的出现就是为了解决这个问题。
实现 WebSocket 的步骤
下面我们来一步一步实现一个简单的 WebSocket 应用。
1. 创建 WebSocket 服务器
首先,我们需要创建一个 WebSocket 服务器。这里我们使用 Node.js 和 ws 模块来搭建服务器。
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', function connection(ws) {
ws.on('message', function incoming(message) {
console.log('received: %s', message);
});
ws.send('something from server');
});
这段代码创建了一个 WebSocket 服务器,监听 8080 端口。当有客户端连接到服务器时,会触发 connection 事件。在事件处理函数中,我们监听客户端发送的消息,并将接收到的消息打印到控制台。同时,我们还向客户端发送一条消息。
2. 创建 WebSocket 客户端
接下来,我们需要创建一个 WebSocket 客户端。这里我们使用 JavaScript 来实现。
const ws = new WebSocket('ws://localhost:8080');
ws.on('open', function open() {
console.log('Connection established');
ws.send('Hello, server!');
});
ws.on('message', function incoming(data) {
console.log('received: %s', data);
});
ws.on('close', function close() {
console.log('Connection closed');
});
这段代码创建了一个 WebSocket 客户端,连接到本地服务器(ws://localhost:8080)。当连接建立成功时,会触发 open 事件,并向服务器发送一条消息。客户端还会监听服务器发送的消息,并将接收到的消息打印到控制台。当连接关闭时,会触发 close 事件。
3. 实现实时互动功能
现在我们已经实现了基本的 WebSocket 通信,接下来我们来添加一些实时互动功能。
3.1 多用户聊天
为了实现多用户聊天,我们需要修改服务器端代码,让服务器能够将消息转发给所有连接的客户端。
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
const clients = [];
wss.on('connection', function connection(ws) {
clients.push(ws);
ws.on('message', function incoming(message) {
console.log('received: %s', message);
clients.forEach(function each(client) {
if (client.readyState === WebSocket.OPEN) {
client.send(message);
}
});
});
ws.on('close', function close() {
clients.splice(clients.indexOf(ws), 1);
});
});
这段代码中,我们定义了一个 clients 数组来存储所有连接的客户端。当客户端发送消息时,我们将消息转发给所有连接的客户端。
3.2 服务器推送消息
除了客户端主动发送消息,我们还可以让服务器主动向客户端推送消息。
// ...
// 定时推送消息
setInterval(function() {
const message = `Time: ${new Date().toLocaleTimeString()}`;
clients.forEach(function each(client) {
if (client.readyState === WebSocket.OPEN) {
client.send(message);
}
});
}, 1000);
这段代码使用 setInterval 函数设置了一个定时器,每隔 1 秒向所有连接的客户端推送当前时间。
总结
通过本教程,我们学习了如何使用 HTML5 WebSocket 实现实时互动功能。我们创建了一个简单的 WebSocket 服务器和客户端,并实现了多用户聊天和服务器推送消息的功能。希望这篇教程能够帮助你快速上手 WebSocket。
