使用aspnet/signalr响应接入信号R

Question

我正在使用下面的链接在react中实现SignalR

ASP.NET核心信号R教程

但是，这段代码似乎不符合当前的标准，@aspnet/signalr-client现在已被标记为obselete，并显示必须使用@aspnet/signalr。

我设法找出了创建集线器连接的公认方法是

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

HOwever，我不知道怎么把这叫做反应？

我试过了

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

但这给出了一个错误

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

有没有人有一个更新的样品信号R与反应，或知道如何做到这一点？

这个软件包不会按其严格的顺序安装

保罗

Answer 1

您可以创建自定义中间件，您不需要每个se`‘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 });
});