1- import React , { useEffect , useState , useCallback , useRef } from "react" ;
1+ import { useEffect , useState , useCallback , useRef } from "react" ;
22import { ChartPlotter } from "./ChartPlotter" ;
33import { namedVariablesMulti } from "./fakeMessagsGenerators" ;
44import { EOL , isEOL , MonitorSettings , PluggableMonitor } from "./utils" ;
55
66export default function App ( ) {
77 const [ config , setConfig ] = useState < Partial < MonitorSettings | null > > ( null ) ;
8+ const [ websocketIsConnected , setWebsocketIsConnected ] = useState ( false ) ;
89
910 const websocket = useRef < WebSocket | null > ( null ) ;
1011
@@ -51,7 +52,7 @@ export default function App() {
5152 ) ;
5253
5354 // as soon as the wsPort is set, create a websocket connection
54- React . useEffect ( ( ) => {
55+ useEffect ( ( ) => {
5556 if ( ! config ?. monitorUISettings ?. wsPort ) {
5657 return ;
5758 }
@@ -62,47 +63,52 @@ export default function App() {
6263 websocket . current = new WebSocket (
6364 `ws://localhost:${ config ?. monitorUISettings ?. wsPort }
6465 ) ;
65- websocket . current . onmessage = ( res : any ) => {
66- const message : PluggableMonitor . Protocol . Message = JSON . parse ( res . data ) ;
67- onMiddlewareMessage ( message ) ;
68- } ;
69- const wsCurrent = websocket . current ;
66+ setWebsocketIsConnected ( true ) ;
7067
68+ const wsCurrent = websocket . current ;
7169 return ( ) => {
7270 console . log ( "closing ws connection" ) ;
7371 wsCurrent . close ( ) ;
7472 } ;
75- // eslint-disable-next-line react-hooks/exhaustive-deps
7673 } , [ config ?. monitorUISettings ?. wsPort ] ) ;
7774
75+ useEffect ( ( ) => {
76+ if ( websocketIsConnected && websocket . current ) {
77+ websocket . current . onmessage = ( res : any ) => {
78+ const message : PluggableMonitor . Protocol . Message = JSON . parse ( res . data ) ;
79+ onMiddlewareMessage ( message ) ;
80+ } ;
81+ }
82+ } , [ websocketIsConnected , onMiddlewareMessage ] ) ;
83+ 7884 // at bootstrap read params from the URL
7985 useEffect ( ( ) => {
80- const urlParams = new URLSearchParams ( window . location . search ) ;
81- 82- const urlSettings : MonitorSettings = {
83- pluggableMonitorSettings : {
84- baudrate : {
85- id : "baudrate" ,
86- label : "Baudrate" ,
87- type : "enum" ,
88- values : ( urlParams . get ( "baudrates" ) || "" ) . split ( "," ) ,
89- selectedValue : urlParams . get ( "baudrate" ) || "9600" ,
86+ if ( config === null ) {
87+ const urlParams = new URLSearchParams ( window . location . search ) ;
88+ 89+ const urlSettings : MonitorSettings = {
90+ pluggableMonitorSettings : {
91+ baudrate : {
92+ id : "baudrate" ,
93+ label : "Baudrate" ,
94+ type : "enum" ,
95+ values : ( urlParams . get ( "baudrates" ) || "" ) . split ( "," ) ,
96+ selectedValue : urlParams . get ( "baudrate" ) || "9600" ,
97+ } ,
9098 } ,
91- } ,
92- monitorUISettings : {
93- lineEnding : isEOL ( urlParams . get ( "lineEnding" ) )
94- ? ( urlParams . get ( "lineEnding" ) as EOL )
95- : "\r\n" ,
96- darkTheme : urlParams . get ( "darkTheme" ) === "true" ,
97- wsPort : parseInt ( urlParams . get ( "wsPort" ) || "3030" ) ,
98- interpolate : urlParams . get ( "interpolate" ) === "true" ,
99- serialPort : urlParams . get ( "serialPort" ) || "/serial/port/address" ,
100- connected : urlParams . get ( "connected" ) === "true" ,
101- generate : urlParams . get ( "generate" ) === "true" ,
102- } ,
103- } ;
99+ monitorUISettings : {
100+ lineEnding : isEOL ( urlParams . get ( "lineEnding" ) )
101+ ? ( urlParams . get ( "lineEnding" ) as EOL )
102+ : "\r\n" ,
103+ darkTheme : urlParams . get ( "darkTheme" ) === "true" ,
104+ wsPort : parseInt ( urlParams . get ( "wsPort" ) || "3030" ) ,
105+ interpolate : urlParams . get ( "interpolate" ) === "true" ,
106+ serialPort : urlParams . get ( "serialPort" ) || "/serial/port/address" ,
107+ connected : urlParams . get ( "connected" ) === "true" ,
108+ generate : urlParams . get ( "generate" ) === "true" ,
109+ } ,
110+ } ;
104111
105- if ( config === null ) {
106112 onMiddlewareMessage ( {
107113 command :
108114 PluggableMonitor . Protocol . MiddlewareCommand . ON_SETTINGS_DID_CHANGE ,
0 commit comments