websocket前端发送消息,websocket日志实时监控

　　本文默认您已掌握react生态开发的相关技术，并熟练应用umiJS的原则上，请继续！

项目需求：

　　 1、服务侧推送给消息给前端，前端需要展示在右下角

　　2、根据不同的消息类型，提供不同的操作按钮同意、拒绝等

代码设计：

　　 1、使用求转发到方式建立通道

　　2、前端基于umi antd重新连接-websocket.js开发

　　3、使用快递快递-ws mockjs建立求转发到服务通道，模拟服务端推送消息

运行效果：

使用方法：

　　 1、项目中已引入重新连接-websocket.min.js，详见其官方文档

　　2、登录成功后，接着调用求转发到初始化：

　　yield put({ type: websocket/init ，有效负载：{ authToken } })；

核心代码：

　　 1 、/service/websocket.js

　　/** * 基于重新连接-网络插座库已引入* 封装服务文件*/class web套接字{/* * * web套接字逻辑* 2021-10-28 */constructor(){ this。web socket=null这个。URL= ws://127。0 .0 .1:30001/web socket-im ；这个。options={连接超时：5000，最大重试次数：10，} .} init=()={ this。web socket=新的重新连接web socket(this。网址，[]，这个。选项)；} close=()={ this。网络插座这个。web套接字。close()；} on message=(回调)={ this。网络插座这个。web套接字。addevent侦听器( message ，(e)={ callback callback(e)})；} } const web socket=new web socket()；//初始化连接导出函数openWs(){返回web套接字。init()；} //关闭连接导出函数closeWs(){返回web套接字。close()；} //监听求转发到消息导出函数在邮件(){ let延期；web套接字。on消息(函数(e){ if(deferred){ deferred。resolve(e)deferred=null } })；return { message() { if(！延期){延期={ }延期。承诺=新承诺(解决=延期。resolve=resolve)}延迟返回。承诺；} }} 2、/model/websocket.js

　　/** * 封装模型文件*时刻、不可变、antd、nanoid组件请自行学习*/import {openWs，onMessage，closeWs } from services/web socket import moment from moment import { Map，from js } from immutable import { notification } from antd import nanoid from nanoid ；const init state=Map({ message:Map()，//收到的消息});导出默认{命名空间： websocket ，状态：initState，订阅：{ setup({ dispatch，history }){ dispatch({ type: listener })；返回history.listen(({路径名，查询})={ });},},效果：{ * listener({ payload }，{ take，put，call }) { while (true) { const { type，payload }=yield take([ logout ])；//监听退出系统，则关闭web套接字if(type=== logout ){//关闭web套接字让出调用(关闭ws)；通知。destroy()；yield put({ type: clear all message ，有效负载：{ } });} } }, //启动websocket * init ({ payload，}，{ put，call，select }){ yield call(openWs)；const listener=yield call(对消息)；yield put({type: receiveMsg ，有效负载：{ listener } })；}, //接受消息* receive msg({ payload:{ listener } }，{ call，select，put }){ while(true){ const event=yield call(listener。消息)；yield put({ type: progressMsg ，有效负载：{ msg:JSON。解析(事件。数据)})；} }, //统筹消息* progressMsg ({有效负载：{msg} }，{ call，select，put }){ console。log(msg)yield put({ type: addOneMessage ，有效负载：{ msg } })；}，}，reducers: { addOneMessage(state，{ payload:{ msg } }){ const msgId=nanoid()- moment().格式( x )；return state.setIn([message ，msgId)，fromJS({.msg，msgId })}，removeOneMessage(state，{ payload:{ msgId } }){返回状态。delete in([ message ，msgId]) }，clearAllMessage(state，{ payload:{ } }){返回状态。setin([ message ]，Map()) }，}，}3，通知组件封装，结构及代码

　　package.json

　　{ name: Notification ， version: 0.0.0 ， private: true， main :/index . js }(2)index . less。通知{。btns { padding:0；边距：15px 0 0列表样式：无；宽度：100%;显示器：flex justify-content:flex-end；李{左边距：10px} }}(3)index.js

　　/** * 右下角弹窗组件封装*/import React from React import { inject ntl } from React-intl ；从瞬间导入{连接}从dva 导入{通知}从安特德导入瞬间；从导入演示1。/Demo1 从导入演示2 ./demo 2 @ inject ntl @ connect(({ web socket，})=({ websocket}))导出默认类通知扩展做出反应.component { componentWillReceiveProps(nextProps){ const { web socket，dispatch，intl，intl:{ format message } }=nextProps；let message=web socket。get(“message”)；消息。foreach((note)={ let object=note。getin([ object ])；让msgId=note。getin([ msgId ])；let title=note。getin([ title ])；让内容=笔记。getin([ content ])；let format= YYYY-MM-DD HH:MM:ss ；let time=note.getIn([ts])？moment(note.getIn([ts])，x ).格式(格式):矩()。格式(格式)；switch(object){ case demo 1 :content=demo 1 dispatch={ dispatch } intl={ note } onClose={()=this。onClose(msgId)}/；打破；案例“demo 2”:content=demo 2 dispatch={ dispatch } intl={ intl } note={ note } on close={()=this。on close(msgId)}/；打破；默认：break}通知。open({ message:span { title } small { time }/small/span，duration:30，key: msgId，description:content，placement: bottomRight ，onClick: ()={ }，onClose:()={ this。onClose(msgId)；} });}) } //关闭消息on close=(msgId)={ const { dispatch }=this。道具；调度({ type: web socket/removeOneMessage ，有效负载：{ msgId } })返回通知。close(msgId)；} render(){ return(null)} }通知。proptypes={ }(4)演示1。射流研究…

　　"从.导入“做出反应”从.导入样式"。/index.less 导出扩展反应上的默认类通知组件{ render(){ const {note，intl:{ format message } }=this。道具；让内容=笔记。getin([ content ])；return( div className={styles .notification } div { content }/div/div)} }通知子。道具类型={ }(5)演示2。射流研究…

　　"从.导入“做出反应”从.导入样式"。/index。减去“utils”中的“import { config }”和“antd”中的“import { Button }”;const { defaultStyleSize }=config；导出默认类通知扩展做出反应.Component { dealApproval=(type，data)={ const {dispatch，onClose }=this.propsif(type==拒绝){ console.log(拒绝)onClose()；} else if(type== agree ){ console。日志(同意)onClose()；} } render(){ const {note，intl:{ format message } }=this。道具；让内容=笔记。getin([ content ])；return( div className={styles .通知} div { content }/div ul class name={ styles。btns } Li Button style={ { margin left: 12px } } type={ primary } size={ default style size } onClick={()={ this。交易批准(“同意”，注意。get( data )} } {格式化消息({ id: global。agree })}/Button/Li Li Button style={ { margin left: 12px } } type={ danger } size={ default style size } onClick=.模拟消息：

　　到此这篇关于前端监听求转发到消息并实时弹出的文章就介绍到这了，更多相关求转发到消息监听内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。