对于将来可能会找到此线程的人。

这是我的自定义中间件，它只建立连接并注册处理程序。请注意，我只想接收数据，对发送数据不感兴趣。

import {
  JsonHubProtocol,
  HttpTransportType,
  HubConnectionBuilder,
  LogLevel
} from '@aspnet/signalr'; // version 1.0.4

// action for user authentication and receiving the access_token
import { USER_SIGNED_IN } from '../actions/auth';

const onNotifReceived = res => {
  console.log('****** NOTIFICATION ******', res);
};

const startSignalRConnection = connection => connection.start()
  .then(() => console.info('SignalR Connected'))
  .catch(err => console.error('SignalR Connection Error: ', err));

const signalRMiddleware = ({ getState }) => next => async (action) => {
  // register signalR after the user logged in
  if (action.type === USER_SIGNED_IN) {
    const urlRoot = (window.appConfig || {}).URL_ROOT;
    const connectionHub = `${urlRoot}/api/service/hub`;

    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.Trace,
      accessTokenFactory: () => action.user.access_token
    };

    // create the connection instance
    const connection = new HubConnectionBuilder()
      .withUrl(connectionHub, options)
      .withHubProtocol(protocol)
      .build();

    // event handlers, you can use these to dispatch actions to update your Redux store
    connection.on('OperationProgress', onNotifReceived);
    connection.on('UploadProgress', onNotifReceived);
    connection.on('DownloadProgress', onNotifReceived);

    // re-establish the connection if connection dropped
    connection.onclose(() => setTimeout(startSignalRConnection(connection), 5000));

    startSignalRConnection(connection);
  }

  return next(action);
};

export default signalRMiddleware;

在我的 store.js 文件中

import signalRMiddleware from '../middlewares/signalRMiddleware';

...

createStore(rootReducer, {}, composeEnhancers(applyMiddleware(signalRMiddleware)));

2020 年 6 月更新 这就是我们现在使用新包 @microsoft/signalr https://stackoverflow.com/a/62162742/10232269 这样做的方式 这不是使用中间件方法。我们使用 Redux，但您不必使用 Redux 来使用此方法。

根据 Redux FAQ，websockets 和其他类似连接的正确位置是 Redux 中间件。

这是现有 websocket 中间件的列表。您可以查看其中几个的源代码，并很容易地了解如何实现您自己的自定义中间件：

中间件可以分派动作。这是一个套接字中间件可能是什么样子的示例，以及调度它侦听的操作：

const createMySocketMiddleware = (url) => {
    return storeAPI => {
        let socket = createMyWebsocket(url);

        socket.on("message", (message) => {
            storeAPI.dispatch({
                type : "SOCKET_MESSAGE_RECEIVED",
                payload : message
            });
        });

        return next => action => {
            if(action.type == "SEND_WEBSOCKET_MESSAGE") {
                socket.send(action.payload);
                return;
            }

            return next(action);
        }
    }
}

您需要将此中间件应用到您的 redux 商店

let store = createStore(
    some_reducer,
    applyMiddleware(createMySocketMiddleware)
)

稍后，在您的应用程序中。这是一个动作创建者

const sendSocketMessage = message => ({
    type : "SEND_WEBSOCKET_MESSAGE",
    payload : message
}

在你的组件中添加一个按钮以通过 websockets 调度一个动作

class MyComponent extends React.Component {
    handleClick = () => {
        this.props.sendSocketMessage("This goes to the server");
    }
}

export default connect(null, {sendSocketMessage})(MyComponent)