在 redux 中使用 socket.io [英] Using socket.io with redux

问题描述

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

This is the first time I am going to use socket.io in production. I am using React + Redux. I have recently integrated socket.io with redux and its working fine but I am not sure if it would be the best way to do how I have done. Because I haven't found any sort of proper implementations of socket.io with redux, I need some help/suggestions on ways if I can improve it.

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

So, for starters I have setup a service for managing sockets all over the app:

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 组合是:

I have only used it with a single page, but ofcourse there will be more pages. My redux compositon for that page is:

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());
  };
}

它工作正常.卸载时，它停止侦听我在服务器上的发射功能.如果我能得到一些关于以下方面的建议，我将不胜感激:

Its working fine. On unmounting it stops listening to the emit function that I have on server. I would really appreciate if I could get some suggestions regarding:

• 我是否需要设置一个中间件来更好地管理套接字?和抽象的方式?
• 有没有更好的方法来使用 redux 管理套接字?
• 如何使用内置的 connect 和断开功能?
• 我处理的方式是仅在用户进行身份验证时才建立连接，这样好吗?或者有没有更好的方法来处理这个问题?
• 哦，还有，如果我想在注销时删除连接?我是否只需要从所有方法中删除侦听器，还是可以在注销操作中使用断开连接功能?

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

Thanks a lot. Please let me know if I have missed anything in explaining.

推荐答案

中间件是 Redux 应用程序中像 websocket 这样的持久连接最常见的地方.已经有很多现有的 Redux+websocket 集成库 - 请参阅我的列表 https://github.com/markerikson/redux-ecosystem-links/blob/master/middleware.md#sockets-and-adapters.您可以按原样使用其中的一些，或者将它们用作您自己实现的示例.

Middleware is the most common place for a persistent connection like a websocket in a Redux app. There's a good number of existing Redux+websocket integration libraries already - see my list at https://github.com/markerikson/redux-ecosystem-links/blob/master/middleware.md#sockets-and-adapters . You may be able to use some of them as-is, or use them as examples for your own implementation.

这篇关于在 redux 中使用 socket.io的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！