0220531的博客
# 一个简单的Websocket小例子
一、Websocket的简单介绍
WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议，支持服务器主动向客户端推送数据，而不需要客户端发起请求。它是一种新的网络通信协议，可以用来代替 HTTP 或者 RESTful API，提供了更高效的实时交互。
WebSocket 采用的是 HTTP 协议，所以它可以在 HTTP 服务器上运行。它可以在浏览器的任何地方运行，包括桌面、移动设备和网页应用等。WebSocket 是一种高性能的实时通信协议，适用于实时数据更新、在线聊天、实时游戏、在线协作、推送通知等场景。
WebSocket 的主要特点有：
1. 单向通信：WebSocket 只能以单向的方式进行通信，它不能支持双向通信。也就是说，WebSocket 只能从服务器向客户端发送数据，而不能从客户端向服务器发送数据。
2. 双工通信：WebSocket 采用的是全双工通信的方式，它可以在浏览器和服务器之间进行双向通信，而不需要客户端和服务器进行握手操作。
3. 长连接：WebSocket 是基于 TCP 连接的长连接协议，它可以在浏览器和服务器之间建立持久的连接，使得服务器可以持续向客户端推送数据。
4. 数据传输：WebSocket 支持多种类型的数据传输，包括文本、二进制数据以及 JSON 数据等。
WebSocket 的实现方式有两种，一种是使用 HTML5 的 `<WebSocket>` 对象，另一种是使用 Node.js 的 WebSocket 库。下面我将通过一个简单的 WebSocket 示例来演示 WebSocket 的使用方法。
二、WebSocket示例代码
```prism language-javascript
// 创建 WebSocket 连接
const socket = new WebSocket('ws://localhost:8080');
// 客户端连接成功后会触发 onopen 事件
socket.addEventListener('open', (event) => {
// 在连接成功后，向服务器发送消息
socket.send('Hello, server!');
// 客户端向服务器发送消息后，会触发 onmessage 事件
socket.addEventListener('message', (event) => {
console.log(`Received message from server: ${event.data}`);
});
});
// 当连接被关闭或发生错误时会触发 close 事件
socket.addEventListener('close', (event) => {
console.log('WebSocket connection closed');
});
socket.addEventListener('error', (event) => {
console.error(`WebSocket error: ${event.message}`);
});
```
代码解释
• 创建 WebSocket 连接：`const socket = new WebSocket('ws://localhost:8080');` 通过构造函数创建一个 WebSocket 连接，参数为服务器的地址和端口。
• 连接成功后的操作：`socket.addEventListener('open', (event) => { ... });` 当 WebSocket 连接成功后，会触发 `open` 事件。在这个事件中，我们向服务器发送一条消息，并监听服务器返回的消息。
• 发送消息：`socket.send('Hello, server!');` 使用 `send` 方法向服务器发送消息。
• 接收消息：`socket.addEventListener('message', (event) => { ... });` 当从服务器接收到消息时，会触发 `message` 事件。在这个事件中，我们通过 `event.data` 获取到接收到的消息。
• 连接关闭或发生错误后的操作：`socket.addEventListener('close', (event) => { ... });` 当 WebSocket 连接关闭或发生错误时，会触发 `close` 事件。在这个事件中，我们通过 `event.code` 和 `event.reason` 获取到关闭或错误的原因。
• 错误事件：`socket.addEventListener('error', (event) => { ... });` 当 WebSocket 发生错误时，会触发 `error` 事件。在这个事件中，我们通过 `event.message` 获取到错误的原因。
三、WebSocket的服务器端代码
为了使上述客户端代码能够正常工作，我们需要在服务器端实现 WebSocket 服务器。下面我将通过一个简单的 WebSocket 服务器示例来演示 WebSocket 服务器的实现方法。
代码解释
• WebSocket 服务器的实现：`const server = require('http').createServer();` 通过 `http` 模块创建一个 HTTP 服务器对象。
• 为服务器添加 WebSocket 监听器：`const io = require('socket.io')(server);` 通过 `socket.io` 模块为服务器添加一个 WebSocket 监听器，并将监听器绑定到 `server` 对象上。
• 客户端连接成功后的操作：`io.on('connection', (socket) => { ... });` 当服务器接收到一个新的 WebSocket 连接时，会触发 `connection` 事件。在这个事件中，我们创建一个 `socket` 对象，用于与客户端进行通信。
• 向客户端发送消息：`socket.send('Hello, client!');` 使用 `socket` 对象的 `send` 方法向客户端发送一条消息。
• 客户端向服务器发送消息后，会触发 `message` 事件：`socket.on('message', (data) => { ... });` 当客户端向服务器发送消息后，会触发 `message` 事件。在这个事件中，我们通过 `data` 获取到客户端发送的消息。
• 客户端连接关闭或发生错误后的操作：`socket.on('close', (data) => { ... });` 当客户端连接关闭或发生错误时，会触发 `close` 事件。在这个事件中，我们通过