客户端订阅服务端事件的机制

一、场景描述

产业大脑平台是一个典型的审核系统,用户发布到平台的信息需要经过审核员审核后生效。

用户发布信息->审核员审核信息->用户信息生效,这一流程可能发生在用户的同一次登录周期内。为了使客户端能实时响应信息的状态变化,可通过短轮询、长轮询+事件订阅/发布、websocket+事件订阅/发布等方式实现。下面第二节简述轮询方式,第三节详述websocket,第四节详述服务端基于EventEmitter的事件订阅/发布方式和客户端基于mitt的事件订阅/发布方式。

综合websocket、服务端与客户端的事件订阅/发布机制,可实现客户端订阅服务端事件。简化流程如下所示:

在这里插入图片描述

二、轮询方式

(一)短轮询

短轮询是指由客户端周期性发起ajax请求,服务端执行查询并返回最新状态。

客户端伪代码如下:

function polling(){axios.get('/api/xxx').then(ret)=>{...setTimeout(polling, 5000)}).catch(err=>{...setTimeout(polling, 10000)})
}
polling()

(二)长轮询+事件订阅/发布

长轮询与短轮询原理相同,区别是客户端ajax发起连接时,在请求头中添加Connection: keep-alive信息: axios.get('/api/xxx',{headers:{'Connection': 'keep-alive'}}),且服务端接受到客户端的请求后并不立即回复,而是添加一个事件监听,当出现需要推送给客户端的信息时,触发该事件。

长轮询相比短轮询大大降低了HTTP连接的频次,有效提升了通信效率。

三、websocket

websocket是一种网络通信协议,与http协议不同的是:http协议只能由客户端向服务端发起请求,而websocket是双向通信,一旦连接建立,也可由服务端主动向客户端推送数据。

相比长轮询,websocket是更彻底解决服务端向客户端推送信息的机制,在客户端的整个登录周期内,只需要建立一次TCP连接。

(一)websocket客户端

WebSocket是HTML5自带的模块,用法相当简单。假设已经在本地1001端口建立了websocket服务端(具体方法见后文),则客户端向服务端发起websocket连接以及使用方法如下:

var ws = new WebSocket("wss://localhost:1001");ws.onopen = function(evt) { console.log("Connection open ..."); ws.send("Hello WebSockets!");
};ws.addEventListener('open',(evt)=>{//若要指定多个回调函数,可使用addEventListener方法
})ws.onmessage = function(evt) {console.log( "Received Message: " + evt.data);ws.close();
};ws.onclose = function(evt) {console.log("Connection closed.");
};  //客户端向服务端发送信息
ws.send('message')//客户端的几种状态:
switch(ws.readyState){case WebSocket.CONNECTING://值为0,表示正在连接breakcase WebSocket.OPEN://值为1,表示连接成功breakcase WebSocket.CLOSING://值为2,表示连接正在关闭breakcase WebSocket.CLOSED://值为3,表示连接已经关闭,或打开连接失败break
}

(二)websocket服务端

nodejs-websocket是常用的websocket服务端模块,通过 pnpm i nodejs-websocket -S安装。使用方法如下:

const ws=require('nodejs-websocket')
const server=ws.createServer(connection=>{connection.on('text',data=>{connection.send(data)console.log(data)})connection.on('close',(code, reason)=>{console.log("websocket连接断开")console.log(code, reason)})connection.on('error',(err)=>{console.log("websocket连接异常")console.log(err)})
})
server.listen(1001,()=>{console.log("websocket running")
}).on('connection',connection=>{console.log('建立连接成功')//可以使用wss://localhost:1001访问该服务,connection.path为'/'//也可以使用wss://localhost:1001/xxx访问该服务,connection.path为'/xxx'//可以利用path传递一些特殊信息,比如userid,用于建立事件监听console.log('path= '+connection.path)
})

1. server对象

(1)方法
  • server.listen(port, [host], [callback]): 传入端口和主机地址后,开启一个 websocket 服务
  • server.close([callback]): 关闭 websocket 服务
  • server.connections: 返回包含所有 connection 的数组,可以用来广播所有消息
(2)事件

通过server.on(‘event’,callback)订阅事件。

  • listening():调用 server.listen会触发当前事件
  • close(): 当服务关闭时触发该事件,如果有任何一个connection保持链接,都不会触发该事件
  • error(errObj):发生错误时触发,此事件后会直接调用close事件
  • connection(conn):建立新链接(完成握手后)触发,conn 是连接的实例对象

2. connection对象

(1)方法
  • connection.sendText(str, [callback]):发送字符串给另一侧,可以由服务端发送字符串数据给客户端
  • connection.beginBinary():要求连接开始传输二进制,返回一个 WritableStream
  • connection.sendBinary(data, [callback]): 发送一个二进制块,类似 connection.beginBinary().end(data)
  • connection.send(data, [callback]): 发送一个字符串或者二进制内容到客户端,如果发送的是文本,类似于 sendText(),如果发送的是二进制,类似于 sendBinary()callback将监听发送完成的回调
  • connection.close([code, [reason]]):开始关闭握手(发送一个关闭指令)
  • connection.server:如果服务是 nodejs 启动,这里会保留 server 的引用
  • connection.readyState:一个常量,表示连接的当前状态
  • connection.outStream: 存储 connection.beginBinary()返回的 OutStream对象,没有则返回 null
  • connection.path:表示建立连接的路径
  • connection.headers:只读请求头的 name 的 value 对应的 object 对象
  • connection.protocols:客户端请求的协议数组,没有则返回空数组
  • connection.protocol:同意连接的协议,如果有这个协议,它会包含在 connection.protocols数组里面
(2)事件
  • close(code, reason): 连接关闭时触发
  • error(err):发生错误时触发,如果握手无效,也会发出响应
  • text(str):收到文本时触发,str 时收到的文本字符串
  • binary(inStream):收到二进制内容时触发,inStream时一个 ReadableStream
  • connect():连接完全建立后发出
var server = ws.createServer(conn=> {conn.on('binary', function(inStream) {// 创建空的buffer对象,收集二进制数据var data = new Buffer(0)// 读取二进制数据的内容并且添加到buffer中inStream.on('readable', function() {var newData = inStream.read()if (newData)data = Buffer.concat([data, newData], data.length + newData.length)})inStream.on('end', function() {// 读取完成二进制数据后,处理二进制数据process_my_data(data)})})conn.on('close', function(code, reason) {console.log('Connection closed')})}).listen(1001)

四、事件订阅/发布

(一)服务端基于EventEmitter的事件订阅/发布

Node.js是基于事件驱动实现异步操作的,事件驱动依赖的就是events模块。events模块导出一个EventEmitter类。用法如下:

const EventEmitter=require('events').EventEmitter
const emitter=new EventEmitter()//订阅事件
function listener1(...args){console.log('listener1',args)}
function listener2(...args){console.log('listener2',args)}
emitter.on('someEvent',listener1)
emitter.on('someEvent',listener2)//订阅单次事件
emitter.once('someEvent',(...args)=>{console.log('once',args)})//发布事件
emitter.emit('someEvent','arg1','arg2','arg3')//移除事件监听
emitter.removeListener('someEvent',listener1)//移除所有事件监听,若指定事件,则移除该事件的所有监听器
emitter.removeAllListeners([event])//默认EventEmitter不能超过10个监听器
//setMaxListeners(n)函数可用于改变监听器的默认限制数量
emitter.setMaxListeners(100)

(二)客户端基于mitt的事件订阅/发布方法

mitt是一个十分小巧的事件发布/订阅库,大约只有200字节左右,安装方法 pnpm i mitt -S。用法如下:

import mitt from 'mitt'const emitter = mitt()// 订阅事件
emitter.on('foo', e => console.log('foo', e) )// 订阅所有的事件
emitter.on('*', (type, e) => console.log(type, e) )// 触发事件
emitter.emit('foo', { a: 'b' })// 清除所有的订阅者
emitter.all.clear()// 使用事件处理函数的引用,方便移除监听 
function onFoo() {}
emitter.on('foo', onFoo)   // listen
emitter.off('foo', onFoo)  // unlisten

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/703581.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用Node.js和Vue.js构建全栈Web应用

随着互联网的迅速发展,Web应用程序的开发变得越来越复杂和多样化。为了满足用户不断变化的需求,全栈开发已成为一个备受关注的话题。在本篇博客中,我将介绍如何使用Node.js和Vue.js来构建全栈Web应用。 Node.js是一个基于Chrome V8引擎的Jav…

AI之T2I:Stable Diffusion 3的简介、安装和使用方法、案例应用之详细攻略

AI之T2I:Stable Diffusion 3的简介、安装和使用方法、案例应用之详细攻略 目录 Stable Diffusion 3的简介 1、效果测试 官方demo 网友提供 Stable Diffusion 3的安装和使用方法 1、安装 2、使用方法 Stable Diffusion 3的案例应用 1、基础案例 Stable Diff…

庖丁解牛-二叉树的遍历

庖丁解牛-二叉树的遍历 〇、前言 01 文章内容 一般提到二叉树的遍历,我们是在说 前序遍历、中序遍历、后序遍历和层序遍历 或者说三序遍历层序遍历,毕竟三序和层序的遍历逻辑相差比较大下面讨论三序遍历的递归方法、非递归方法和非递归迭代的统一方法然…

数据结构2月25日

第一道: 第二道: 1、插入到prev和next中间 1.new(struct list_head*)malloc(sizeof(struct list_head*)); if(newNULL) { printf("失败\n"); return; } new->nextprev->next; prev->nextnew; return; 2、删除prve和next…

Mybatis-Plus学习

文章目录 一、简介1. 概述2. 特点3. 框架架构 二、入门案例1. 数据库环境准备2. SpringBoot工程准备3. 配置application.yml4. 项目开发5. MybatisPlus测试 三、BaseMapper1. 源码2. 方法测试 四、IService1. 简介2. 使用IService3. 测试IService 五、MybatisPlus为我们提供的一…

大文件传输之udp如何传输大量数据

在数字化时代,对大文件传输的需求正以前所未有的速度增长。无论是个人用户还是企业,都急切寻求一种能够快速且稳定地处理大量数据的传输方法。UDP(用户数据报协议)以其无连接的特性和高效的数据传输能力,成为了大文件传…

啤酒:探索精酿啤酒与家常菜的温馨滋味

在繁忙的生活中,我们总是在寻找一种简单而温馨的美食享受。家常菜,作为最具代表性的传统美食,以其丰富的口味和深厚的情感价值而受到广泛欢迎。而当Fendi Club啤酒遇上家常菜,它们将共同演绎出一曲充满温情的味觉交响曲。 Fendi C…

抖音视频批量下载工具|抖音数据抓取工具

想要随时随地观看抖音平台上的精彩视频内容吗?不必担心!这款基于C#开发的抖音视频下载工具将成为您的得力助手,让您轻松畅享最新、最热的视频内容。 【多功能实用】 无论是批量视频提取还是固定视频下载,这款工具都能满足您的需求…

第十三章 Linux——备份与恢复

第十三章 Linux——备份与恢复 基本介绍安装dump和restore使用dump完成备份dump语法说明dump应用案例1dump应用案例2dump-w查看备份时间文件备份文件或者目录备注 使用restore基本语法基本介绍restore基本语法应用案例1应用案例2应用案例3应用案例4 基本介绍 实体机无法做快照…

跨境支付介绍

1、跨境电商定义和分类; 2、国际贸易清结算; 3、跨境支付; 1、跨境电商定义和分类 跨境电商业务简单说就是指不同国家地域的主体通过电子商务进行交易的一种业务模式。同传统的电商不同,交易双方属于不同的国家。因此&#xff0…

成都直播基地作为产业重要载体,引领直播行业健康、多元发展

近年来,我国网络直播行业呈现出井喷式的发展态势。众多直播平台如雨后春笋般涌现,直播内容丰富多样,涵盖游戏、电竞、美食、旅游、教育等多个领域。同时,成都直播产业园规模持续扩大,产业不断完善,整体呈现…

免费享受企业级安全:雷池社区版WAF,高效专业的Web安全的方案

网站安全成为了每个企业及个人不可忽视的重要议题。 随着网络攻击手段日益狡猾和复杂,选择一个强大的安全防护平台变得尤为关键。 推荐的雷池社区版——一个为网站提供全面安全防护解决方案的平台,它不仅具备高效的安全防护能力,还让网站安…

【JavaScript 漫游】【021】EventTarget 接口

事件的本质是程序各个组成部分之间的一种通信方式,也是异步编程的一种实现。DOM 支持大量的事件。 EventTarget 接口概述 DOM 的事件操作(监听和触发),都定义在 EventTarget 接口。所有节点对象都部署了这个接口,其他…

leetcode:46.全排列

1.什么是排列? 有顺序!! 2.树形结构: 使用used数组进行标记取过的元素,一个元素一个元素地进行取值,取完之后将used数组进行标记。 3.代码实现:(循环从i0开始,而不是…

Spring事务模板及afterCommit存在的坑

大家好,我是墨哥(隐墨星辰)。今天的内容来源于两个线上问题,主要和大家聊聊为什么支付系统中基本只使用事务模板方法,而不使用声明式事务Transaction注解,以及使用afterCommit()出现连接未按预期释放导致的…

pycharm如何安装pygame库

pycharm如何安装pygame库 PyCharm是Python中广受欢迎的一种IDE,它可以为用户提供许多工具和便利的服务,从而大大提高开发效率。pygame库可以用python进行游戏开发提供很好的支持,那么在ptcharm中如何安装pygame库呢? 一、安装步…

Jmeter系列(2)目录介绍

目录 Jmeter目录介绍bin目录docsextrasliblicensesprintable_docs Jmeter目录介绍 在学习Jmeter之前,需要先对工具的目录有些了解,也会方便后续的学习 bin目录 examplesCSV目录中有CSV样例jmeter.batwindow 启动文件jmeter.shMac/linux的启动文件jmete…

DBeaver一段时间不使用,就会自动断开连接,需要刷新数据库或者断开重连解决方案 DB2

DBeaver一段时间不使用,就会自动断开连接,需要刷新数据库或者断开重连解决方案 DB2

QT GUI编程常用控件学习

1 GUI编程应该学什么 2 QT常用模块结构 QtCore: 包含了核心的非GUI的功能。主要和时间、文件与文件夹、各种数据、流、URLs、mime类文件、进程与线程一起使用 QtGui: 包含了窗口系统、事件处理、2D图像、基本绘画、字体和文字类 QtWidgets: 包含了一些列创建桌面应用的UI元素…

分享从零开始学习网络设备配置--任务5.1 组建直连式二层无线局域网

任务要求 (1)组建直连式二层无线局域网,网络拓扑图如图 (3)路由器、交换机和AC等网络设备端口IP地址规划如表 (4)组建直连式二层无线局域网,配置AP上线、WLAN业务参数和实现STA能正…