19 WebSocket基础

在本篇中，我们将深入探讨WebSocket的基础知识。了解WebSocket对于构建实时应用至关重要，比如在线聊天室、实时数据更新等。在之前的章节中，我们处理了数据库集成与ORM使用，熟悉了如何对数据库进行操作。而下一篇将会讨论Socket.IO库的使用，本篇内容为我们奠定了基础。

1. WebSocket简介

WebSocket是一种网络通信协议，提供全双工、单通道的通信方式。与传统的HTTP请求-响应方式区别明显，WebSocket允许客户端与服务器之间进行持久性连接，使得双方都能随时进行数据交流。

1.1 WebSocket的优点

• 实时性：无论是客户端还是服务器，随时可以发送数据，减少了延迟。
• 双向通信：WebSocket支持双向通信，允许服务器主动向客户端推送数据。
• 节省开销：和HTTP相比，WebSocket协议开销更小，数据传输效率高。

2. WebSocket的工作流程

WebSocket的连接过程如下：

1. 建立连接：
   客户端向服务器发起WebSocket连接请求，使用特定的HTTP头部。

   GET /chat HTTP/1.1
   Host: example.com
   Upgrade: websocket
   Connection: Upgrade
   Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
   Sec-WebSocket-Version: 13

2. 服务器应答：
   服务器接收到请求后，如果可以接受，则返回一个101状态码，表示协议切换成功。

   HTTP/1.1 101 Switching Protocols
   Upgrade: websocket
   Connection: Upgrade
   Sec-WebSocket-Accept: dGhlIHNhbXBsZSBub25jZQ==

3. 数据传输：
   连接建立后，双方可以通过WebSocket进行数据交换，使用数据帧的方式。

4. 关闭连接：
   连接可以由任一方发起关闭，进行相应的挥手协议。

3. 使用Node.js创建WebSocket服务器

在Node.js中，我们可以使用ws模块来创建WebSocket服务器。首先，我们需要安装该模块：

npm install ws

接下来，创建一个简单的WebSocket服务器示例：

const WebSocket = require('ws');

// 创建WebSocket服务器
const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', (ws) => {
    console.log('客户端已连接');

    // 处理消息
    ws.on('message', (message) => {
        console.log(`接收到消息: ${message}`);
        // 将消息发送回客户端
        ws.send(`服务器回复: ${message}`);
    });

    // 连接关闭
    ws.on('close', () => {
        console.log('客户端已断开连接');
    });
});

console.log('WebSocket服务器已启动，监听端口8080');

3.1 示例说明

1. 创建服务器：使用WebSocket.Server创建服务器实例，监听8080端口。
2. 建立连接：监听connection事件，当有客户端连接上来时触发。
3. 消息处理：通过message事件接收客户端发送的消息，并可以通过send方法将数据发送回去。

4. WebSocket客户端示例

下面是一个简单的WebSocket客户端示例，您可以在浏览器的控制台中执行：

const socket = new WebSocket('ws://localhost:8080');

// 连接成功
socket.onopen = () => {
    console.log('连接成功');
    socket.send('Hello, server!');
};

// 接收消息
socket.onmessage = (event) => {
    console.log(`接收到: ${event.data}`);
};

// 连接关闭
socket.onclose = () => {
    console.log('连接关闭');
};

4.1 示例说明

1. 创建连接：使用new WebSocket(url)创建连接。
2. 消息发送：在onopen事件中，发送一条消息到服务器。
3. 接收数据：使用onmessage事件处理从服务器接收到的消息。

5. 应用场景

WebSocket适合用于需要低延迟和实时交互的应用场景，例如：

• 实时聊天应用
• 实时监控面板
• 多人在线游戏
  -股票实时行情展示

6. 小结

在本篇中，我们探讨了WebSocket的工作原理与基本使用方法。在后续文章中，我们将继续深入Socket.IO的使用，使我们能够更深入地理解WebSocket在实时应用中的强大能力。

对于WebSocket的基础知识掌握是构建高效实时应用的第一步，请确保您已理解以上内容并能在此基础上进行进一步的学习和开发。