Team2890/PhotonVision
4
0
Fork 0
mirror of https://github.com/PhotonVision/photonvision synced 2026-06-24 01:31:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve websocket reconnect robustness (#706)

Browse Source 
Replace with stripped down NT4 client 

Co-authored-by: Mohammad Durrani <46766905+mdurrani808@users.noreply.github.com>
This commit is contained in:
Matt
2023-01-06 17:25:11 -08:00
committed by GitHub
parent 8117b5814b
commit 5e977445ee
7 changed files with 109 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
photon-client/src/App.vue
View File

@@ -134,7 +134,7 @@
<script>
import Logs from "./views/LogsView"
// import {mapState} from "vuex";
import { ReconnectingWebsocket } from "./plugins/ReconnectingWebsocket.js"
export default {
name: 'App',
@@ -145,7 +145,8 @@ export default {
// Used so that we can switch back to the previously selected pipeline after camera calibration
previouslySelectedIndices: [],
timer: undefined,
teamNumberDialog: true
teamNumberDialog: true,
websocket: null,
}),
computed: {
needsTeamNumberSet: {
@@ -190,15 +191,12 @@ export default {
}
});
this.recreateWebsocket();
},
methods: {
recreateWebsocket() {
const wsDataURL = 'ws://' + this.$address + '/websocket_data';
let socket = new WebSocket(wsDataURL);
socket.binaryType = "arraybuffer";
const wsDataURL = 'ws://' + this.$address + '/websocket_data';
this.websocket = new ReconnectingWebsocket(
wsDataURL,
socket.onmessage = (event) => {
// On data in
(event) => {
try {
let message = this.$msgPack.decode(event.data);
for (let prop in message) {
@@ -210,31 +208,21 @@ export default {
console.log(event)
console.error('error: ' + JSON.stringify(event.data) + " , " + error);
}
};
},
socket.onerror = () => {
socket.close();
this.$store.commit("backendConnected", false)
};
// on connect
(event) => {
event; this.$store.commit("backendConnected", true);
this.$store.state.connectedCallbacks.forEach(it => it());
},
// on disconnect
(event) => { event; this.$store.commit("backendConnected", false) }
);
socket.onopen = () => {
clearInterval(this.timerId);
socket.onclose = () => {
this.$store.commit("backendConnected", false)
this.timerId = setInterval(() => {
this.recreateWebsocket();
}, 1000);
};
this.$store.commit("backendConnected", true)
this.$store.state.connectedCallbacks.forEach(it => it())
};
this.$store.commit("websocket", socket);
},
this.$store.commit("websocket", this.websocket);
},
methods: {
handleMessage(key, value) {
if (key === "logMessage") {
this.logMessage(value["logMessage"], value["logLevel"]);

10
photon-client/src/mixins/global/dataHandleMixin.js
View File

@@ -2,14 +2,14 @@ export const dataHandleMixin = {
methods: {
handleInput(key, value) {
let msg = this.$msgPack.encode({[key]: value});
this.$store.state.websocket.send(msg);
this.$store.state.websocket.ws.send(msg);
},
handleInputWithIndex(key, value, cameraIndex = this.$store.getters.currentCameraIndex) {
let msg = this.$msgPack.encode({
[key]: value,
["cameraIndex"]: cameraIndex,
});
this.$store.state.websocket.send(msg);
this.$store.state.websocket.ws.send(msg);
},
handleData(val) {
this.handleInput(val, this[val]);
@@ -22,7 +22,7 @@ export const dataHandleMixin = {
["cameraIndex"]: this.$store.getters.currentCameraIndex
}
});
this.$store.state.websocket.send(msg);
this.$store.state.websocket.ws.send(msg);
this.$emit('update')
},
handlePipelineUpdate(key, val) {
@@ -32,7 +32,7 @@ export const dataHandleMixin = {
["cameraIndex"]: this.$store.getters.currentCameraIndex
}
});
this.$store.state.websocket.send(msg);
this.$store.state.websocket.ws.send(msg);
this.$emit('update')
},
handleTruthyPipelineData(val) {
@@ -42,7 +42,7 @@ export const dataHandleMixin = {
["cameraIndex"]: this.$store.getters.currentCameraIndex
}
});
this.$store.state.websocket.send(msg);
this.$store.state.websocket.ws.send(msg);
this.$emit('update')
},
rollback(val, e) {

74
photon-client/src/plugins/ReconnectingWebsocket.js Normal file
View File

@@ -0,0 +1,74 @@
/**
* Auto-reconnecting Websocket, a stripped down version of the NT4 client from
* https://raw.githubusercontent.com/wpilibsuite/NetworkTablesClients/2f8d378ac08d5ca703d590cfb019fc4af062db89/nt4/js/src/nt4.js
*/
export class ReconnectingWebsocket {
constructor(serverAddr,
onDataIn_in,
onConnect_in,
onDisconnect_in) {
this.onDataIn = onDataIn_in;
this.onConnect = onConnect_in;
this.onDisconnect = onDisconnect_in;
// WS Connection State (with defaults)
this.serverAddr = serverAddr;
this.serverConnectionActive = false;
//Trigger the websocket to connect automatically
this.ws_connect();
}
//////////////////////////////////////////////////////////////
// Websocket connection Maintenance
ws_onOpen() {
// Set the flag allowing general server communication
this.serverConnectionActive = true;
console.log("[WebSocket] Connected!");
// User connection-opened hook
this.onConnect();
}
ws_onClose(e) {
//Clear flags to stop server communication
this.ws = null;
this.serverConnectionActive = false;
// User connection-closed hook
this.onDisconnect();
console.log('[WebSocket] Socket is closed. Reconnect will be attempted in 0.5 second.', e.reason);
setTimeout(this.ws_connect.bind(this), 500);
if (!e.wasClean) {
console.error('Socket encountered error!');
}
}
ws_onError(e) {
console.log("[WebSocket] Websocket error - " + e.toString());
this.ws.close();
}
ws_onMessage(e) {
this.onDataIn(e);
}
ws_connect() {
this.ws = new WebSocket(this.serverAddr);
this.ws.binaryType = "arraybuffer";
this.ws.onopen = this.ws_onOpen.bind(this);
this.ws.onmessage = this.ws_onMessage.bind(this);
this.ws.onclose = this.ws_onClose.bind(this);
this.ws.onerror = this.ws_onError.bind(this);
console.log("[WebSocket] Starting...");
}
}
export default { ReconnectingWebsocket }

121
photon-client/src/plugins/objectDiff.js
View File

@@ -1,121 +0,0 @@
//https://gomakethings.com/getting-the-differences-between-two-objects-with-vanilla-js/
export const diff = function (obj1, obj2) {
// Make sure an object to compare is provided
if (!obj2 || Object.prototype.toString.call(obj2) !== '[object Object]') {
return obj1;
}
//
// Variables
//
let diffs = {};
let key;
//
// Methods
//
/**
* Check if two arrays are equal
* @param {Array} arr1 The first array
* @param {Array} arr2 The second array
* @return {Boolean} If true, both arrays are equal
*/
const arraysMatch = function (arr1, arr2) {
// Check if the arrays are the same length
if (arr1.length !== arr2.length) return false;
// Check if all items exist and are in the same order
for (let i = 0; i < arr1.length; i++) {
if (arr1[i] !== arr2[i]) return false;
}
// Otherwise, return true
return true;
};
/**
* Compare two items and push non-matches to object
* @param {*} item1 The first item
* @param {*} item2 The second item
* @param {String} key The key in our object
*/
const compare = function (item1, item2, key) {
// Get the object type
let type1 = Object.prototype.toString.call(item1);
let type2 = Object.prototype.toString.call(item2);
// If type2 is undefined it has been removed
if (type2 === '[object Undefined]') {
diffs[key] = null;
return;
}
// If items are different types
if (type1 !== type2) {
diffs[key] = item2;
return;
}
// If an object, compare recursively
if (type1 === '[object Object]') {
let objDiff = diff(item1, item2);
if (Object.keys(objDiff).length > 1) {
diffs[key] = objDiff;
}
return;
}
// If an array, compare
if (type1 === '[object Array]') {
if (!arraysMatch(item1, item2)) {
diffs[key] = item2;
}
return;
}
// Else if it's a function, convert to a string and compare
// Otherwise, just compare
if (type1 === '[object Function]') {
if (item1.toString() !== item2.toString()) {
diffs[key] = item2;
}
} else {
if (item1 !== item2) {
diffs[key] = item2;
}
}
};
//
// Compare our objects
//
// Loop through the first object
for (key in obj1) {
if (obj1.hasOwnProperty(key)) {
compare(obj1[key], obj2[key], key);
}
}
// Loop through the second object and find missing items
for (key in obj2) {
if (obj2.hasOwnProperty(key)) {
if (!obj1[key] && obj1[key] !== obj2[key] ) {
diffs[key] = obj2[key];
}
}
}
// Return the object of differences
return diffs;
};

2
photon-client/src/views/CamerasView.vue
View File

@@ -676,7 +676,7 @@ export default {
console.log("starting calibration with index " + calData.videoModeIndex);
}
this.$store.commit('currentPipelineIndex', -2);
this.$store.state.websocket.send(this.$msgPack.encode(data));
this.$store.state.websocket.ws.send(this.$msgPack.encode(data));
},
sendCalibrationFinish() {
console.log("finishing calibration for index " + this.$store.getters.currentCameraIndex);

10
photon-client/src/views/PipelineView.vue
View File

@@ -35,7 +35,7 @@
>
<span class="pr-1">Processing @ {{ Math.round($store.state.pipelineResults.fps) }}&nbsp;FPS &ndash;</span>
<span v-if="fpsTooLow && !$store.getters.currentPipelineSettings.inputShouldShow && $store.getters.pipelineType == 2">HSV thresholds are too broad; narrow them for better performance</span>
<span v-else-if="$fpsTooLow && getters.currentCameraSettings.inputShouldShow">stop viewing the raw stream for better performance</span>
<span v-else-if="fpsTooLow && getters.currentCameraSettings.inputShouldShow">stop viewing the raw stream for better performance</span>
<span v-else>{{ Math.min(Math.round($store.state.pipelineResults.latency), 9999) }} ms latency</span>
</v-chip>
<v-switch
@@ -446,7 +446,13 @@ export default {
fpsTooLow: {
get() {
// For now we only show the FPS is too low warning when GPU acceleration is enabled, because we don't really trust the presented video modes otherwise
return this.$store.state.pipelineResults.fps - this.$store.getters.currentVideoFormat.fps < -5 && this.$store.state.pipelineResults.fps !== 0 && !this.$store.getters.isDriverMode && this.$store.state.settings.general.gpuAcceleration;
const currFPS = this.$store.state.pipelineResults.fps;
const targetFPS = this.$store.getters.currentVideoFormat.fps;
const driverMode = this.$store.getters.isDriverMode;
const gpuAccel = this.$store.state.settings.general.gpuAcceleration === true;
const isReflective = this.$store.getters.pipelineType === 2;
return (currFPS - targetFPS) < -5 && this.$store.state.pipelineResults.fps !== 0 && !driverMode && gpuAccel && isReflective;
}
},
latency: {

2
photon-client/src/views/PipelineViews/ThresholdTab.vue
View File

@@ -247,7 +247,7 @@ export default {
'cameraIndex': this.$store.state.currentCameraIndex
}
});
this.$store.state.websocket.send(msg);
this.$store.state.websocket.ws.send(msg);
this.$emit('update');
}
},