这是我第一次使用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 组成是:
仪表板.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
and
disconnect
功能?
- 我处理的方式是仅在用户进行身份验证时才建立连接,这样可以吗?或者还有更好的方法来处理这个问题吗?
- 哦,还有,如果我想在注销时删除连接?我是否只需从所有方法中删除侦听器,或者我可以在注销操作中使用断开连接功能吗?
多谢。如果我在解释中遗漏了任何内容,请告诉我。