0

0

WebSocket实时通信详细实现完整教程

蓮花仙者

蓮花仙者

发布时间:2025-07-06 16:21:14

|

453人浏览过

|

来源于php中文网

原创

websocket实时通信通过建立持久双向连接实现高效数据交换。客户端使用javascript创建连接并监听事件处理消息收发与错误;服务端以node.js为例,借助ws库搭建服务器处理连接、消息广播及异常;面对高并发场景,可通过负载均衡分散连接压力、水平扩展增加服务器节点、异步i/o提升性能、连接池复用减少开销、引入消息队列缓冲流量、优化框架配置、限制访问频率及代码优化等方式保障系统稳定运行。相比http长轮询和sse,websocket具备双向通信、低延迟优势,适用于高实时性需求场景;为确保安全,应采用wss://加密协议,并结合身份验证、授权机制、输入过滤、数据加密、origin校验、ip限制、定期更新及日志监控等措施构建全方位防护体系。

WebSocket实时通信详细实现完整教程

WebSocket实时通信,简单来说,就是让你的服务器和客户端之间建立一条“高速公路”,可以随时互相发送消息,而不需要客户端不停地询问服务器“有没有新消息啊?”。

WebSocket实时通信详细实现完整教程

解决方案

WebSocket实时通信详细实现完整教程

WebSocket的实现涉及到客户端和服务端两部分。下面分别介绍:

客户端实现 (JavaScript)

WebSocket实时通信详细实现完整教程
  1. 建立连接:

    const socket = new WebSocket('ws://your-server-address:your-port'); // 替换为你的服务器地址和端口

    这里,ws://是WebSocket协议的URL scheme,类似于HTTP的http://

  2. 监听事件:

    socket.onopen = () => {
        console.log('WebSocket 连接已建立');
        // 连接建立后,可以发送消息
        socket.send('你好,服务器!');
    };
    
    socket.onmessage = (event) => {
        console.log('收到服务器消息:', event.data);
        // 处理接收到的消息
    };
    
    socket.onclose = () => {
        console.log('WebSocket 连接已关闭');
    };
    
    socket.onerror = (error) => {
        console.error('WebSocket 发生错误:', error);
    };

    这些事件处理函数分别在连接建立、收到消息、连接关闭和发生错误时被调用。

  3. 发送消息:

    socket.send('这是一条要发送的消息');

    你可以随时使用socket.send()方法向服务器发送消息。

  4. 关闭连接:

    socket.close();

    在不再需要连接时,记得关闭它。

服务端实现 (Node.js 示例)

这里使用ws这个流行的WebSocket库。

  1. 安装ws:

    npm install ws
  2. 创建WebSocket服务器:

    const WebSocket = require('ws');
    
    const wss = new WebSocket.Server({ port: 8080 }); // 监听8080端口
    
    wss.on('connection', ws => {
        console.log('客户端已连接');
    
        ws.on('message', message => {
            console.log('收到客户端消息:', message);
            // 将消息广播给所有客户端
            wss.clients.forEach(client => {
                if (client !== ws && client.readyState === WebSocket.OPEN) {
                    client.send(`客户端说: ${message}`);
                }
            });
            // 可以选择回复客户端
            ws.send(`服务器已收到你的消息: ${message}`);
        });
    
        ws.on('close', () => {
            console.log('客户端已断开连接');
        });
    
        ws.on('error', error => {
            console.error('WebSocket 错误:', error);
        });
    
        // 发送欢迎消息
        ws.send('欢迎来到 WebSocket 服务器!');
    });
    
    console.log('WebSocket 服务器已启动,监听 8080 端口');

    这段代码创建了一个WebSocket服务器,监听8080端口。当有客户端连接时,会触发connection事件。在connection事件处理函数中,你可以监听客户端发送的消息、处理错误,以及在客户端断开连接时进行清理工作。

WebSocket实时通信如何处理高并发场景?

高并发是任何实时应用都必须面对的挑战。对于WebSocket,可以从以下几个方面入手:

  1. 负载均衡: 使用负载均衡器(如Nginx、HAProxy)将客户端连接分发到多个WebSocket服务器上,从而分散压力。 这就像把一个大的停车场分成几个小的停车场,每个停车场都有自己的入口,这样就不会让所有车辆都挤在一个入口。

  2. 水平扩展: 增加WebSocket服务器的数量。 当一个服务器的CPU或内存达到瓶颈时,可以简单地添加更多的服务器。

  3. 异步处理: 使用异步I/O和非阻塞操作。 Node.js本身就是基于事件循环的,非常适合处理高并发。避免执行耗时的同步操作,否则会阻塞事件循环,导致性能下降。

    PictoGraphic
    PictoGraphic

    AI驱动的矢量插图库和插图生成平台

    下载
  4. 连接池复用: 数据库连接池、WebSocket连接池等。 复用连接可以减少创建和销毁连接的开销。

  5. 消息队列: 使用消息队列(如RabbitMQ、Kafka)来缓冲和分发消息。 当消息产生速度超过服务器处理能力时,可以将消息先放入队列,然后由服务器逐步处理。

  6. 优化WebSocket框架: 选择高性能的WebSocket框架,并根据实际需求进行配置优化。

  7. 限流: 限制客户端的连接速率和消息发送速率,防止恶意攻击或过度使用资源。

  8. 代码优化: 减少不必要的计算和内存分配,提高代码执行效率。

WebSocket与HTTP长轮询、SSE的区别是什么?

这三种技术都是为了实现服务器向客户端推送数据,但实现方式和适用场景有所不同:

  1. HTTP长轮询 (Long Polling):

    • 原理: 客户端向服务器发送一个HTTP请求,服务器不会立即返回响应,而是保持连接打开,直到有新的数据可用时才返回响应。客户端收到响应后,立即再次发送请求,如此循环。
    • 优点: 简单易于实现,兼容性好。
    • 缺点: 效率较低,因为每次都需要建立和关闭HTTP连接,开销较大。服务器需要维护大量空闲连接,占用资源。实时性较差,因为客户端需要定期发送请求,存在延迟。
  2. 服务器发送事件 (Server-Sent Events, SSE):

    • 原理: 客户端向服务器发送一个HTTP请求,服务器保持连接打开,并使用text/event-stream格式向客户端推送数据。客户端只需要建立一次连接,就可以持续接收服务器推送的数据。
    • 优点: 简单易用,只需要一个HTTP连接,开销较小。支持自动重连。
    • 缺点: 只能单向通信(服务器向客户端推送数据),客户端无法向服务器发送数据。兼容性不如长轮询,一些老旧浏览器可能不支持。
  3. WebSocket:

    • 原理: 客户端和服务器之间建立一个持久的双向连接。一旦连接建立,客户端和服务器可以随时互相发送数据,无需重复建立和关闭连接。
    • 优点: 实时性最高,延迟最低。支持双向通信。
    • 缺点: 实现相对复杂。需要服务器和客户端都支持WebSocket协议。

总结:

  • 如果只需要服务器向客户端推送数据,且对实时性要求不高,可以考虑使用SSE。
  • 如果需要双向通信,且对实时性要求较高,则应该选择WebSocket。
  • 如果需要兼容老旧浏览器,或者对实时性要求不高,且实现简单,可以选择长轮询。

如何保证WebSocket通信的安全性?

WebSocket默认使用ws://协议,是不安全的。为了保证通信安全,应该使用wss://协议,它是在WebSocket上使用TLS/SSL加密,类似于HTTPS。

除了使用wss://,还可以采取以下措施来增强WebSocket通信的安全性:

  1. 身份验证: 验证客户端的身份,只允许授权的客户端连接。可以使用Token、OAuth等机制进行身份验证。

  2. 授权: 限制客户端可以访问的资源和执行的操作。

  3. 输入验证: 验证客户端发送的数据,防止恶意代码注入。

  4. 数据加密:敏感数据进行加密,防止数据泄露。

  5. 防止跨站WebSocket劫持 (Cross-Site WebSocket Hijacking, CSWSH): 类似于跨站请求伪造 (CSRF)。可以验证Origin头部,只允许来自信任域名的连接。

  6. 限制连接来源: 使用防火墙或网络策略,限制可以连接到WebSocket服务器的IP地址或域名。

  7. 定期更新: 定期更新WebSocket服务器和客户端的软件,修复安全漏洞。

  8. 监控和日志: 监控WebSocket连接和消息流量,及时发现异常行为。记录WebSocket事件日志,方便审计和故障排除。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
nginx 重启
nginx 重启

nginx重启对于网站的运维来说是非常重要的,根据不同的需求,可以选择简单重启、平滑重启或定时重启等方式。本专题为大家提供nginx重启的相关的文章、下载、课程内容,供大家免费下载体验。

233

2023.07.27

nginx 配置详解
nginx 配置详解

Nginx的配置是指设置和调整Nginx服务器的行为和功能的过程。通过配置文件,可以定义虚拟主机、HTTP请求处理、反向代理、缓存和负载均衡等功能。Nginx的配置语法简洁而强大,允许管理员根据自己的需要进行灵活的调整。php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

502

2023.08.04

nginx配置详解
nginx配置详解

NGINX与其他服务类似,因为它具有以特定格式编写的基于文本的配置文件。本专题为大家提供nginx配置相关的文章,大家可以免费学习。

500

2023.08.04

tomcat和nginx有哪些区别
tomcat和nginx有哪些区别

tomcat和nginx的区别:1、应用领域;2、性能;3、功能;4、配置;5、安全性;6、扩展性;7、部署复杂性;8、社区支持;9、成本;10、日志管理。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

233

2024.02.23

nginx报404怎么解决
nginx报404怎么解决

当访问 nginx 网页服务器时遇到 404 错误,表明服务器无法找到请求资源,可以通过以下步骤解决:1. 检查文件是否存在且路径正确;2. 检查文件权限并更改为 644 或 755;3. 检查 nginx 配置,确保根目录设置正确、没有冲突配置等等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

339

2024.07.09

Nginx报404错误解决方法
Nginx报404错误解决方法

解决方法:只需要加上这段配置:try_files $uri $uri/ /index.html;即可。想了解更多Nginx的相关内容,可以阅读本专题下面的文章。

3517

2024.08.07

nginx部署php项目教程汇总
nginx部署php项目教程汇总

本专题整合了nginx部署php项目教程汇总,阅读专题下面的文章了解更多详细内容。

31

2026.01.13

nginx配置文件详细教程
nginx配置文件详细教程

本专题整合了nginx配置文件相关教程详细汇总,阅读专题下面的文章了解更多详细内容。

39

2026.01.13

俄罗斯Yandex引擎入口
俄罗斯Yandex引擎入口

2026年俄罗斯Yandex搜索引擎最新入口汇总,涵盖免登录、多语言支持、无广告视频播放及本地化服务等核心功能。阅读专题下面的文章了解更多详细内容。

158

2026.01.28

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
SciPy 教程
SciPy 教程

共10课时 | 1.3万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号