问题描述
这是我第一次在生产中使用 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的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!