使用RTK Query关闭WebSocket后如何重新连接？

ymdaylpp 于 2023-10-20 发布在其他

关注(0)|答案(1)|浏览(120)

我正在尝试使用rtk查询建立WebSocket连接。我的代码在套接字关闭时创建一个新连接。当重新连接WebSocket时，useGetMessageQuery中的数据不会更新。

ChatApi代码：

let ws: WebSocket;
let interval: ReturnType<typeof setInterval>;
export const init = () => {
  ws = new WebSocket('ws://localhost:8080');
  ws.onopen = (message: Event) => {
    interval = setInterval(() => {
      ws.send(JSON.stringify({ type: 'keepAlive' }));
    }, 1000 * 15);
  };
  ws.onclose = (message: CloseEvent) => {
    interval && clearInterval(interval);
    setTimeout(() => {
      init();
    }, 1000 * 10);
  };
}

export const chatApi = createApi({
  baseQuery: fetchBaseQuery({ baseUrl: '/' }),
  endpoints: (build) => ({
    getMessages: build.query<any, any>({
      queryFn: () => ({ data: {} }),
      async onCacheEntryAdded(
        arg,
        { updateCachedData, cacheDataLoaded, cacheEntryRemoved }
      ) {
        try {
          await cacheDataLoaded
          const listener = (event: MessageEvent) => {
            const data = JSON.parse(event.data)
            updateCachedData((draft) => {
              draft.push(data)
            })
          }

          ws.addEventListener('message', listener)
        } catch {
        }
        await cacheEntryRemoved
        ws.close()
      },
    }),
  }),
})

export const { useGetMessagesQuery } = chatApi;

在组件中使用消息数据：

const { data: message } = useGetMessagesQuery();

useEffect(() => {
  init();
}, []);

useEffect(() => {
  console.log(message);
}, [message]);

当套接字重新连接时，是否有方法更新数据？或者当WebSocket关闭时，是否有其他方法可以使用rtk查询重新连接？

websocket

来源：https://stackoverflow.com/questions/77184212/how-to-reconnect-when-a-websocket-is-closed-with-rtk-query

1条答案

按热度按时间

fquxozlt1#

当WebSocket重新连接时，我重置了API状态，这起作用了。
这个方法对我有效。现在，即使在重新连接WebSocket之后，rtk-query的状态也会正常更改。
希望这个答案能帮助到别人。

ChatApi代码：

let ws: WebSocket;

export const init = (socket: WebSocket) => {
  ws = socket;
}

export const chatApi = createApi({
  baseQuery: fetchBaseQuery({ baseUrl: '/' }),
  endpoints: (build) => ({
    getMessages: build.query<any, any>({
      queryFn: () => ({ data: {} }),
      async onCacheEntryAdded(
        arg,
        { updateCachedData, cacheDataLoaded, cacheEntryRemoved }
      ) {
        try {
          await cacheDataLoaded
          const listener = (event: MessageEvent) => {
            const data = JSON.parse(event.data)
            updateCachedData((draft) => {
              draft.push(data)
            })
          }

          ws.addEventListener('message', listener)
        } catch {
        }
        await cacheEntryRemoved
        ws.close()
      },
    }),
  }),
})

export const { useGetMessagesQuery, useLazyGetMessageQuery } = chatApi;

在组件中使用消息数据：

export const SomeComponent = () => {
  const dispatch = useDispatch();
  const [getMessage, { data: message }] = chatApi.useLazyGetMessage();

  const initChat = () => {
    const ws = new WebSocket('ws://localhost:8080');

    ws.onopen = (message: Event) => {
      getMessage();
      interval = setInterval(() => {
        ws.send(JSON.stringify({ type: 'keepAlive' }));
      }, 1000 * 15);
    };
    ws.onclose = (message: CloseEvent) => {
      interval && clearInterval(interval);
      dispatch(chatApi.util.resetApiState());
      setTimeout(() => {
        initChat();
      }, 1000 * 10);
    };

    init(ws);
  };

  useEffect(() => {
    initChat();
  }, []);

  useEffect(() => {
    console.log(message);
  }, [message]);
};

赞(0）回复(0）举报 2023-10-20

我来回答

使用RTK Query关闭WebSocket后如何重新连接？

1条答案

相关问题

热门标签

最新问答