Automatically Reconnects to WebSocket and Dynamically Change Port Numbers

[adamseth2]

Context

RosLib does not manually connect to the WebSocket even though it is running. During the mission, connection might be lost and we want to establish a connection right away. Also for development and production, we have a total of 3 different ports we use and we want to make sure we automatically connect to the right one also easily.

Current Behavior

To reconnect to the websocket, we have to manually refresh the browser page. In the app.vue, have to manually comment out:

• Development: ws://localhost:9090
• Router: ws://192.168.0.145:9090
• Rover: ws://10.0.0.10:9090

How to Implement

Figure out how to restart websocket automatically , maybe setTimeout()? Add button/status to Nav bar (looking like the image below potentially) with the port number displayed. If clicked on, would cycle between the different port numbers

[uellenberg]

Partially implemented in #24. I'm trying to think of how to do the different addresses in a nice way. We could have three separate commands, dev, rover-dev, and rover, which set the address by environment variables.

[adamseth2]

Yeah, I realized its best too if that is too as the driver shouldn't really need to change WebSockets.

I attempted to do this for the refactoring PQ, but there was some problems with environmental variable and vue (not as easy as react sadly :/) , so i left it for another pq.

There should be 3 commands that change the environmental variable:

npm run local runs locally npm run router runs on router npm run rover runs on rover

The exact ports are in app.vue

[adamseth2]

Actually, due to we having a website now, it makes sense to make a UI, so the user can either connect to the rover or run it locally.