我有一个react应用程序,当按下按钮时,我每30毫秒向WebSocket发送一次数据。我在上下文中有WebSocket连接,这样即使我在不同的页面上,我也可以继续发送数据。但是当我切换标签时,(因为我有另一个应用程序在不同的标签上同时运行,我需要在中间使用该应用程序),传输到WebSocket的数据似乎被延迟了。为什么会这样?有什么方法可以保持以相同的频率发送数据,即使我在不同的选项卡上?
这是我的后端代码-
const server = new WebSocket.Server({ port: 8090 });
server.on("connection", (socket) => {
socket.on("message", (message) => {
console.log(`Received: ${message}`);
});
});
字符串
这是我的React应用程序-
import React, { createContext, useContext, useEffect, useState } from "react";
const WebSocketContext = createContext();
export function useWebSocket() {
return useContext(WebSocketContext);
}
export function WebSocketProvider({ children }) {
const [socket, setSocket] = useState(null);
const [connected, setConnected] = useState(false);
const [robotControls, setRobotControls] = useState(false);
const webSocketURL =
import.meta.env.VITE_ENV == "UXV"
? "ws://localhost:8090/chat"
: "ws://localhost:8090";
useEffect(() => {
// Connect to the WebSocket server
const ws = new WebSocket(webSocketURL);
ws.addEventListener("open", () => {
console.log("Connected to the WebSocket server");
setConnected(true);
setSocket(ws);
});
return () => {
// Clean up WebSocket connection when component unmounts
ws.close();
};
}, []);
useEffect(() => {
let interval1;
let i = 0;
if (robotControls) {
interval1 = setInterval(() => {
const time = new Date().getMilliseconds();
//console.log(time)
socket.send(time);
}, 30);
}
return () => {
if (interval1) {
clearInterval(interval1);
}
};
}, [robotControls]);
const contextValue = {
connected,
socket,
sendMessage,
robotControls,
setRobotControls
};
return (
<WebSocketContext.Provider value={contextValue}>
{children}
</WebSocketContext.Provider>
);
}
型
我尝试了socketio库,看看它是否有任何区别,但我得到了同样的结果。
编辑:我已经编辑了上面的前端代码。我使用的节点服务器只是一个测试服务器,我用它来排除WebSocket连接的故障。
为了提供更多的背景,我正在开发一个使用react的前端离线应用程序,我使用这个应用程序与控制器来控制/移动机器人。后端(由他人开发)对于这个机器人期望控制器数据,我计划通过网络套接字发送控制机器人。我发送数据与30毫秒的测试。我还没有测试的代码与实际的后端服务器。有另一个Web应用程序与我的应用程序一起工作,这就是为什么我需要我的应用程序通过Websockets发送数据,即使我在其他应用程序上.我希望这是有意义的.
1条答案
按热度按时间vsmadaxz1#
在大多数浏览器上,非活动标签的执行优先级较低,这可能会影响JavaScript计时器。在这种情况下,使用Web Workers API将是解决方案之一。
我通过在任何JavaScript代码之前添加这个脚本来解决这个问题。(github.com/turuslan/HackTimer)。这是一个使用webworker的解决方案,它覆盖了setworker,clearworker,setInterval,clearInterval函数。