WebSocket怎样使用？实时通信教程-php教程-PHP中文网

WebSocket怎样使用？实时通信教程

絕刀狂花

发布： 2025-07-04 19:48:02

原创

203人浏览过

websocket通过建立客户端与服务器间的持久连接实现双向实时通信，不同于http的“请求-响应”模式。1. 客户端使用javascript创建websocket实例并监听事件（onopen、onmessage、onclose、onerror）以处理连接状态和数据收发；2. 服务器端需使用支持websocket的库（如node.js的ws库）来接收连接、处理消息及广播数据；3. websocket通过握手协议升级http连接，随后保持全双工通信，减少传输开销；4. 实际应用中应设置重连机制，包括延迟重试、指数退避策略、用户反馈提示、状态管理及可选的心跳检测；5. websocket适用于实时聊天、在线游戏、数据仪表盘、协同编辑、通知推送及直播互动等对低延迟和双向通信要求高的场景。

WebSocket怎样使用？实时通信教程

WebSocket的使用，简单来说，就是建立一条客户端和服务器之间的“长连接”，让双方可以随时互相发送数据，实现真正的双向实时通信。它颠覆了传统HTTP那种“你问我答”的模式，更像是在你和朋友之间开通了一条不间断的专属热线，随时想说什么就说什么，不用每次都先挂了再拨。

解决方案

要用好WebSocket，你得从客户端和服务器两端入手。这玩意儿不像HTTP请求那么简单，它需要一个握手过程来升级协议，然后才进入数据帧的传输阶段。

客户端（通常是浏览器）：

在浏览器里，JavaScript是你的主要工具。创建一个WebSocket连接非常直观：

// 尝试连接到一个WebSocket服务器
const ws = new WebSocket('ws://localhost:8080'); // 或者wss://... 用于加密连接

// 连接成功时触发
ws.onopen = () => {
    console.log('WebSocket连接已建立！');
    ws.send('你好，服务器！'); // 连接成功后，你可以立即发送数据
};

// 接收到服务器消息时触发
ws.onmessage = (event) => {
    console.log('收到服务器消息：', event.data);
    // 这里可以根据收到的数据更新UI，比如聊天消息、实时数据图表等
};

// 连接关闭时触发
ws.onclose = (event) => {
    if (event.wasClean) {
        console.log(`连接正常关闭，代码：${event.code}，原因：${event.reason}`);
    } else {
        // 例如，服务器进程被杀死或网络中断
        console.error('WebSocket连接意外断开！');
    }
    // 可以在这里尝试重连
};

// 发生错误时触发
ws.onerror = (error) => {
    console.error('WebSocket错误：', error);
};

// 手动关闭连接
// ws.close(1000, '客户端主动关闭'); // 可选代码和原因

登录后复制

关键点就是 new WebSocket() 构造函数，以及 onopen, onmessage, onclose, onerror 这几个事件处理器。send() 方法则负责向服务器发送数据。

服务器端：

服务器端需要一个支持WebSocket协议的库来处理连接和消息。不同的语言有不同的实现，比如：

Node.js: ws 库（轻量级）或 socket.io（提供了更多高级功能，如房间、自动重连等）。
Python: websockets 库或 Flask-SocketIO。
Java: Spring Boot的WebSocket模块或Undertow等。

以Node.js和ws库为例：

// server.js
const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', ws => {
    console.log('有新的客户端连接了！');

    // 监听客户端发送的消息
    ws.on('message', message => {
        console.log(`收到客户端消息：${message}`);
        // 收到消息后，可以处理业务逻辑，然后选择性地回复客户端
        ws.send(`服务器已收到您的消息：“${message}”`);

        // 也可以广播给所有连接的客户端
        wss.clients.forEach(client => {
            if (client !== ws && client.readyState === WebSocket.OPEN) {
                client.send(`有新消息来自其他客户端：${message}`);
            }
        });
    });

    // 监听连接关闭事件
    ws.on('close', (code, reason) => {
        console.log(`客户端连接关闭，代码：${code}，原因：${reason || '无'}`);
    });

    // 监听错误事件
    ws.on('error', error => {
        console.error('WebSocket服务器错误：', error);
    });
});

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

登录后复制

部署这个服务器，然后用上面的客户端代码去连接，你就能看到双向通信的效果了。在我看来，WebSocket的魅力就在于它构建了一个持续的对话通道，而不是一次性的问答。

WebSocket与传统HTTP请求有何不同？

这是个核心问题，理解了它，你才能真正体会到WebSocket的价值。我个人觉得，最直观的区别在于“连接状态”和“通信模式”。

传统的HTTP请求是无状态的、短连接的。每次客户端要数据，都得重新建立连接（虽然有持久连接，但每次请求还是独立的），发送请求头、请求体，服务器处理完后返回响应头、响应体，然后连接通常就关闭了。这就好比你每次想问朋友一句话，都得先拨个电话，说完了就挂断。如果你想连续问好几句，或者朋友想随时给你反馈，这种模式的开销就太大了，而且效率低下。

WebSocket则完全不同。它在HTTP协议的基础上，通过一个“握手”过程（HTTP Upgrade机制）将连接从HTTP升级为WebSocket协议。一旦升级成功，这条连接就会保持开启状态，成为一个全双工的、有状态的持久连接。这意味着客户端和服务器可以随时、独立地向对方发送数据，无需再重复建立连接。这就像你和朋友通着电话，可以一直聊下去，想说啥说啥，不用每次都重拨。

具体来说，差异体现在：

连接方式： HTTP是“请求-响应”模式，每次通信独立；WebSocket是持久连接，一次握手后可无限次通信。
数据传输： HTTP每次请求都包含完整的HTTP头，数据包较大；WebSocket一旦连接建立，后续传输的数据帧非常小，开销极低。
通信方向： HTTP主要由客户端发起请求，服务器响应；WebSocket是全双工，客户端和服务器都可以主动发起数据传输。
实时性： WebSocket天生为实时通信设计，延迟极低；HTTP需要通过轮询、长轮询或SSE（Server-Sent Events，单向）等方式模拟实时，但效率和双向性远不如WebSocket。

所以，当你需要真正的、低延迟的双向实时数据流时，WebSocket几乎是唯一的选择。

在实际开发中，WebSocket连接断开后如何优雅地处理重连？

实际应用中，网络波动、服务器重启、客户端休眠等都可能导致WebSocket连接意外断开。如果你的应用需要持续的实时数据，那么一个健壮的重连机制是不可或缺的。我个人在做实时聊天应用时，深感重连策略的重要性，它直接关系到用户体验。

处理重连，通常会涉及以下几个方面：

监听 onclose 事件： 这是你发现连接断开的入口。在 onclose 里，你需要判断连接是正常关闭（比如用户主动退出）还是异常断开。event.wasClean 和 event.code 可以帮助你判断。
设置重连定时器： 当检测到异常断开时，不要立即尝试重连。网络可能还在恢复中，立即重连很可能再次失败，并给服务器带来不必要的压力。通常会设置一个延迟，然后尝试重连。

指数退避策略： 这是非常推荐的一种重连策略。不是每次都等固定时间，而是每次失败后，等待的时间逐渐增加（比如 1秒，2秒，4秒，8秒...），直到达到一个最大值。这样既避免了频繁重连导致服务器过载，也给了网络足够的时间恢复。

let reconnectAttempts = 0;
const MAX_RECONNECT_INTERVAL = 30 * 1000; // 最大重连间隔30秒
const BASE_RECONNECT_INTERVAL = 1 * 1000; // 初始重连间隔1秒

function connectWebSocket() {
    // ... (WebSocket连接代码)

    ws.onclose = (event) => {
        console.error('WebSocket连接断开，尝试重连...');
        // 计算下一次重连的延迟时间
        const delay = Math.min(MAX_RECONNECT_INTERVAL, BASE_RECONNECT_INTERVAL * Math.pow(2, reconnectAttempts));
        reconnectAttempts++;

        setTimeout(() => {
            console.log(`尝试第 ${reconnectAttempts} 次重连...`);
            connectWebSocket(); // 递归调用，尝试重新连接
        }, delay);
    };

    ws.onopen = () => {
        console.log('WebSocket连接已建立！重置重连尝试次数。');
        reconnectAttempts = 0; // 连接成功后，重置计数器
    };
}
// 首次调用
connectWebSocket();

登录后复制

用户反馈： 在UI上给用户一些提示，比如“连接中...”、“网络不稳定”等，避免用户以为应用卡死。
状态管理： 在应用层面维护WebSocket的连接状态（连接中、已连接、断开），并根据状态禁用或启用某些功能。
心跳机制（可选但推荐）： 有时候连接可能“假死”——客户端和服务器都认为连接是开着的，但实际上数据已经无法传输。通过定期发送小数据包（心跳），可以检测连接是否真正活跃。如果心跳长时间没有响应，就认为连接断开，并触发重连。

优雅的重连，在我看来，是衡量一个实时应用健壮性的重要指标。它能极大提升用户体验，减少因网络波动导致的服务中断感。

WebSocket在哪些实际场景中能发挥最大优势？

WebSocket并非万能，但它在某些特定场景下，简直就是“杀手锏”般的存在。我个人觉得，凡是需要“即时更新”和“双向交互”的应用，WebSocket都能大放异彩。

实时聊天应用： 这是最经典的场景。无论是私聊还是群聊，用户发送消息后，其他在线用户需要立即收到。WebSocket提供了完美的低延迟双向通道。
在线游戏： 多人在线游戏对延迟的要求极高，玩家的操作（移动、攻击）需要立即同步给其他玩家。WebSocket的持久连接和低开销特性使其成为理想选择。
实时数据仪表盘/监控系统： 股票价格、服务器性能指标、物联网设备数据等，需要持续不断地从后端推送到前端进行展示和更新。WebSocket能高效地将这些数据流化到浏览器。
协同编辑工具： 想象一下Google Docs或Figma，多个人同时编辑一个文档或设计稿，每个人的操作都需要实时同步给其他人。WebSocket在这里发挥了核心作用，确保每个人看到的是最新状态。
通知系统： 当服务器有新事件发生时（如新订单、新邮件、系统告警），需要立即推送到用户。虽然HTTP长轮询也能实现，但WebSocket的效率和扩展性更高。
直播弹幕/互动： 观看直播时，观众发送的弹幕需要实时显示，主播的互动也需要即时反馈。WebSocket能很好地承载这种高并发的实时数据流。