• 设为首页
  • 收藏本站
  • 积分充值
  • VIP赞助
  • 手机版
  • 微博
  • 微信
    微信公众号 添加方式：
    1:搜索微信号（888888）
    2:扫描左侧二维码
  • 登录 立即注册
    • 切换风格
    快捷导航
    福建二哥 › 门户 › 查看主题

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

    发布者: Error | 发布时间: 2025-6-16 12:18| 查看数: 86| 评论数: 0|帖子模式

    本文默认您已掌握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消息监听内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

    来源：https://www.jb51.net/html5/798933.html
    免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

    本帖子中包含更多资源

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

    ×

    最新评论

    新人须知

    常见问题

    维权申诉

    关注微博

    扫描微信

    关于合作

    通讯联系

    QQ Archiver 手机版 小黑屋 福建二哥 ( 闽ICP备2022004717号|闽公网安备35052402000345号 )

    Powered by Discuz! X3.5 © 2001-2023

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