当切换到不同的选项卡时,WebSocket数据传输的频率是否会延迟?

2izufjch  于 2024-01-09  发布在  其他
关注(0)|答案(1)|浏览(324)

我有一个react应用程序,当按下按钮时,我每30毫秒向WebSocket发送一次数据。我在上下文中有WebSocket连接,这样即使我在不同的页面上,我也可以继续发送数据。但是当我切换标签时,(因为我有另一个应用程序在不同的标签上同时运行,我需要在中间使用该应用程序),传输到WebSocket的数据似乎被延迟了。为什么会这样?有什么方法可以保持以相同的频率发送数据,即使我在不同的选项卡上?
这是我的后端代码-

  1. const server = new WebSocket.Server({ port: 8090 });
  2. server.on("connection", (socket) => {
  3. socket.on("message", (message) => {
  4. console.log(`Received: ${message}`);
  5. });
  6. });

字符串
这是我的React应用程序-

  1. import React, { createContext, useContext, useEffect, useState } from "react";
  2. const WebSocketContext = createContext();
  3. export function useWebSocket() {
  4. return useContext(WebSocketContext);
  5. }
  6. export function WebSocketProvider({ children }) {
  7. const [socket, setSocket] = useState(null);
  8. const [connected, setConnected] = useState(false);
  9. const [robotControls, setRobotControls] = useState(false);
  10. const webSocketURL =
  11. import.meta.env.VITE_ENV == "UXV"
  12. ? "ws://localhost:8090/chat"
  13. : "ws://localhost:8090";
  14. useEffect(() => {
  15. // Connect to the WebSocket server
  16. const ws = new WebSocket(webSocketURL);
  17. ws.addEventListener("open", () => {
  18. console.log("Connected to the WebSocket server");
  19. setConnected(true);
  20. setSocket(ws);
  21. });
  22. return () => {
  23. // Clean up WebSocket connection when component unmounts
  24. ws.close();
  25. };
  26. }, []);
  27. useEffect(() => {
  28. let interval1;
  29. let i = 0;
  30. if (robotControls) {
  31. interval1 = setInterval(() => {
  32. const time = new Date().getMilliseconds();
  33. //console.log(time)
  34. socket.send(time);
  35. }, 30);
  36. }
  37. return () => {
  38. if (interval1) {
  39. clearInterval(interval1);
  40. }
  41. };
  42. }, [robotControls]);
  43. const contextValue = {
  44. connected,
  45. socket,
  46. sendMessage,
  47. robotControls,
  48. setRobotControls
  49. };
  50. return (
  51. <WebSocketContext.Provider value={contextValue}>
  52. {children}
  53. </WebSocketContext.Provider>
  54. );
  55. }


我尝试了socketio库,看看它是否有任何区别,但我得到了同样的结果。
编辑:我已经编辑了上面的前端代码。我使用的节点服务器只是一个测试服务器,我用它来排除WebSocket连接的故障。
为了提供更多的背景,我正在开发一个使用react的前端离线应用程序,我使用这个应用程序与控制器来控制/移动机器人。后端(由他人开发)对于这个机器人期望控制器数据,我计划通过网络套接字发送控制机器人。我发送数据与30毫秒的测试。我还没有测试的代码与实际的后端服务器。有另一个Web应用程序与我的应用程序一起工作,这就是为什么我需要我的应用程序通过Websockets发送数据,即使我在其他应用程序上.我希望这是有意义的.

vsmadaxz

vsmadaxz1#

在大多数浏览器上,非活动标签的执行优先级较低,这可能会影响JavaScript计时器。在这种情况下,使用Web Workers API将是解决方案之一。
我通过在任何JavaScript代码之前添加这个脚本来解决这个问题。(github.com/turuslan/HackTimer)。这是一个使用webworker的解决方案,它覆盖了setworker,clearworker,setInterval,clearInterval函数。

相关问题