在Redux中间件中调用SignalR连接上的一个方法来向服务器发送消息

Question

我正在使用Redux中的中间件连接到我的signalR集线器，它工作得很好，我可以毫无问题地接收消息。

现在我已经到了我想在服务器上调用一个方法来"；加入一个小组"；。

最好的方法是什么？我有一个连接，所以在动作上重新创建连接"；JOIN_GROUP"；似乎有违直觉。

当我读xxx时，我想我可能会发现一些东西，所以我可以链接

import {
JsonHubProtocol,
HttpTransportType,
HubConnectionBuilder,
LogLevel,
} from '@microsoft/signalr';
import actionTypes from '../actions/actionTypes';
const startSignalRConnection = (connection) =>
connection
.start()
.then(() => console.info('SignalR Connected'))
.catch((err) => console.error('SignalR Connection Error: ', err));
const signalRMiddleware =
({ dispatch, getState }) =>
(next) =>
async (action) => {
let connection;
// register signalR after the user logged in
if (action.type === actionTypes.USER_SIGNED_IN) {
const connectionHub =
window.globalConfig?.hubUrl || process.env.REACT_APP_HUB_URL;
const protocol = new JsonHubProtocol();
// let transport to fall back to to LongPolling if it needs to
const transport =
HttpTransportType.WebSockets | HttpTransportType.LongPolling;
const options = {
transport,
logMessageContent: true,
logger: LogLevel.Critical,
accessTokenFactory: () => action.user.access_token,
};
// create the connection instance
connection = new HubConnectionBuilder()
.withUrl(`${connectionHub}/hub/notificationhub`, options)
.withHubProtocol(protocol)
.build();
//add "on" events here...
// re-establish the connection if connection dropped
connection.onclose(() =>
setTimeout(startSignalRConnection(connection), 5000)
);
startSignalRConnection(connection);
} else if (action.type === actionTypes.JOIN_GROUP) {
connection.invoke('JoinGroup', action.groupName);
}
return next(action);
};
export const joinGroup = (groupName) => (dispatch, getState, invoke) => {
invoke('JoinGroup', groupName);
};
export default signalRMiddleware;

当我发送"；JOIN_GROUP"；动作，连接未定义：

} else if (action.type === actionTypes.JOIN_GROUP) {
// connection is undefined
connection.invoke('JoinGroup', action.groupName);
}

我确实读过一些关于能够将invoke方法从连接传递到另一个方法的文章。因此：

export const joinGroup = (groupName) => (dispatch, getState, invoke) => {
invoke('JoinGroup', groupName);
};

但我不知道如何使用它，也不知道如何填充调用以便在我的组件中使用它。

任何帮助都将不胜感激。

Alex

Answer 1

设法解决了这个问题。最后，这是一个非常小的调整，因为let连接需要在初始(下一个(之前

import {
JsonHubProtocol,
HttpTransportType,
HubConnectionBuilder,
LogLevel,
} from '@microsoft/signalr';
import actionTypes from '../actions/actionTypes';
const startSignalRConnection = (connection) =>
connection
.start()
.then(() => console.info('SignalR Connected'))
.catch((err) => console.error('SignalR Connection Error: ', err));
const signalRMiddleware = ({ dispatch, getState }) => {
let connection;
return (next) => async (action) => {
// register signalR after the user logged in
if (action.type === actionTypes.USER_SIGNED_IN) {
const connectionHub =
window.globalConfig?.hubUrl || process.env.REACT_APP_HUB_URL;
const protocol = new JsonHubProtocol();
// let transport to fall back to to LongPolling if it needs to
const transport =
HttpTransportType.WebSockets | HttpTransportType.LongPolling;
const options = {
transport,
logMessageContent: true,
logger: LogLevel.Critical,
accessTokenFactory: () => action.user.access_token,
};
// create the connection instance
connection = new HubConnectionBuilder()
.withUrl(`${connectionHub}/hub/notificationhub`, options)
.withHubProtocol(protocol)
.build();
//add "on" events here...
// re-establish the connection if connection dropped
connection.onclose(() =>
setTimeout(startSignalRConnection(connection), 5000)
);
startSignalRConnection(connection);
} else if (action.type === actionTypes.JOIN_GROUP) {
connection.invoke('JoinGroup', action.groupName);
return;
}
return next(action);
};
};
export default signalRMiddleware;