Skip to content

Instantly share code, notes, and snippets.

@CelliesProjects

CelliesProjects/index.html

Last active February 4, 2025 14:56
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save CelliesProjects/32a6520e89353d06656c51940258d027 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save CelliesProjects/32a6520e89353d06656c51940258d027 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. CelliesProjects revised this gist Feb 4, 2025. No changes.
  2. CelliesProjects revised this gist Feb 3, 2025. 1 changed file with 3 additions and 0 deletions.
    3 changes: 3 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -52,6 +52,9 @@ <h1>Aquacontrol index</h1>
    let ws;

    function createWebSocket() {
    if (document.visibilityState === 'hidden')
    return;

    if (ws && (ws.readyState === WebSocket.OPEN || ws.readyState === WebSocket.CONNECTING)) {
    console.log("WebSocket already exists");
    return;
  3. CelliesProjects revised this gist Feb 3, 2025. 1 changed file with 4 additions and 3 deletions.
    7 changes: 4 additions & 3 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -66,9 +66,10 @@ <h1>Aquacontrol index</h1>
    });

    ws.addEventListener('close', () => {
    setTimeout(() => {
    if (!ws || ws.readyState === WebSocket.CLOSED) createWebSocket();
    }, 500); // Small delay to avoid immediate reconnect issues
    if (ws) {
    ws = null; // Ensure a fresh instance
    setTimeout(createWebSocket, 500); // Delayed reconnect
    }
    });

    ws.addEventListener('message', (event) => {
  4. CelliesProjects revised this gist Feb 3, 2025. 1 changed file with 5 additions and 4 deletions.
    9 changes: 5 additions & 4 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -52,8 +52,8 @@ <h1>Aquacontrol index</h1>
    let ws;

    function createWebSocket() {
    if (ws && ws.readyState !== WebSocket.CLOSED) {
    console.log("WebSocket already exists, skipping creation.");
    if (ws && (ws.readyState === WebSocket.OPEN || ws.readyState === WebSocket.CONNECTING)) {
    console.log("WebSocket already exists");
    return;
    }

    @@ -66,8 +66,9 @@ <h1>Aquacontrol index</h1>
    });

    ws.addEventListener('close', () => {
    document.getElementById('connection-status').textContent = 'Disconnected';
    console.log('WebSocket disconnected');
    setTimeout(() => {
    if (!ws || ws.readyState === WebSocket.CLOSED) createWebSocket();
    }, 500); // Small delay to avoid immediate reconnect issues
    });

    ws.addEventListener('message', (event) => {
  5. CelliesProjects revised this gist Feb 3, 2025. 1 changed file with 5 additions and 0 deletions.
    5 changes: 5 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -52,6 +52,11 @@ <h1>Aquacontrol index</h1>
    let ws;

    function createWebSocket() {
    if (ws && ws.readyState !== WebSocket.CLOSED) {
    console.log("WebSocket already exists, skipping creation.");
    return;
    }

    ws = new ReconnectingWebSocket("ws://" + window.location.host + "/websocket");
    console.log("ws://" + window.location.host + "/websocket");

  6. CelliesProjects created this gist Feb 3, 2025.
    115 changes: 115 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,115 @@
    <!DOCTYPE html>
    <html lang="en">

    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Aquacontrol index</title>
    <!-- Include minified reconnecting-websocket library from https://github.com/joewalnes/reconnecting-websocket -->
    <script>!function (a, b) { "function" == typeof define && define.amd ? define([], b) : "undefined" != typeof module && module.exports ? module.exports = b() : a.ReconnectingWebSocket = b() }(this, function () { function a(b, c, d) { function l(a, b) { var c = document.createEvent("CustomEvent"); return c.initCustomEvent(a, !1, !1, b), c } var e = { debug: !1, automaticOpen: !0, reconnectInterval: 1e3, maxReconnectInterval: 3e4, reconnectDecay: 1.5, timeoutInterval: 2e3 }; d || (d = {}); for (var f in e) this[f] = "undefined" != typeof d[f] ? d[f] : e[f]; this.url = b, this.reconnectAttempts = 0, this.readyState = WebSocket.CONNECTING, this.protocol = null; var h, g = this, i = !1, j = !1, k = document.createElement("div"); k.addEventListener("open", function (a) { g.onopen(a) }), k.addEventListener("close", function (a) { g.onclose(a) }), k.addEventListener("connecting", function (a) { g.onconnecting(a) }), k.addEventListener("message", function (a) { g.onmessage(a) }), k.addEventListener("error", function (a) { g.onerror(a) }), this.addEventListener = k.addEventListener.bind(k), this.removeEventListener = k.removeEventListener.bind(k), this.dispatchEvent = k.dispatchEvent.bind(k), this.open = function (b) { h = new WebSocket(g.url, c || []), b || k.dispatchEvent(l("connecting")), (g.debug || a.debugAll) && console.debug("ReconnectingWebSocket", "attempt-connect", g.url); var d = h, e = setTimeout(function () { (g.debug || a.debugAll) && console.debug("ReconnectingWebSocket", "connection-timeout", g.url), j = !0, d.close(), j = !1 }, g.timeoutInterval); h.onopen = function () { clearTimeout(e), (g.debug || a.debugAll) && console.debug("ReconnectingWebSocket", "onopen", g.url), g.protocol = h.protocol, g.readyState = WebSocket.OPEN, g.reconnectAttempts = 0; var d = l("open"); d.isReconnect = b, b = !1, k.dispatchEvent(d) }, h.onclose = function (c) { if (clearTimeout(e), h = null, i) g.readyState = WebSocket.CLOSED, k.dispatchEvent(l("close")); else { g.readyState = WebSocket.CONNECTING; var d = l("connecting"); d.code = c.code, d.reason = c.reason, d.wasClean = c.wasClean, k.dispatchEvent(d), b || j || ((g.debug || a.debugAll) && console.debug("ReconnectingWebSocket", "onclose", g.url), k.dispatchEvent(l("close"))); var e = g.reconnectInterval * Math.pow(g.reconnectDecay, g.reconnectAttempts); setTimeout(function () { g.reconnectAttempts++, g.open(!0) }, e > g.maxReconnectInterval ? g.maxReconnectInterval : e) } }, h.onmessage = function (b) { (g.debug || a.debugAll) && console.debug("ReconnectingWebSocket", "onmessage", g.url, b.data); var c = l("message"); c.data = b.data, k.dispatchEvent(c) }, h.onerror = function (b) { (g.debug || a.debugAll) && console.debug("ReconnectingWebSocket", "onerror", g.url, b), k.dispatchEvent(l("error")) } }, 1 == this.automaticOpen && this.open(!1), this.send = function (b) { if (h) return (g.debug || a.debugAll) && console.debug("ReconnectingWebSocket", "send", g.url, b), h.send(b); throw "INVALID_STATE_ERR : Pausing to reconnect websocket" }, this.close = function (a, b) { "undefined" == typeof a && (a = 1e3), i = !0, h && h.close(a, b) }, this.refresh = function () { h && h.close() } } return a.prototype.onopen = function () { }, a.prototype.onclose = function () { }, a.prototype.onconnecting = function () { }, a.prototype.onmessage = function () { }, a.prototype.onerror = function () { }, a.debugAll = !1, a.CONNECTING = WebSocket.CONNECTING, a.OPEN = WebSocket.OPEN, a.CLOSING = WebSocket.CLOSING, a.CLOSED = WebSocket.CLOSED, a });</script>
    <style>
    body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    }

    .container {
    display: flex;
    gap: 10px;
    }

    .channel {
    width: 100px;
    height: 50px;
    background-color: lightblue;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 1px solid #000;
    }
    </style>

    </head>

    <body>
    <h1>Aquacontrol index</h1>
    <div class="container" id="channelContainer">
    <div class="channel">Channel 0</div>
    <div class="channel">Channel 1</div>
    <div class="channel">Channel 2</div>
    <div class="channel">Channel 3</div>
    <div class="channel">Channel 4</div>
    </div>
    <div id="connection-status">Connecting...</div>
    <script>
    let ws;

    function createWebSocket() {
    ws = new ReconnectingWebSocket("ws://" + window.location.host + "/websocket");
    console.log("ws://" + window.location.host + "/websocket");

    ws.addEventListener('open', () => {
    document.getElementById('connection-status').textContent = 'Connected';
    console.log('WebSocket connected');
    });

    ws.addEventListener('close', () => {
    document.getElementById('connection-status').textContent = 'Disconnected';
    console.log('WebSocket disconnected');
    });

    ws.addEventListener('message', (event) => {
    console.log('Message received:', event.data);
    // Handle incoming messages here
    });

    ws.addEventListener('error', (error) => {
    console.error('WebSocket error:', error);
    });
    }

    document.addEventListener('visibilitychange', () => {
    if (document.visibilityState === 'hidden') {
    // Close connection when page is hidden
    if (ws && ws.readyState === WebSocket.OPEN) {
    ws.close();
    }
    } else {
    // Reconnect when page becomes visible
    if (!ws || ws.readyState === WebSocket.CLOSED) {
    createWebSocket();
    }
    }
    });

    document.addEventListener("DOMContentLoaded", function () {
    document.querySelectorAll(".channel").forEach((div, index) => {
    div.addEventListener("click", function () {
    window.location = "/editor?channel=" + index;
    });
    });
    createWebSocket();
    });

    window.addEventListener('pageshow', (event) => {
    if (event.persisted) { // Page was restored from bfcache
    createWebSocket();
    }
    });

    window.addEventListener('beforeunload', () => {
    if (ws) {
    ws.close(1000, "Page unloading"); // Cleanly close with a normal closure code
    }
    });
    </script>
    </body>

    </html>