beremiz

SVGHMI: add automatic reconnection of websocket with 1s reconnection delay after first attempt.

2022-10-21, Edouard Tisserant
ff42600fddd7
Parents 7c427418396f
Children 61fa60130ad6
SVGHMI: add automatic reconnection of websocket with 1s reconnection delay after first attempt.
1 files changed, 73 insertions(+), 27 deletions(-)
  • +73 -27
    svghmi/svghmi.js
    • --- a/svghmi/svghmi.js Tue Oct 18 11:09:40 2022 +0200
    +++ b/svghmi/svghmi.js Fri Oct 21 10:39:43 2022 +0200
    @@ -23,13 +23,6 @@
    // Open WebSocket to relative "/ws" address
    var has_watchdog = window.location.hash == "#watchdog";
    -var ws_url =
    - window.location.href.replace(/^http(s?:\/\/[^\/]*)\/.*$/, 'ws$1/ws')
    - + '?mode=' + (has_watchdog ? "watchdog" : "multiclient");
    -
    -var ws = new WebSocket(ws_url);
    -ws.binaryType = 'arraybuffer';
    -
    const dvgetters = {
    INT: (dv,offset) => [dv.getInt16(offset, true), 2],
    BOOL: (dv,offset) => [dv.getInt8(offset, true), 1],
    @@ -98,7 +91,7 @@
    // Message reception handler
    // Hash is verified and HMI values updates resulting from binary parsing
    // are stored until browser can compute next frame, DOM is left untouched
    -ws.onmessage = function (evt) {
    +function ws_onmessage(evt) {
    let data = evt.data;
    let dv = new DataView(data);
    @@ -140,8 +133,10 @@
    hmi_hash_u8 = new Uint8Array(hmi_hash);
    +var ws = null;
    +
    function send_blob(data) {
    - if(data.length > 0) {
    + if(ws && data.length > 0) {
    ws.send(new Blob([hmi_hash_u8].concat(data)));
    };
    };
    @@ -199,6 +194,11 @@
    }
    }
    +function reset_subscription_periods() {
    + for(let index in subscriptions)
    + subscriptions[index][1] = 0;
    +}
    +
    if(has_watchdog){
    // artificially subscribe the watchdog widget to "/heartbeat" hmi variable
    // Since dispatch directly calls change_hmi_value,
    @@ -298,6 +298,10 @@
    function update_subscriptions() {
    let delta = [];
    + if(!ws)
    + // dont' change subscriptions if not connected
    + return;
    +
    for(let index in subscriptions){
    let widgets = subscribers(index);
    @@ -418,12 +422,13 @@
    }
    }
    -function prepare_svg() {
    - // prevents context menu from appearing on right click and long touch
    - document.body.addEventListener('contextmenu', e => {
    - toggleFullscreen();
    - e.preventDefault();
    - });
    +// prevents context menu from appearing on right click and long touch
    +document.body.addEventListener('contextmenu', e => {
    + toggleFullscreen();
    + e.preventDefault();
    +});
    +
    +function detach_detachables() {
    for(let eltid in detachable_elements){
    let [element,parent] = detachable_elements[eltid];
    @@ -572,24 +577,65 @@
    });
    }
    +// prepare SVG
    +apply_reference_frames();
    +init_widgets();
    +detach_detachables();
    +
    +// show main page
    +switch_page(default_page);
    +
    +var reconnect_delay = 0;
    +// var periodic_reconnect_timer;
    +
    // Once connection established
    -ws.onopen = function (evt) {
    - apply_reference_frames();
    - init_widgets();
    +function ws_onopen(evt) {
    + /*
    + // to force reconnect every hour
    + if(periodic_reconnect_timer){
    + window.clearTimeout(periodic_reconnect_timer);
    + }
    + periodic_reconnect_timer = window.setTimeout(() => {
    + ws.close();
    + periodic_reconnect_timer = null;
    + }, 3600*1000);
    + */
    +
    + // forget subscriptions remotely
    send_reset();
    - // show main page
    - prepare_svg();
    - switch_page(default_page);
    +
    + // forget earlier subscriptions locally
    + reset_subscription_periods();
    +
    + // update PLC about subscriptions and current page
    + switch_page();
    +
    + // at first try reconnect immediately
    + reconnect_delay = 1;
    };
    -ws.onclose = function (evt) {
    +function ws_onclose(evt) {
    + console.log("Connection closed. code:"+evt.code+" reason:"+evt.reason+" wasClean:"+evt.wasClean+" Reload in "+reconnect_delay+"ms.");
    + ws = null;
    + // reconect
    // TODO : add visible notification while waiting for reload
    - console.log("Connection closed. code:"+evt.code+" reason:"+evt.reason+" wasClean:"+evt.wasClean+" Reload in 10s.");
    - // TODO : re-enable auto reload when not in debug
    - //window.setTimeout(() => location.reload(true), 10000);
    - alert("Connection closed. code:"+evt.code+" reason:"+evt.reason+" wasClean:"+evt.wasClean+".");
    + window.setTimeout(create_ws, reconnect_delay);
    + reconnect_delay += 500;
    +};
    +
    +var ws_url =
    + window.location.href.replace(/^http(s?:\/\/[^\/]*)\/.*$/, 'ws$1/ws')
    + + '?mode=' + (has_watchdog ? "watchdog" : "multiclient");
    -};
    +function create_ws(){
    + ws = new WebSocket(ws_url);
    + ws.binaryType = 'arraybuffer';
    + ws.onmessage = ws_onmessage;
    + ws.onclose = ws_onclose;
    + ws.onopen = ws_onopen;
    +}
    +
    +create_ws()
    const xmlns = "http://www.w3.org/2000/svg";
    var edit_callback;