将 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 管理套接字? 如何使用内置的connect
和
disconnect
功能?
我处理的方式是仅在用户具有身份验证的情况下才建立连接,这样可以吗?或者有没有更好的方法来处理这个问题?
另外,如果我想在注销时删除连接?我只需要从所有方法中删除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 一起使用?