结合promise与websocket的发布/订阅模式实践

最新推荐文章于 2025-05-30 09:10:07 发布
最新推荐文章于 2025-05-30 09:10:07 发布
阅读量2.9k 收藏 6
点赞数
CC 4.0 BY-SA版权
文章标签： 网络 javascript 前端 ViewUI
原文链接：https://segmentfault.com/a/1190000014873336
本文介绍了一种结合Promise与WebSocket的发布/订阅模式实践，应用于聊天室系统的开发。通过Promise化改造WebSocket，解决了按顺序触发请求、多条同类型请求的响应匹配问题，以及与dva框架的异步流程融合。文章提供了实现原理和简化代码示例。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

结合promise与websocket的发布/订阅模式实践

本文初衷

最近恰好在公司做了一个聊天室系统，所以在系统中做了一下对websocket进行的promise化改造，所以想写篇文章总结一下，如果大家有什么更好的方法或者心得感悟，欢迎交流

技术栈

dva + protobuf
考虑到protobuf对websocket并没什么本质影响，所以本文就不涉及了

业务场景

基于websocket的聊天室系统

开发痛点
  1. 可能存在按顺序触发的请求
    eg. 删除req---确认删除rsp---刷新页面req---刷新页面rsp
    但由于并非所有的删除操作后都会刷新页面，所以考虑是不是可以使用发布订阅模式来模拟类似promise的流式操作
  2. 存在同一类型请求短时间内多次触发时，如何寻找每一条回复信息的发射源，考虑可以使用promise池+唯一识别码token来实现
  3. 由于dva的异步操作是基于redux-saga的，所以如果可以用promise完成与websocket的互动，那么对于effects中使用yield控制异步流程，也会是一个很好的体验
实现原理

首先，这一套系统的一切前提是请求的唯一标识符token，前端发送给服务器之后，服务器必须要把这个token跟数据放在一起发回来才行

本系统的实现原理是

对websocket的send方法进行封装
发送阶段
1. send执行时，先生成一个promise，及其唯一token
2. 将promise的resolve， reject，token，及其他需要的信息放入一个对象，然后推入一个promise池中
3. 执行websocket的send方法
4. return 这个promise

接收阶段
1. 收到回复消息时，先从promise池中对token进行匹配
2. 根据回复的状态决定执行reso
最低0.47元/天 解锁文章

200万优质内容无限畅学
事件驱动架构中的异步编程与并发编程
AI天才研究院
07-19 2964
作者：禅与计算机程序设计艺术 随着云计算、大数据、IoT等技术的兴起，事件驱动架构正在成为主流架构模式。在事件驱动架构中，事件源产生事件，事件经过多个处理单元进行处理，最后得到结果的过程被称作事件处理流程。 事件驱动架构通常由事件生成器（Event Generator）、事件过滤器（Event Filter）、事件路由器（E
前端领域 TypeScript 观察者模式的 TypeScript 实现
小白菜的博客
04-19 630
观察者模式是软件工程中最常用的设计模式之一，特别适合处理对象间的一对多依赖关系。在前端开发领域，随着应用复杂度的提升，组件间的通信变得越来越重要。深入解析观察者模式的核心概念展示TypeScript实现观察者模式的最佳实践探讨该模式在前端开发中的典型应用场景提供性能优化和实际项目集成建议本文范围涵盖从基础实现到高级应用的全过程，适合有一定TypeScript基础的前端开发者。首先介绍观察者模式的基本概念和原理然后展示基础的TypeScript实现接着探讨高级实现和优化策略。
WebSocket解决方案(springboot 基于Redis发布订阅)
Java小菜鸟
07-02 2351
因为一般的请求都是HTTP请求（单向通信），HTTP是一个短连接（非持久化），且通信只能由客户端发起，HTTP协议做不到服务器主动向客户端推送消息。WebSocket确能很好的解决这个问题，服务端可以主动向客户端推送消息，客户端也可以主动向服务端发送消息，实现了服务端和客户端真正的平等。3.WebSocket 服务器负责监听客户端的连接请求，一旦有客户端连接，服务器会创建一个 WebSocket 会话（Session）来管理这个连接。socket服务订阅redis的消息，订阅成功后进行推送。
发布-订阅者模式应用场景之websocket
weixin_42424283的博客
03-21 1988
发布-订阅者模式应用场景之websocket
TRPC 中的订阅与 WebSocket 实现详解
最新发布
gitblog_00057的博客
05-30 349
TRPC 中的订阅与 WebSocket 实现详解 前言 在现代 Web 应用中，实时数据推送已成为提升用户体验的关键功能。TRPC 作为一个强大的类型安全 RPC 框架，提供了完善的订阅机制和 WebSocket 支持，让开发者能够轻松实现实时数据交互功能。本文将深入探讨 TRPC 中订阅功能的实现原理和使用方法。 订阅功能基础实现 服务端订阅过程 在 TRPC 服务端实现订阅功能主要分为以下几...
Websocket解析及用法（封装一个通用订阅发布主题的webSocket类）
weixin_44312227的博客
06-29 3604
websocket是什么，怎么用，webSocket详解及用法，封装一个通用的websocket类
websocket-as-promised：用于WebSocket的基于Promise的API
02-04
承诺的websocket 一个客户端库，带有用于浏览器和Node.js的基于的API。 例 import WebSocketAsPromised from 'websocket-as-promised' ; const wsp = new WebSocketAsPromised ( 'ws://example.com' ) ; await wsp . open ( ) ; wsp . send ( 'message' ) ; await wsp . close ( ) ; 内容 要求 全球Promise构造函数 安装 npm i websocket-as-promised --save 浏览
socket.io-promise
07-02
socket.io-promise 使用承诺的事件扩展 socket.io。 当您需要在指定时间内从 socket.io 客户端回复时非常有用。 指定超时后，套接字将自动解除绑定 'pong' 事件处理程序。 例子 示例 1。 var socketio = require ( 'socket.io' ) , socketiosocket = require ( 'socket.io/lib/socket' ) , promise = require ( 'promise' ) ( socketiosocket ) ; io . sockets . on ( 'connection' , function ( socket ) { socket . giveme ( 'pong' , function ( pongMessage ) { // > { sta
Gdax Websocket API示例代码：JavaScript项目实践
通过以上知识的介绍，我们可以看到“gdax-ticker:Gdax Websocket API代码摘要示例”实际上是一个很好的示例，说明了如何将WebSocket协议与Node.js环境相结合，以实现与加密货币交易平台的实时数据交互。这样的程序...
构建响应式应用：WebSocket-Client库与异步IO技术的融合
![构建响应式应用：WebSocket-Client库与异步IO技术的融合]... WebSocket技术的理论基础与应用价值 ## 1.1 WebSocket技术简介 WebSocket是HTML5中的一种新
【ECMAScript】WebSocket模拟HTTP功能的实践：Promise+WebSocket+EventEmitter+Queue
weixin_45620943的博客
01-03 1017
本篇将结合Promise、WebSocket、EventEmitter和Queue，做一次实践：用WebSocket来模拟HTTP的功能。先不用关心它的用处，就当一次对知识点的整合吧。
开启一个socket服务器，接收数据，解码并利用promise返回数据模块
qq_42146383的博客
09-02 640
1、搭建socket服务器 注意：这些带面都是要运行在node.js环境下 import { readTestBuffer } from './ReadBuf'; const port = 3000 //把启动一个netServer（socket）服务封装至tcpServer函数 const tcpServer = (port) => { const net = require('net'); const server = net.createServer(); server
【设计模式】当发布订阅遇上Promise
YzzHA 的博客
04-06 561
Write Less & Do More 发布-订阅模式其实是一种对象间一对多的依赖关系，当一个对象的状态发送改变时，所有依赖于它的对象都将得到状态改变的通知。 简单点就是 收集依赖 => 触发通知 => 取出依赖执行 而 Promise 是 JS 异步编程中的重要概念，异步抽象处理对象，是目前比较流行 Javascript 异步编程解决方案之一，示例如下 new Promise((resolve, reject) => { resolve('fulfilled') })..
(精华2020年5月21日更新) vue实战篇 实时通信websocket的封装结合vue的使用
一点一滴
05-21 1万+
import webSocket from '../webSocket.js'; export default { isIosAndroid() { var u = navigator.userAgent; var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //android终端 isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
WebSocket-As-Promised 使用教程
gitblog_00103的博客
08-16 674
WebSocket-As-Promised 使用教程 项目介绍 WebSocket-As-Promised 是一个基于 Promise 的 WebSocket 封装库，旨在简化 WebSocket 的连接、发送消息和处理响应。通过使用 Promise，开发者可以更方便地进行异步操作，从而提高代码的可读性和维护性。 项目快速启动 安装 首先，通过 npm 安装 WebSocket-As-Promis...
(精华)2020年7月19日 vue 实时通信websocket的封装
热门推荐
时光隧道
07-19 56万+
import webSocket from '../webSocket.js'; export default { isIosAndroid() { var u = navigator.userAgent; var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //android终端 isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
Ajax 是什么
qq_43125921的博客
10-28 466
https://juejin.cn/post/6844903618764603399 AJAX即“Asynchronous Javascript And XML” 异步js 和(xml)一般指可扩展标记语言 是指一种创建交互式网页应用的网页开发技术 可以令开发者只向服务器获取数据 Ajax是一种异步请求数据的web开发技术 Response 响应，回答，回复 fetch 拿来，取来 AJAX是个大类，相当于一个技术的总称 XMLHttpRequest 是个api 其下有xhrAP..
前端监听websocket消息并实时弹出
小记心得
11-18 8715
项目需求： 1、服务侧推送给消息给前端，前端需要展示在右下角 2、根据不同的消息类型，提供不同的操作按钮‘同意’、‘拒绝’等 代码设计： 1、使用websocket方式建立通道 2、前端基于umi+antd+reconnecting-websocket.js开发 3、使用express+express-ws+mockjs建立websocket服务通道，模拟服务端推送消息 运行效果： ...
基于WebSocket的集群化订阅发布服务器
首先，“基于websocket协议的订阅/发布者服务器”意味着这个服务器使用了WebSocket技术来实现客户端与服务器之间的实时双向通信。WebSocket协议是一种在单个TCP连接上进行全双工通信的协议，它允许服务器主动向...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值