使用socket.io和redux

Question

这是我第一次socket.io在生产中使用.我正在使用React+ Redux.我最近socket.io与redux 集成并且工作正常,但我不确定它是否是我做的最好的方法.因为我没有找到任何正确的socket.io实现与redux,我需要一些帮助/建议,如果我可以改进它.

所以,对于初学者,我已经设置了一个服务来管理整个应用程序的套接字:

Socket.js

import isEmpty from 'lodash/isEmpty';
import io from 'socket.io-client';
import storage from '../storage';

/* eslint-disable no-use-before-define */

const Socket = {
  connect,
  emit,
  on,
  removeListener,
  socket: null
};

/* eslint-enable no-use-before-define */

function connect() {
  const hasAuthenticated = !isEmpty(storage.get('user'));
  if (hasAuthenticated) {
    // Setup a server for testing.
    Socket.socket = io.connect('http://localhost:3000', { reconnect: true });
  }
}

connect();

function on(eventName, callback) {
  if (Socket.socket) {
    Socket.socket.on(eventName, data => {
      callback(data);
    });
  }
}

function emit(eventName, data) {
  if (Socket.socket) {
    Socket.socket.emit(eventName, data);
  }
}

function removeListener(eventName) {
  if (Socket.socket) {
    Socket.socket.removeListener(eventName);
  }
}

export default Socket;

我只用了一页,但是当然会有更多的页面.我的页面的redux组合是:

Dashboard.jsx

componentWillMount() {
    this.props.alertViolations(); // Action
  }

  componentWillUnmount() {
    this.props.unsubscribeViolations(); // Action
  }

Actions.js

export function alertViolations() {
  return dispatch => {
    Socket.on('violations', violation => {
      dispatch(actions.updateViolations(violation));
    });
  };
}

export function unsubscribeViolations() {
  Socket.removeListener('violations');
  return dispatch => {
    dispatch(actions.removeViolationsListener());
  };
}

它的工作正常.在卸载时,它会停止侦听我在服务器上的emit函数.如果我能得到一些建议,我将非常感激:

• 我是否需要设置中间件以更好和抽象的方式管理套接字？
• 有没有更好的方法来管理使用redux的套接字？
• 如何利用内置connect和 disconnect功能？
• 我处理的方式只是在用户进行身份验证时构建连接,这样可以吗？或者还有更好的方法来处理这个问题？
• 哦,如果我想在注销时删除连接？我是否只需要从所有方法中删除Listeners,还是可以在注销操作中使用disconnect函数？

非常感谢.如果我在解释中遗漏了任何内容,请告诉我.

Answer 1

中间件是持久连接的最常见位置,如Redux应用程序中的websocket.已有大量现有的Redux + websocket集成库 - 请参阅我的列表,网址为https://github.com/markerikson/redux-ecosystem-links/blob/master/middleware.md#sockets-and-adapters.您可以按原样使用其中一些,或将它们用作您自己实现的示例.