允许自定义socket 以及暴露socket

[elvin-gogo]

更新内容

• [x] 1.添加 ref_io 用于对接 mock-socket 测试
• [x] 2. 暴露socket
• [x] 3.添加socket emit 回调事件

使用方法

index.js 入口

import dva from 'dva';
import createHistory from 'history/createHashHistory';
// user BrowserHistory
// import createHistory from 'history/createBrowserHistory';
import createLoading from 'dva-loading';

import { dvaSocket } from './utils/socket';

// 1. Initialize const app = dva({ history: createHistory(), });

// 参考文档 https://socket.io/docs/client-api/#with-extraheaders const options = { autoConnect: false, };

app.use(dvaSocket(CONFIG.socket_url, options)); app.use(createLoading());

// 5. Start app.start('#root');

export default app._store; // eslint-disable-line

> ./utils/socket.js
```javascript
import { Server, SocketIO } from 'mock-socket';
import createSocket from 'dva-socket.io';
import {
  enter_chat_room,
} from '../services/socket';

export function dvaSocket(url, option) {
  const isDev = process.env.NODE_ENV === 'development';
  if (isDev) {
    const mockServer = new Server(url);
    mockServer.on('connection', async server => {
      console.log('*************mock-socket connected......');

    });

    mockServer.on('enter_chat_room', async server => {
      const res = await enter_chat_room();
      mockServer.emit('enter_room', res);
    });
  }
  return createSocket(
    url,
    option,
    {
      on: {
        connect: (data, dispatch, getState, socket) => {
          console.log('connect success', data);
        },
        disconnection: (data, dispatch, getState) => {
          console.log('disconection', data);
        },
        enter_room: (data, dispatch, getState) => {
          console.log(data);
        },
        leave_room: (data, dispatch, getState) => {
          console.log(data);
        },
      },
      emit: {
        enter_chat_room: {
          evaluate: (action, dispatch, getState) => action.type === 'enter_chat_room',
          data: ({ payload }) => {
            return JSON.stringify(payload);
          },
          callback:(data,action, dispatch, getState) => {
            console.log('enter_chat_room callback', data);
               const { callback } = action || {}
               callback && callback(data) // 调用回调
          },
        },
      },
      asyncs: [
        {
          evaluate: (action, dispatch, getState) => action.type === 'SOCKET/OPEN',
          request: (action, dispatch, getState, socket) => {
            console.log('SOCKET/OPEN', socket);
            const { id, language, token } = action.payload;
            /* eslint no-param-reassign:0 */
            socket.io.opts.transportOptions = {
              polling: {
                extraHeaders: {
                  'TOKEN': token,
                },
              },
            };
            socket.open();
          },
        },
        {
          evaluate: (action, dispatch, getState) => action.type === 'SOCKET/CLOSE',
          request: (action, dispatch, getState, socket) => {
            console.log('SOCKET/CLOSE', socket);
            socket.close();
          },
        },
      ],
    },
    isDev ? SocketIO : null
  );
}

调用

// 获取用户token 之后调用 
this.props.dispatch({
type: 'SOCKET/OPEN',
payload: { token },
});

// 退出登录之后调用 this.props.dispatch({ type: 'SOCKET/CLOSE' });

[whatwewant]

4 #3