Доступ к Сигналу R через React с использованием aspnet / signalr

Question

Я использую ссылку ниже для реализации SignalR в рамках реагирования

ASP NET Core Signal R Учебное пособие

Однако этот код, похоже, не соответствует текущим стандартам и@ aspnet / signalr-client теперь помечен как устаревший сообщением о том, что необходимо использовать @ aspnet / signalr

Мне удалось выяснить, что приемлемым способом создания соединения с концентратором является

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

Однако, я не знаю, как вызвать это в реагировать?

Я пытался

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

Вы можете создать собственное промежуточное программное обеспечение, вам не нужны веб-сокеты 'NEED' per se` Это мое текущее приложение:

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 });
});