Question

我正在使用WebSocket开发无状态打字稿后端。我基于dev.io tutorial创建了一个SocketMiddleware作为中间件来实现我的redux状态。来自socket.send()的第一条onopen消息运行正常。但是，我无法使用onmessage调度来触发后续的SEND_MSG。

后端显示它收到了log，但客户端没有收到它。我确定connection_id已正确设置

const socketMiddleware = () => {
  let socket = null;

  const onOpen = (store) => (event) => {
    store.dispatch({ type: "WS_CONNECTED" });
  };

  const onClose = (store) => () => {
    store.dispatch({ type: "WS_DISCONNECTED" });
  };

  const onMessage = (store) => (message) => {
    console.log("message received @middleware, ", message.data);
    const payload = JSON.parse(message.data);
    switch (payload.action) {
      case "get_connection_id":
        const { connectionId } = payload;
        store.dispatch({
          type: "UPDATE_MY_CONNECTION_ID",
          payload: { myConnectionId: connectionId },
        });
        break;
      case "join_room_socket":
        const { match_id, players, connectionIdArr } = payload;
        if (match_id) {
          store.dispatch({
            type: "UPDATE_ROOM",
            payload: {
              players: players,
              match_id: match_id,
              connectionIdArr: connectionIdArr,
            },
          });
        }
        break;
      case "broadcast_action":
        const { move } = body;
        store.dispatch({
          type: "UPDATE_GAME_STATE",
          payload: { move: move },
        });
    }
  };
  return (store) => (next) => (action) => {
    switch (action.type) {
      case "WS_CONNECT":
        if (socket !== null) socket.close();
        socket = new WebSocket(process.env.WSS_ENDPOINT);
        socket.onmessage = onMessage(store);
        socket.onclose = onClose(store);
        socket.onopen = onOpen(store);
        break;
      case "WS_CONNECTED":
        console.log("WebSocket client is connected");
        socket.send(JSON.stringify({ action: "get_connection_id" }));
      case "WS_DISCONNECTED":
        console.log("WebSocket client is disconnected");
      case "SEND_MSG":
        console.log("sending a message", action);
        socket.send(JSON.stringify({ ...action.payload }));
      default:
        console.log("the next action:", action);
        return next(action);
    }
  };
};

export default socketMiddleware();

我的redux商店

...
const persistConfig = {
  key: "root",
  storage: AsyncStorage,
};

const persistedReducer = persistReducer(persistConfig, reducer);

const store = createStore(
  persistedReducer,
  compose(applyMiddleware(reduxThunk, wsMiddleware))
);

我的后端：

  joinRoomSocket: (data) => {
    const body = JSON.parse(data.body);
    body.connectionIdArr.map((connectionId) => {
      const endpoint = `${data.requestContext.domainName}/${data.requestContext.stage}`;
      const apigwManagementApi = new AWS.ApiGatewayManagementApi({
        apiVersion: "2018-11-29",
        endpoint,
      });
      const params = {
        ConnectionId: connectionId,
        Data: JSON.stringify(body),
      };
      return apigwManagementApi.postToConnection(params).promise();
    });
  },

Answer 1

您指的是服务器还是客户端？如果您指的是客户端的onMessage回调。为此，您需要使用websocket.send（'text message'）从服务器发送一些内容。

为使客户端在onmessage事件上接收消息，服务器需要发送数据。这是流程：

Client ws.onsend('abc') ----------------> Server ws.onmessage(data)
Server ws.onsend('abc') ----------------> Client ws.onmessage(data)```

调用onsend时不会触发WebSocket onmessage

1 个答案: