设为首页收藏本站
开启辅助访问 切换到宽版

安徽论坛

 找回密码
 立即注册

QQ登录

只需一步，快速开始

安徽论坛»论坛 › 大国徽商 › 计算机 › 前端监听websocket消息并实时弹出(实例代码) ...
返回列表 发新帖
查看: 12369|回复: 0

前端监听websocket消息并实时弹出(实例代码)

[复制链接]
顺势而为47

63

主题

483

回帖

923

积分

高级会员

Rank: 4

积分
923
发表于 2022-3-26 10:59:13 | 显示全部楼层 |阅读模式
网站内容均来自网络，本站只提供信息平台，如有侵权请联系删除，谢谢！
本文默认您已掌握react生态开发的相关技术，并熟练应用umiJS的原则上，请继续！
项目需求：

1、服务侧推送给消息给前端，前端需要展示在右下角
2、根据不同的消息类型，提供不同的操作按钮‘同意’、‘拒绝’等
代码设计：

1、使用websocket方式建立通道
2、前端基于umi+antd+reconnecting-websocket.js开发
3、使用express+express-ws+mockjs建立websocket服务通道，模拟服务端推送消息
运行效果：




使用方法：

1、项目中已引入reconnecting-websocket.min.js，详见其官方文档
2、登录成功后，接着调用websocket初始化：
  1. yield put({
  2.     type: 'websocket/init',
  3.     payload: {
  4.         authToken
  5.     }
  6. });
复制代码
核心代码：

1、/service/websocket.js
  1. /**
  2. * 基于reconnecting-websocket库已引入
  3. * 封装service文件
  4. */
  5. class Websocket{

  7.   /**
  8.    * websocket逻辑
  9.    * 2021-10-28
  10.    */

  12.   constructor(){
  13.     this.websocket=null;
  14.     this.url='ws://127.0.0.1:30001/websocket-im';
  15.     this.options={
  16.       connectionTimeout: 5000,
  17.       maxRetries: 10,
  18.     };
  19.   }

  21.   init=()=>{
  22.     this.websocket = new ReconnectingWebSocket(this.url,[], this.options);
  23.   }

  25.   close=()=>{
  26.     this.websocket && this.websocket.close();
  27.   }

  29.   onMessage=(callback)=>{
  30.     this.websocket && this.websocket.addEventListener('message', (e) => {
  31.       callback&&callback(e)
  32.     });
  33.   }

  35. }

  37. const websocket = new Websocket();

  39. // 初始化连接
  40. export function openWs() {
  41.   return websocket.init();
  42. }

  44. // 关闭连接
  45. export function closeWs() {
  46.   return websocket.close();
  47. }

  49. // 监听websocket消息
  50. export function onMessage() {
  51.   let deferred;
  52.   websocket.onMessage(function(e){
  53.     if(deferred) {
  54.         deferred.resolve(e)
  55.         deferred = null
  56.     }
  57.   });
  58.   return {
  59.     message() {
  60.       if(!deferred) {
  61.           deferred = {}
  62.           deferred.promise = new Promise(resolve => deferred.resolve = resolve)
  63.       }
  64.       return deferred.promise;
  65.     }
  66.   }
  67. }
复制代码
2、/model/websocket.js

  2. /**
  3. * 封装model文件
  4. * moment、immutable、antd、nanoid组件请自行学习
  5. */
  6. import {openWs,onMessage,closeWs} from 'services/websocket'
  7. import moment from 'moment'
  8. import { Map, fromJS } from 'immutable'
  9. import { notification } from 'antd'
  10. import nanoid from 'nanoid';

  12. const initState = Map({

  14.   message:Map(), //收到的消息
  15.   
  16. });
  17. export default {
  18.   namespace: 'websocket',

  20.   state: initState,
  21.   subscriptions: {
  22.     setup({ dispatch, history }) {
  23.       dispatch({
  24.         type: 'listener'
  25.       });
  26.       return history.listen(({ pathname, query }) => {
  27.         
  28.       });
  29.     },
  30.   },
  31.   effects: {

  33.     * listener({ payload }, { take, put, call }) {
  34.       while (true) {
  35.         const { type, payload } = yield take(['logout']);
  36.         
  37.         // 监听退出系统，则关闭websocket
  38.         if (type === 'logout') {
  39.           // 关闭websocket
  40.           yield call(closeWs);
  41.           notification.destroy();
  42.           yield put({
  43.             type: 'clearAllMessage',
  44.             payload:{
  45.             }
  46.           });
  47.         }
  48.       }
  49.     },

  51.     // 启动websocket
  52.     * init ({
  53.       payload,
  54.     }, { put, call, select }) {
  55.       yield call(openWs);
  56.       const listener = yield call(onMessage);
  57.       yield put({type: 'receiveMsg', payload:{listener}});
  58.     },

  60.     // 接受消息
  61.     * receiveMsg ({
  62.         payload: {listener}
  63.     }, { call, select, put}) {
  64.         while(true){
  65.           const event = yield call(listener.message);

  67.           yield put({
  68.             type: 'progressMsg',
  69.             payload:{
  70.               msg:JSON.parse(event.data)
  71.             }
  72.           });
  73.          
  74.             
  75.         }
  76.     },

  78.     // 统筹消息
  79.     * progressMsg ({
  80.         payload: {msg}
  81.     }, { call, select, put}) {

  83.       console.log(msg)
  84.       
  85.       yield put({
  86.         type: 'addOneMessage',
  87.         payload:{
  88.           msg
  89.         }
  90.       });
  91.         
  92.     },

  94.   },
  95.   
  96.   reducers: {
  97.    
  98.     addOneMessage(state, { payload:{msg} }) {
  99.    
  100.       const msgId = nanoid()+'-'+moment().format('x');
  101.       return state.setIn(['message',msgId], fromJS({...msg,msgId}))

  103.     },

  105.     removeOneMessage(state, { payload:{msgId} }) {
  106.    
  107.       return state.deleteIn(['message',msgId])

  109.     },

  111.     clearAllMessage(state, { payload:{} }) {
  112.    
  113.       return state.setIn(['message'],Map())

  115.     },
  116.    

  118.   },
  119.   
  120. }
复制代码
3、Notification组件封装，结构及代码

（1）package.json
  1. {
  2.   "name": "Notification",
  3.   "version": "0.0.0",
  4.   "private": true,
  5.   "main": "./index.js"
  6. }
复制代码
（2） index.less
  1. .Notification{
  2.     .btns{
  3.         padding: 0;
  4.         margin: 15px 0 0 0;
  5.         list-style: none;
  6.         width: 100%;
  7.         display: flex;
  8.         justify-content: flex-end;
  9.         li{
  10.             margin-left: 10px;
  11.         }
  12.     }
  13. }
复制代码
（3）index.js
  1. /**
  2. * 右下角弹窗组件封装
  3. */
  4. import React from 'react'
  5. import { injectIntl } from 'react-intl';
  6. import moment from 'moment'
  7. import { connect } from 'dva'
  8. import { notification } from 'antd';
  9. import Demo1 from './Demo1'
  10. import Demo2 from './Demo2'

  12. @injectIntl
  13. @connect(({
  14.   websocket,
  15. }) => ({
  16.   websocket
  17. }))
  18. export default class Notification extends React.Component {

  20.   componentWillReceiveProps(nextProps) {
  21.     const {websocket,dispatch,intl, intl: { formatMessage }} = nextProps;
  22.     let message=websocket.get('message');

  24.     message.forEach((note)=>{

  26.       let object=note.getIn(['object']);
  27.       let msgId=note.getIn(['msgId']);
  28.       let title=note.getIn(['title']);
  29.       let content=note.getIn(['content']);
  30.       let format = 'YYYY-MM-DD HH:mm:ss';
  31.       let time=note.getIn(['ts'])?moment(note.getIn(['ts']), 'x').format(format):moment().format(format);

  33.       switch (object) {
  34.         case 'demo1':
  35.           content=<Demo1
  36.                                                 dispatch={dispatch}
  37.                                                 intl={intl}
  38.                                                 note={note}
  39.                                                 onClose={()=>this.onClose(msgId)}
  40.                                         />;
  41.                                         break;
  42.         case 'demo2':
  43.           content=<Demo2
  44.             dispatch={dispatch}
  45.             intl={intl}
  46.             note={note}
  47.             onClose={()=>this.onClose(msgId)}
  48.           />;
  49.           break;
  50.         default:
  51.                                         break;
  52.                         }

  54.       notification.open({
  55.         message: <span>{title} <small>{time}</small></span>,
  56.         duration:30,
  57.         key: msgId,
  58.         description:content,
  59.         placement: 'bottomRight',
  60.         onClick: () => {
  61.          
  62.         },
  63.         onClose: () => {
  64.           this.onClose(msgId);
  65.         }
  66.       });
  67.     })

  69.   }

  71.   // 关闭消息
  72.   onClose=(msgId)=>{
  73.     const {dispatch} = this.props;
  74.     dispatch({
  75.       type:'websocket/removeOneMessage',
  76.       payload:{
  77.         msgId
  78.       }
  79.     })
  80.     return notification.close(msgId);
  81.   }
  82.   
  83.   render(){
  84.     return(
  85.         null
  86.     )
  87.   }
  88.   
  89. }


  92. Notification.propTypes = {
  93.   
  94. }
复制代码
（4）Demo1.js
  1. import React from 'react'
  2. import styles from './index.less'

  4. export default class NotificationSon extends React.Component {
  5.   
  6.   render(){
  7.     const {note,intl:{formatMessage}} = this.props;
  8.     let content=note.getIn(['content']);

  10.     return(
  11.         <div className={styles.Notification}>
  12.           <div>{content}</div>
  13.         </div>
  14.     )
  15.   }
  16.   
  17. }

  19. NotificationSon.propTypes = {
  20.   
  21. }
复制代码
（5）Demo2.js
  1. import React from 'react'
  2. import styles from './index.less'
  3. import { config } from 'utils'
  4. import { Button } from 'antd';

  6. const { defaultStyleSize } = config;

  8. export default class NotificationSon extends React.Component {

  10.   dealApproval=(type,data)=>{
  11.     const {dispatch,onClose} = this.props;
  12.     if(type=='refuse'){
  13.       console.log('拒绝')
  14.       onClose();
  15.     }else if(type=='agree'){
  16.       console.log('同意')
  17.       onClose();
  18.     }
  19.    
  20.   }
  21.   
  22.   render(){
  23.     const {note,intl:{formatMessage}} = this.props;
  24.     let content=note.getIn(['content']);

  26.     return(
  27.         <div className={styles.Notification}>
  28.           <div>{content}</div>
  29.           <ul className={styles.btns}>
  30.             <li>
  31.               <Button style={{ marginLeft: '12px' }} type={'primary'} size={defaultStyleSize}  onClick={() => {this.dealApproval('agree',note.get('data'))}}>{formatMessage({id: 'Global.agree'})}</Button>
  32.             </li>
  33.             <li>
  34.               <Button style={{ marginLeft: '12px' }} type={'danger'} size={defaultStyleSize}  onClick={() => {this.dealApproval('refuse',note.get('data'))}}>{formatMessage({id: 'Global.refuse'})}</Button>
  35.             </li>
  36.           </ul>
  37.         </div>
  38.     )
  39.   }
  40.   
  41. }

  43. NotificationSon.propTypes = {
  44.   
  45. }
复制代码
express模拟消息：

到此这篇关于前端监听websocket消息并实时弹出的文章就介绍到这了,更多相关websocket消息监听内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！
                                                                                               
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
免责声明
1. 本论坛所提供的信息均来自网络，本网站只提供平台服务，所有账号发表的言论与本网站无关。
2. 其他单位或个人在使用、转载或引用本文时，必须事先获得该帖子作者和本人的同意。
3. 本帖部分内容转载自其他媒体，但并不代表本人赞同其观点和对其真实性负责。
4. 如有侵权，请立即联系，本网站将及时删除相关内容。
回复 设为聚合帖聚合到帖子

使用道具 举报

返回列表 发新帖
懒得打字嘛，点击右侧快捷回复 【右侧内容，后台自定义】
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表