实战Websocket：从入门到自闭
作为前端开发人员，我们经常需要使用 Websocket 实现实时通信功能，如聊天室、实时数据展示、游戏等。近期我在一家公司实习工作中，也遇到了使用 Websocket 的场景，所以开始了解 Websocket 的基本原理和实战应用。在本文中，我将分享我的学习笔记，带领大家入门 Websocket。
Websocket是一种用于实现双向通信的网络协议，能够在客户端和服务器之间实时传输数据。在前端领域，Websocket可以用于实现聊天室、实时数据展示、游戏等应用。本文将介绍如何使用Websocket实现一个简单的聊天室应用。
准备工作
在开始实战之前，需要进行一些准备工作。首先，需要了解Websocket的基本原理和相关API，推荐学习MDN文档。其次，需要在本地搭建一个服务器环境，可以选择Node.js、Python Flask等后端框架。本文我们选择使用node.js作为我们的服务器环境，客户端语言用的是原生的三件套。
实现简易聊天室应用
- 创建WebSocket对象
在客户端创建WebSocket对象，需要指定连接的服务器地址和端口号，例如：
const socket = new WebSocket('ws://localhost:8080');
复制代码- 监听WebSocket事件
Websocket对象有四个主要的事件：
- onopen：当WebSocket连接建立成功后触发。
- onmessage：当WebSocket接收到服务器发送的消息时触发。
- onclose：当WebSocket关闭连接时触发。
- onerror：当WebSocket发生错误时触发。
在这里我们只需要监听onopen和onmessage事件，例如：
socket.onopen = () => {
console.log('WebSocket连接已建立。');
};
socket.onmessage = event => {
const data = JSON.parse(event.data);
console.log(`收到消息：${data.message}`);
};
复制代码- 发送消息
在聊天室应用中，用户需要发送消息到服务器，然后服务器将消息广播给其他用户。我们可以通过调用WebSocket对象的send方法来发送消息，例如：
const message = {
username: 'John',
message: 'Hello, World!'
};
socket.send(JSON.stringify(message));
复制代码- 广播消息
在服务器端，我们需要监听WebSocket连接事件，并将接收到的消息广播给所有客户端。具体实现可以使用Node.js的ws库，例如：
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', ws => {
console.log('burgerBro--WebSocket连接已建立。');
ws.on('message', message => {
console.log(`收到消息：${message}`);
// 广播消息给所有客户端
wss.clients.forEach(client => {
if (client.readyState === WebSocket.OPEN) {
client.send(message);
}
});
});
});
复制代码步骤5：客户端页面展示
最后一步，我们需要在客户端页面上展示聊天记录和输入框，让用户可以发送和接收消息。具体实现可以使用 HTML、CSS 和 JavaScript。
在上述代码中，我们使用了 HTML、CSS 和 JavaScript 分别实现了聊天记录展示、消息输入框和发送按钮的功能。当用户发送消息时，我们将消息打包成 JSON 格式，然后通过 WebSocket 对象的 send 方法发送到服务器。当服务器接收到消息后，会将消息广播给所有客户端，客户端会将消息展示在聊天记录中。
总结
通过本文的实战演示，我们了解了如何使用 WebSocket 实现一个简单的聊天室应用，当然只是完成了通信方面的基础代码，在页面上只是随意写了一下还请各位多多包涵，后续有空会把完整页面给大家补上。当然，Websocket 的应用远不止于此，它还可以用于实时数据展示、游戏等。希望本文能够对大家学习 Websocket 有所帮助。
