将 socket.io 与 redux 一起使用

Posted

技术标签:

【中文标题】将 socket.io 与 redux 一起使用【英文标题】:Using socket.io with redux 【发布时间】:2017-01-24 10:59:56 【问题描述】:

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

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

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

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

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

非常感谢。如果我在解释时遗漏了什么,请告诉我。

【问题讨论】:

【参考方案1】:

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

【讨论】:

以上是关于将 socket.io 与 redux 一起使用的主要内容,如果未能解决你的问题,请参考以下文章

将 pm2 的集群模块与 socket.io 和 socket.io-redis 一起使用

是否可以将 Websockets/Socket.IO 与蜂窝数据/4g 一起使用?

如何将 socket.io 与 graphql 订阅一起使用?

是否可以将 UDP 与 socket.io 一起使用?

将socket.io与sails js一起使用

将 connectParams 与 JWT 一起使用时,Socket.connect() 不一致