使用 aspnet/signalr 在 React 中访问 Signalr

Question

我正在使用下面的 link 在 react

中实现 SignalR

但是，此代码似乎不符合当前标准，@aspnet/signalr-client 现在已被标记为已过时，并显示一条消息，指出必须使用 @aspnet/signalr

我设法弄清楚创建集线器连接的公认方式是

// create the connection instance
var hubConnection = new signalR.HubConnectionBuilder()
  .withUrl("URL", options)
  .withHubProtocol(protocol)
  .build();

但是，我不知道如何在 React 中调用它？

我试过了

import signalR, {} from '@aspnet/signalr';

但这给出了错误

./src/components/widgets/Chat.js
Attempted import error: '@aspnet/signalr' does not contain a default export (imported as 'signalR').

有没有人有 Signal R 的更新样本和 react 或现在知道如何做？

该软件包不会安装，因为它已过时

保罗

Answer 1

您可以创建自定义中间件，而不是 'NEED' websockets 本身` 这是我当前的应用程序：

configureStore.js:

import * as SignalR from '@aspnet/signalr';

//to server
export default function configureStore(history, initialState) {
const middleware = [
    thunk,
    routerMiddleware(history),
    SignalrInvokeMiddleware
];

const rootReducer = combineReducers({
    ...reducers,
    router: connectRouter(history)
});

const enhancers = [];
const windowIfDefined = typeof window === 'undefined' ? null : window;
if (windowIfDefined && windowIfDefined.__REDUX_DEVTOOLS_EXTENSION__) {
    enhancers.push(windowIfDefined.__REDUX_DEVTOOLS_EXTENSION__());
}

return createStore(
    rootReducer,
    initialState,
    compose(applyMiddleware(...middleware), ...enhancers)
);
}

const connection = new SignalR.HubConnectionBuilder()
    .withUrl("/notificationHub")
    .configureLogging(SignalR.LogLevel.Information)
    .build();

//from server
export function SignalrInvokeMiddleware(store, callback) {
return (next) => (action) => {
    switch (action.type) {
        case "SIGNALR_GET_CONNECTIONID":
            const user = JSON.parse(localStorage.getItem('user'));
            connection.invoke('getConnectionId', user.userid)
                .then(conid => action.callback());
            break;
        case "SIGNALR_USER_JOIN_REQUEST":
            let args = action.joinRequest;
            connection.invoke('userJoinRequest', args.clubId, args.userId);
            break;
        default:
    }
    return next(action);
}}

export function signalrRegisterCommands(store, callback) {
connection.on('NotifyUserJoinRequest', data => {
    store.dispatch({ type: 'SIGNALR_NOTIFY_USERJOIN_REQUEST', notification: data });
})

connection.start()
    .then(() => {
        callback();
    })
    .catch(err => console.error('SignalR Connection Error: ', err));
}

index.jsx:

const store = configureStore(history);
const callback = () => {
    console.log('SignalR user added to group');
}
signalrRegisterCommands(store, () => {
    console.log('SignalR Connected');
    store.dispatch({ type: 'SIGNALR_GET_CONNECTIONID', callback });
});

使用 aspnet/signalr 在 React 中访问 Signalr

Access Signal R via React using aspnet/signalr

javascript

signalr

reactjs