dupi 添加websocket实时通信模块

Author: duxianwei520

app/configs/router.config.js

@@ -12,6 +12,7 @@ export default () => (
     <Route path="/" component={base.app} onEnter={isLogin}>
       <IndexRoute component={base.example} />
       <Route path="/desk$/index" component={base.example} />
+      <Route path="/socketReceive" component={base.socketReceive} />
       {/** *菜单 开始 */}
       <Route path="/echarts" component={menu.echarts} />
       <Route path="/editor" component={menu.editor} />

app/configs/socket.js

@@ -0,0 +1,114 @@
+import io from 'socket.io-client';
+// import queryString from 'query-string';
+
+// const parsed = queryString.parse(window.location.search);
+
+class Socket {
+  constructor(ua = 'control', disable = false) {
+    this.uid = this.random();
+    // this.group = parsed.group || 'prod';
+    this.disable = disable;
+    this.socket = io('http://47.102.198.102:8080/', {
+      transports: ['websocket'],
+      query: {
+        ua,
+        group: 'prod',
+      },
+    });
+    this.isSpeaker = false;
+    this.speakerHandlers = [];
+
+    this.socket.on('room', ({ speaker }) => {
+      this.isSpeaker = speaker === this.socket.id;
+      this.speakerHandlers.forEach((cb) => {
+        if (typeof cb === 'function') {
+          cb(this.isSpeaker);
+        }
+      });
+    });
+  }
+
+  random = () => Date.now() + Math.random();
+
+  registerSpeakerHandler = (callback) => {
+    this.unregisterSpeakerHandler(callback);
+    this.speakerHandlers.push(callback);
+  };
+
+  unregisterSpeakerHandler = (callback) => {
+    let i = -1;
+    this.speakerHandlers.some((cb, index) => {
+      if (cb === callback) {
+        i = index;
+        return true;
+      }
+      return false;
+    });
+    if (i >= 0) {
+      this.speakerHandlers.splice(i, 1);
+    }
+  };
+
+  dispatch = (data) => {
+    // if (!this.isSpeaker && !data.speaker) {
+    //   return Promise.resolve();
+    // }
+
+    data.uid = this.uid;
+    data.timestamp = this.random();
+    this.socket.emit('dispatch', data);
+    if (data.speaker) {
+      return new Promise((resolve, reject) => {
+        this.registerSpeakerHandler((r) => {
+          if (r) {
+            resolve();
+          } else {
+            reject();
+          }
+        });
+      });
+    }
+    return new Promise((resolve) => {
+      const callback = (res) => {
+        if (this.uid === res.uid && res.timestamp === data.timestamp) {
+          this.socket.off('dispatch', callback);
+          resolve();
+        }
+      };
+      this.socket.on('dispatch', callback);
+    });
+  };
+
+  sent = (data, force) => {
+    if (!this.isSpeaker && !force) {
+      return;
+    }
+    data.uid = this.uid;
+    data.group = this.group;
+    this.socket.emit('msg', data);
+  };
+
+  on = (name, call) => {
+    if (!this.disable) {
+      this.socket.on(name, call);
+    }
+  };
+
+  close = () => {
+    this.socket.close();
+  };
+
+  send = (data) => {
+    this.dispatch({
+      source: 'control',
+      targets: ['control'],
+      type: 'dispatch',
+      payload: data,
+    })
+  }
+}
+
+const socket = new Socket('control', window.location.pathname === '/console');
+export const MsgSocket = Socket;
+
+export default socket;

app/mocks/apis/base/menu.js

@@ -9,6 +9,12 @@ module.exports = {
         resKey: 'desk$/index',
         resIcon: 'pgmb',
       },
+      {
+        id: 10064,
+        resName: 'socket接收',
+        resKey: 'socketReceive',
+        resIcon: 'pgmb',
+      },
       {
         id: 600110233,
         resName: '图表',

app/pages/base/app.js

@@ -12,7 +12,7 @@ import '@styles/base.less'
 import Header from './app/header'
 import LeftNav from './app/leftNav'
 // import TabList from './app/tabList'
-
+import SocketComponent from './socket'
 
 @connect((state, props) => ({}))
 export default class App extends Component {
@@ -188,6 +188,7 @@ export default class App extends Component {
     return (
       <LocaleProvider locale={zhCN}>
         <div id="container">
+          <SocketComponent />
           {
             idRenderChild && !isIframe ? <Header
               gMenuList={gMenuList}

app/pages/base/example.js

@@ -1,13 +1,14 @@
 import React, { Component } from 'react'
 // import PropTypes from 'prop-types'
-// import { } from 'antd'
+import { Button } from 'antd'
 // import {connect} from 'react-redux'
 // import {} from '@actions/xxx'
+import Socket from '@configs/socket'
 
 // @connect((storeState)=>({}))
 
 export default class app extends Component {
-  static defaultProps={
+  static defaultProps = {
   }
 
   static propTypes = {
@@ -18,17 +19,25 @@ export default class app extends Component {
     this.state = {}
   }
 
-  componentDidMount() {}
+  componentDidMount() { }
 
   // #region vscode 1.17的收缩代码块功能  业务代码
 
 
   // #endregion
 
+  // 发送socket数据
+  onClickSend = () => {
+    Socket.send({ type: 'receive/hello3', data: { name: 'dupi' } })
+  }
+
   render() {
     return (
       <div className="page">
         示范页面
+        <div>
+          <Button onClick={this.onClickSend}>发送</Button>
+        </div>
       </div>
     )
   }

app/pages/base/index.js

@@ -5,5 +5,6 @@ import example from './example'
 import login from './login'
 import notfound from './notfound'
 import app from './app'
+import socketReceive from './socketReceive'
 
-export { developing, example, login, notfound, app }
+export { developing, example, socketReceive, login, notfound, app }

app/pages/base/socket.js

@@ -0,0 +1,32 @@
+/*
+ * @Author: hy
+ * @Date: 2019-05-24 14:46:23
+ * @Last Modified by: hy
+ * @Last Modified time: 2019-05-24 15:05:01
+ */
+
+// socket on
+
+import React, { Component } from 'react'
+import socket from '@configs/socket'
+import { socketReceive } from '@actions/common'
+import { connect } from 'react-redux'
+
+@connect(() => ({}))
+export default class SocketOn extends Component {
+  componentDidMount() {
+    console.log('socket didmount')
+    this.init()
+  }
+
+  init = () => {
+    const callback = (res) => {
+      this.props.dispatch(socketReceive(res))
+    };
+    socket.on('dispatch', callback);
+  }
+
+  render() {
+    return null
+  }
+}

app/pages/base/socketReceive.js

@@ -0,0 +1,50 @@
+import React, { Component } from 'react'
+// import PropTypes from 'prop-types'
+import { Button } from 'antd'
+import { connect } from 'react-redux'
+// import {} from '@actions/xxx'
+import Socket from '@configs/socket'
+
+@connect(store => ({ socketCollection: store.socketCollection }))
+
+export default class app extends Component {
+  static defaultProps = {
+  }
+
+  static propTypes = {
+  }
+
+  constructor(props) {
+    super(props)
+    this.state = {}
+  }
+
+  componentDidMount() { }
+
+  // #region vscode 1.17的收缩代码块功能  业务代码
+
+
+  // #endregion
+
+  // 发送socket数据
+  onClickSend = () => {
+    Socket.dispatch({ type: 'receive/hello2' })
+  }
+
+  render() {
+    const { socketCollection = {} } = this.props
+    return (
+      <div className="page">
+        socket receive 页面示例
+        <div>
+          <h5>收到数据：</h5>
+          <pre>
+            <code>
+              {JSON.stringify(socketCollection, null, 2)}
+            </code>
+          </pre>
+        </div>
+      </div>
+    )
+  }
+}

app/redux/actions/common.js

@@ -12,3 +12,6 @@ export const login = createAjaxAction(common.login, requestLogin, recevieLogin)
 // gFormCache gfor2.0m的缓存
 export const setGformCache2 = createAction('set gform cache2')
 export const clearGformCache2 = createAction('clear gform cache2')
+
+// socket receive
+export const socketReceive = createAction('socketReceive')

app/redux/reducers/common.js

@@ -1,7 +1,7 @@
 import { handleActions } from 'redux-actions'
 
 // 登陆返回结果
-const loginState = () => ({ })
+const loginState = () => ({})
 export const loginResponse = handleActions({
   'request login'(state, action) {
     return { ...state, loading: true }
@@ -48,3 +48,13 @@ export const allRetrievalResult = handleActions({
     return { ...res.data, loading: false }
   },
 }, allRetrievalState)
+
+
+// socket相关操作
+export const socketCollection = handleActions({
+  'socketReceive'(state, action) {
+    // eslint-disable-next-line no-unused-vars
+    const data = action.payload
+    return { data }
+  },
+}, {})