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

一、场景描述

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

用户发布信息->审核员审核信息->用户信息生效,这一流程可能发生在用户的同一次登录周期内。为了使客户端能实时响应信息的状态变化,可通过短轮询、长轮询+事件订阅/发布、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.hqwc.cn/news/492465.html

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

相关文章

React歌词滚动效果(跟随音乐播放时间滚动)

首先给audio绑定更新时间事件 const updateTime e > {console.log(e.target.currentTime)setCurrentTime(e.target.currentTime);};<audiosrc{currentSong.url}ref{audio}onCanPlay{ready}onEnded{end}onTimeUpdate{updateTime}></audio>当歌曲播放时间改变的时…

Leetcoder Day22| 回溯part02:组合总和+字母组合

语言&#xff1a;Java/Go 216.组合总和III 找出所有相加之和为 n 的 k 个数的组合。组合中只允许含有 1 - 9 的正整数&#xff0c;并且每种组合中不存在重复的数字。 说明&#xff1a; 所有数字都是正整数。解集不能包含重复的组合。 示例 1: 输入: k 3, n 7 输出: [[1,2,4]…

python图像处理初步

文章目录 处理流程灰度分布图 处理流程 在Python中&#xff0c;通过【plt】和【numpy】可以实现图像处理的最简单的流程&#xff0c;即读取图片->处理图片->显示结果->保存结果。 import matplotlib.pyplot as plt import numpy as nppath lena.jpg img plt.imrea…

python自带轻量级键值数据库shelve

使用python自带的shelve模块&#xff0c;可以作为轻量级的键值数据库&#xff0c;在使用时可以像字典一样使用&#xff1a; 使用shelve模块的流程如下&#xff1a; 示例程序 import pandas as pd import shelve import numpy as npdef main():_shelve_file "shelve_fi…

ABBYY FineReader16文档转换、PDF管理与文档比较功能介绍

ABBYY FineReader 16作为一款OCR和PDF一体化程序&#xff0c;其强大的功能使得文档处理变得简单高效。在众多功能中&#xff0c;文档转换、PDF管理和文档比较这三大功能尤为突出&#xff0c;成为了众多企业和个人用户的首选工具。 ABBYY Finereader 16-安装包下载如下&#xff…

GitHub下载器,老司机懂的都懂!

有些老司机或者做项目的小伙伴对GitHub应该不陌生吧&#xff0c;然而GitHub的下载速度非常让人不忍直视&#xff01; 而GitHub高速下载器是一款专门用于加速在GitHub上下载资源的软件&#xff0c;解决了许多用户在下载GitHub资源时遭遇的速度慢和下载失败的问题。 本教程将详细…

通过css修改video标签的原生样式

通过css修改video标签的原生样式 描述实现结果 描述 修改video标签的原生样式 实现 在控制台中打开设置&#xff0c;勾选显示用户代理 shadow DOM&#xff0c;就可以审查video标签的内部样式了 箭头处标出来的就是shodow DOM的内容&#xff0c;这些内容正常不可见的&#x…

操作系统——处理机调度

文章目录 进程调度0.概念1.调度分类高级调度低级调度中级调度七状态模型调度对比 2.进程调度进程调度的时机进程调度的方式进程的切换方式调度器/调度程序闲逛进程 3. 调度算法的评价指标CPU利用率系统吞吐量周转时间等待时间响应时间 4. 调度算法先来先服务(FCFS)短作业优先(S…

【MATLAB源码-第148期】基于matlab的BP神经网络2/4ASK,2/4FSK,2/4PSK信号识别仿真。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 1. 调制技术基础 调制技术是通信技术中的基础&#xff0c;它允许数据通过无线电波或其他形式的信号进行传输。调制可以根据信号的振幅、频率或相位的变化来进行&#xff0c;分别对应于ASK、FSK和PSK。 1.1 2ASK与4ASK 振幅…

二叉树与堆

目录 1.树概念及结构 1.1树的概念 1.2 树的相关概念 1.3 树的表示 1.4 树在实际中的运用&#xff08;表示文件系统的目录树结构&#xff09; 2.二叉树概念及结构 2.1概念 2.2现实中的二叉树&#xff1a; 2.3 特殊的二叉树&#xff1a; 2.4 二叉树的性质 2.5 二叉树的…

C++基础知识(七:多态)

一、多态 常说的多态&#xff0c;是发生在类之间的多态 函数重载(静态多态/编译时多态) 类之间的多态(动态多态/运行时多态) 【1】前提 继承是多态的前提 虚函数 什么是多态&#xff1a;相同的代码&#xff0c;实现不同的功能 【2】函数重写(override) 必须有继承关系父类中必须…

淘宝天猫商品详情API接口(商品详情页面数据,销量接口)

淘宝商品详情API接口&#xff0c;淘宝商品销量接口&#xff0c;淘宝商品价格接口&#xff0c;淘宝商品列表接口&#xff0c;淘宝商品数据列表接口&#xff0c;淘宝关键词搜索列表接口&#xff0c;淘宝APP详情接口&#xff0c;淘宝APP商品详情接口&#xff0c;淘宝H5详情接口&am…