深入理解 WebSocket：从基础概念到实战应用

NMY112

于 2024-08-21 16:04:22 发布

阅读量906

点赞数 18

文章标签： websocket 网络协议网络

本文链接：https://blog.csdn.net/qq_67572731/article/details/141396114

版权

1. WebSocket 基础概念

WebSocket 是 HTML5 引入的一种在单个 TCP 连接上进行全双工通信的协议。与传统的 HTTP 协议相比，WebSocket 允许客户端和服务器之间进行实时通信，不需要像 HTTP 那样频繁地创建和关闭连接。

特点：

全双工通信：允许客户端和服务器之间双向发送数据。
低延迟：减少了建立连接和断开连接的开销。
保持连接：一次连接，长时间保持，适合实时应用场景。

2. WebSocket 的工作原理

WebSocket 的连接建立过程始于一次 HTTP 请求，称为握手（Handshake），在握手完成后，客户端和服务器之间的通信切换到 WebSocket 协议。

握手过程：

客户端请求：客户端向服务器发送一个 HTTP 请求，其中包含 Upgrade 和 Connection 头部，表明请求使用 WebSocket 协议。

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: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=

通信开始：握手成功后，客户端和服务器可以通过 WebSocket 连接进行双向通信，数据以帧（frame）的形式发送。

3. 使用 WebSocket 的基本步骤

以 JavaScript 客户端和 Node.js 服务器为例，介绍 WebSocket 的基本使用。

3.1 客户端

在浏览器中，可以通过 `WebSocket` 对象来创建和使用 WebSocket 连接。

// 创建 WebSocket 连接
const socket = new WebSocket('ws://localhost:8080');

// 连接成功时触发
socket.addEventListener('open', function (event) {
    console.log('Connected to WebSocket server');
    socket.send('Hello Server!');
});

// 接收到消息时触发
socket.addEventListener('message', function (event) {
    console.log('Message from server: ', event.data);
});

// 连接关闭时触发
socket.addEventListener('close', function (event) {
    console.log('Disconnected from WebSocket server');
});

// 发生错误时触发
socket.addEventListener('error', function (event) {
    console.error('WebSocket error: ', event);
});

3.2 服务器

在服务器端，可以使用 `ws` 库来实现 WebSocket 服务器。

安装 ws：

npm install ws

2.创建 WebSocket 服务器：

const WebSocket = require('ws');
const server = new WebSocket.Server({ port: 8080 });

server.on('connection', (socket) => {
    console.log('Client connected');

    // 接收到消息时触发
    socket.on('message', (message) => {
        console.log('Received from client: ', message);
        socket.send('Hello Client!');
    });

    // 客户端断开时触发
    socket.on('close', () => {
        console.log('Client disconnected');
    });

    // 错误处理
    socket.on('error', (error) => {
        console.error('WebSocket error: ', error);
    });
});

4. WebSocket 应用场景

WebSocket 适用于以下几种常见场景：

实时聊天应用：如微信、QQ 等即时通讯工具。
在线游戏：需要低延迟、实时的双向通信。
实时数据推送：如股票价格、体育比赛比分等。
协作编辑工具：如多人在线文档编辑。

5. WebSocket 安全性

WebSocket 的安全性与 HTTP/HTTPS 类似，使用 `wss://` 代替 `ws://` 来建立安全的 WebSocket 连接。同时，使用身份验证、权限控制和数据加密等手段来保护 WebSocket 通信。

6. WebSocket 与 HTTP/2

虽然 HTTP/2 也支持双向通信，但 WebSocket 依然具有其独特的优势，尤其是在需要保持长连接并进行频繁数据交换的场景中，WebSocket 的性能更为优越。

7. 常见问题与调试

连接失败：检查服务器和客户端的端口、协议以及防火墙设置。
消息丢失：可能是由于网络延迟或连接不稳定，建议使用重试机制或消息确认机制。
跨域问题：WebSocket 默认没有跨域限制，但需要确保服务器配置正确。

8. WebSocket 框架与工具

Socket.IO：一个常用的 WebSocket 库，提供了更多的功能和更广泛的浏览器兼容性。
SignalR：用于 ASP.NET 的 WebSocket 库，支持自动降级到其他通讯方式。
ActionCable：用于 Ruby on Rails 的 WebSocket 框架。

9. 实战项目：简单的实时聊天应用

结合上述内容，我们可以构建一个简单的实时聊天应用。

9.1 服务端代码

const WebSocket = require('ws');
const server = new WebSocket.Server({ port: 8080 });

server.on('connection', (socket) => {
    socket.on('message', (message) => {
        server.clients.forEach(client => {
            if (client !== socket && client.readyState === WebSocket.OPEN) {
                client.send(message);
            }
        });
    });
});

9.2 客户端代码

<!DOCTYPE html>
<html>
<head>
    <title>WebSocket Chat</title>
</head>
<body>
    <input type="text" id="messageInput" placeholder="Type your message here...">
    <button id="sendBtn">Send</button>
    <ul id="messages"></ul>

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

        socket.addEventListener('message', function (event) {
            const li = document.createElement('li');
            li.textContent = event.data;
            document.getElementById('messages').appendChild(li);
        });

        document.getElementById('sendBtn').addEventListener('click', function () {
            const message = document.getElementById('messageInput').value;
            socket.send(message);
        });
    </script>
</body>
</html>