WebSocket onmessage is not triggered when onsend is called - react-native

Question

I am developing a stateless typescript backend with WebSocket. I created a SocketMiddleware as a middleware to my redux state based on dev.io tutorial. The first socket.send() message from onopen works fine. However, I can't trigger the subsequent onmessage using SEND_MSG dispatch.
The backend shows that it receives a log but it is not received by the clients. I am sure that the connection_id is already set correctly
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();
my redux store
...
const persistConfig = {
key: "root",
storage: AsyncStorage,
};
const persistedReducer = persistReducer(persistConfig, reducer);
const store = createStore(
persistedReducer,
compose(applyMiddleware(reduxThunk, wsMiddleware))
);
my backend side:
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

Which onmessage are you referring to server or client? If you are referring to onMessage callback of client. For this you need to send something from the server using websocket.send('text message').
For client to receive message on onmessage event, server needs to send data.
Here is the flow:
Client ws.onsend('abc') ----------------> Server ws.onmessage(data)
Server ws.onsend('abc') ----------------> Client ws.onmessage(data)```