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

顺势而为47

本文默认您已掌握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{
   
6. 
   
7.   /**
   
8.    * websocket逻辑
   
9.    * 2021-10-28
   
10.    */
    
11. 
    
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.   }
    
20. 
    
21.   init=()=>{
    
22.     this.websocket = new ReconnectingWebSocket(this.url,[], this.options);
    
23.   }
    
24. 
    
25.   close=()=>{
    
26.     this.websocket && this.websocket.close();
    
27.   }
    
28. 
    
29.   onMessage=(callback)=>{
    
30.     this.websocket && this.websocket.addEventListener('message', (e) => {
    
31.       callback&&callback(e)
    
32.     });
    
33.   }
    
34. 
    
35. }
    
36. 
    
37. const websocket = new Websocket();
    
38. 
    
39. // 初始化连接
    
40. export function openWs() {
    
41.   return websocket.init();
    
42. }
    
43. 
    
44. // 关闭连接
    
45. export function closeWs() {
    
46.   return websocket.close();
    
47. }
    
48. 
    
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

1. 
   
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';
    
11. 
    
12. const initState = Map({
    
13. 
    
14.   message:Map(), //收到的消息
    
15.   
    
16. });
    
17. export default {
    
18.   namespace: 'websocket',
    
19. 
    
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: {
    
32. 
    
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.     },
    
50. 
    
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.     },
    
59. 
    
60.     // 接受消息
    
61.     * receiveMsg ({
    
62.         payload: {listener}
    
63.     }, { call, select, put}) {
    
64.         while(true){
    
65.           const event = yield call(listener.message);
    
66. 
    
67.           yield put({
    
68.             type: 'progressMsg',
    
69.             payload:{
    
70.               msg:JSON.parse(event.data)
    
71.             }
    
72.           });
    
73.          
    
74.             
    
75.         }
    
76.     },
    
77. 
    
78.     // 统筹消息
    
79.     * progressMsg ({
    
80.         payload: {msg}
    
81.     }, { call, select, put}) {
    
82. 
    
83.       console.log(msg)
    
84.       
    
85.       yield put({
    
86.         type: 'addOneMessage',
    
87.         payload:{
    
88.           msg
    
89.         }
    
90.       });
    
91.         
    
92.     },
    
93. 
    
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}))
     
102. 
     
103.     },
     
104. 
     
105.     removeOneMessage(state, { payload:{msgId} }) {
     
106.    
     
107.       return state.deleteIn(['message',msgId])
     
108. 
     
109.     },
     
110. 
     
111.     clearAllMessage(state, { payload:{} }) {
     
112.    
     
113.       return state.setIn(['message'],Map())
     
114. 
     
115.     },
     
116.    
     
117. 
     
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'
    
11. 
    
12. @injectIntl
    
13. @connect(({
    
14.   websocket,
    
15. }) => ({
    
16.   websocket
    
17. }))
    
18. export default class Notification extends React.Component {
    
19. 
    
20.   componentWillReceiveProps(nextProps) {
    
21.     const {websocket,dispatch,intl, intl: { formatMessage }} = nextProps;
    
22.     let message=websocket.get('message');
    
23. 
    
24.     message.forEach((note)=>{
    
25. 
    
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);
    
32. 
    
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.                         }
    
53. 
    
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.     })
    
68. 
    
69.   }
    
70. 
    
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. }
    
90. 
    
91. 
    
92. Notification.propTypes = {
    
93.   
    
94. }

复制代码

（4）Demo1.js

1. import React from 'react'
   
2. import styles from './index.less'
   
3. 
   
4. export default class NotificationSon extends React.Component {
   
5.   
   
6.   render(){
   
7.     const {note,intl:{formatMessage}} = this.props;
   
8.     let content=note.getIn(['content']);
   
9. 
   
10.     return(
    
11.         <div className={styles.Notification}>
    
12.           <div>{content}</div>
    
13.         </div>
    
14.     )
    
15.   }
    
16.   
    
17. }
    
18. 
    
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';
   
5. 
   
6. const { defaultStyleSize } = config;
   
7. 
   
8. export default class NotificationSon extends React.Component {
   
9. 
   
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']);
    
25. 
    
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. }
    
42. 
    
43. NotificationSon.propTypes = {
    
44.   
    
45. }

复制代码

express模拟消息：

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