值得一看
广告
彩虹云商城
广告

热门广告位

使用WebSocket实现实时双向通信

WebSocket通过持久化全双工连接实现低延迟实时通信,解决了HTTP轮询效率低的问题。基于浏览器原生支持与ws库可快速搭建双向交互系统,适用于聊天、通知等场景。通过广播机制实现多客户端消息分发,并借助心跳检测维护连接健康,结合鉴权与集群可扩展至生产环境。

使用websocket实现实时双向通信

WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议,允许客户端和服务器之间实时交换数据。与传统的 HTTP 请求不同,WebSocket 连接一旦建立,双方都可以主动向对方发送消息,非常适合需要低延迟、高频率交互的场景,比如在线聊天、实时通知、股票行情推送等。

为什么选择 WebSocket?

HTTP 协议是无状态、单向通信机制,每次请求都需要重新建立连接。如果要实现“实时”效果,通常采用轮询或长轮询,效率低、延迟高。而 WebSocket 在初次通过 HTTP 握手后,会升级为持久连接,后续通信不再需要重复握手,大幅减少了开销。

关键优势:

  • 双向通信:服务端可主动推送消息给客户端
  • 低延迟:消息即时到达,适合实时应用
  • 减少资源消耗:避免频繁建立/断开连接
  • 基于标准协议,浏览器原生支持

如何使用 WebSocket 实现通信

以下以浏览器端 JavaScript 和 Node.js 后端为例,展示基本实现流程。

1. 前端建立 WebSocket 连接

使用浏览器提供的 WebSocket API 创建连接,并监听事件:

const socket = new WebSocket('ws://localhost:8080');
socket.onopen = () => {
console.log('连接已建立');
socket.send('你好,服务器!');
};
socket.onmessage = (event) => {
console.log('收到消息:', event.data);
};
socket.onclose = () => {
console.log('连接已关闭');
};
socket.onerror = (error) => {
console.error('发生错误:', error);
};

2. 后端使用 Node.js + ws 库响应

安装 ws 模块:
npm install ws

创建 WebSocket 服务器:

ViiTor实时翻译

ViiTor实时翻译

AI实时多语言翻译专家!强大的语音识别、AR翻译功能。

ViiTor实时翻译116

查看详情
ViiTor实时翻译

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', (ws) => {
console.log('客户端已连接');
ws.on('message', (data) => {
console.log('收到:', data);
// 回传消息
ws.send(`服务器回应: ${data}`);
});
ws.send('欢迎接入 WebSocket 服务!');
});

处理多客户端与消息广播

当多个用户连接时,常需要将某条消息推送给所有客户端。可以通过遍历所有活跃连接实现广播:

wss.on('connection', (ws) => {
// 将新连接加入广播列表
wss.clients.add(ws);
ws.on('message', (data) => {
// 向所有连接的客户端发送消息
wss.clients.forEach((client) => {
if (client.readyState === WebSocket.OPEN) {
client.send(data);
}
});
});
});

这样,任意客户端发送的消息都会被转发给其他所有在线用户,适用于群聊等场景。

连接管理与心跳机制

长时间运行中,网络异常可能导致连接中断但未及时触发 close 事件。建议实现心跳检测来维持连接健康:

服务器定时发送 ping 消息,客户端回应 pong:

// 服务器端设置心跳
setInterval(() => {
wss.clients.forEach((ws) => {
if (ws.isAlive === false) return ws.terminate();
ws.isAlive = false;
ws.ping();
});
}, 10000);
wss.on('connection', (ws) => {
ws.isAlive = true;
ws.on('pong', () => {
ws.isAlive = true;
});
});

通过标记 isAlive 状态并监听 pong 响应,可及时清理失效连接。

基本上就这些。WebSocket 提供了简洁高效的实时通信能力,结合合理的连接管理和消息格式设计,可以支撑大多数实时交互需求。实际项目中还可以结合 JWT 鉴权、消息队列、集群部署等进一步增强稳定性与扩展性。不复杂但容易忽略细节,比如异常处理和连接回收。

相关标签:

javascript java js 前端 node.js node npm 浏览器 websocket 后端 浏览器端 JavaScript npm JS 事件 http websocket

大家都在看:

JavaScript:将特定格式字符串转换为二维数组的实用方法
JavaScript中从HTML隐藏输入获取列表长度的正确姿势
JavaScript中正确获取从隐藏输入获取的列表(字符串)长度
JavaScript:将特定格式字符串高效转换为二维数组的教程
获取 JavaScript 列表长度的正确方法
温馨提示: 本文最后更新于2025-10-31 22:42:07,某些文章具有时效性,若有错误或已失效,请在下方留言或联系在线客服
文章版权声明 1 本网站名称: 创客网
2 本站永久网址:https://new.ie310.com
1 本文采用非商业性使用-相同方式共享 4.0 国际许可协议[CC BY-NC-SA]进行授权
2 本站所有内容仅供参考,分享出来是为了可以给大家提供新的思路。
3 互联网转载资源会有一些其他联系方式,请大家不要盲目相信,被骗本站概不负责!
4 本网站只做项目揭秘,无法一对一教学指导,每篇文章内都含项目全套的教程讲解,请仔细阅读。
5 本站分享的所有平台仅供展示,本站不对平台真实性负责,站长建议大家自己根据项目关键词自己选择平台。
6 因为文章发布时间和您阅读文章时间存在时间差,所以有些项目红利期可能已经过了,能不能赚钱需要自己判断。
7 本网站仅做资源分享,不做任何收益保障,创业公司上收费几百上千的项目我免费分享出来的,希望大家可以认真学习。
8 本站所有资料均来自互联网公开分享,并不代表本站立场,如不慎侵犯到您的版权利益,请联系79283999@qq.com删除。

本站资料仅供学习交流使用请勿商业运营,严禁从事违法,侵权等任何非法活动,否则后果自负!
THE END
喜欢就支持一下吧
点赞10赞赏 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容