Added maintenance page and added a latency check for the websocket.

159a1f31 · Sebastian Mohr · f17777f8 · 159a1f31 · 159a1f31 · 159a1f31
Commit 159a1f31 authored 10 months ago by Sebastian Mohr
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -20,6 +20,7 @@
    -  Allows to align snippet to top, center, bottom, left, center, right of page
 -  (Feature) The page move tool now has auto fit width and height buttons
    -  This will automatically fit the page to the width or height of your screen
+-  (Feature) Users are now notified on bad connections
 -  (Dev) We now partially use app router instead of pages router
    - smaller bundle size
    - faster page transitions
@@ -31,6 +32,7 @@
    - catch missing env parameters early!
 -  (Dev) Added BackgroundTypes database service
 -  (Dev) Added dedicated server for email sending 
+-  (Dev) Maintenance page handler, if the app is down you will know now
 -  (Fix) Fixed canvas render width/height issue on devices with devicePixelRatio!=1
    - see [#74](https://gitlab.gwdg.de/irp/snip/-/issues/74)
 -  (Fix) Verify/Reset Password emails look a bit better now (css added)

--- a/apps/fullstack/components/context/useSocketContext.tsx
+++ b/apps/fullstack/components/context/useSocketContext.tsx
@@ -15,12 +15,18 @@ export interface OnlineUser {
    self?: boolean;
 }

+interface Latency {
+    total: number; //client->server->client
+    server_received: number; //client->server
+}
+
 interface SocketContext {
    socket: Socket;
    isConnected: boolean;
    onlineUsers: Map<ID, OnlineUser>;
    pageToOnlineUsers: Map<ID, OnlineUser[]>;
    book_id: ID;
+    latency: Latency;
 }

 const SocketContext = createContext<SocketContext>({
@@ -29,6 +35,10 @@ const SocketContext = createContext<SocketContext>({
    onlineUsers: new Map(),
    pageToOnlineUsers: new Map(),
    book_id: null,
+    latency: {
+        total: 0,
+        server_received: 0,
+    },
 });

 /** Creates a socket connection to the main
@@ -76,6 +86,8 @@ export function SocketContextProvider({
        });
    });

+    const [latency, setLatency] = useState<Latency>();
+
    // Create the socket
    useEffect(() => {
        // Create the socket
@@ -152,14 +164,28 @@ export function SocketContextProvider({
            });
        }

+        function latencyCheck() {
+            const start = performance.now();
+            socket.emit("ping", (received: number) => {
+                const total = performance.now() - start;
+                setLatency({
+                    total,
+                    server_received: received - start,
+                });
+            });
+        }
+
        socket.on("users:disconnect", onUserDisconnect);
        socket.on("users:update", onUserUpdate);
        socket.on("users:connect", onUserUpdate);

+        const interval = setInterval(latencyCheck, 4000); //every 4 seconds
+
        return () => {
            socket.off("users:disconnect", onUserDisconnect);
            socket.off("users:update", onUserUpdate);
            socket.off("users:connect", onUserUpdate);
+            clearInterval(interval);
        };
    }, [socket, isConnected]);

@@ -171,6 +197,7 @@ export function SocketContextProvider({
                onlineUsers,
                book_id,
                pageToOnlineUsers,
+                latency,
            }}
        >
            {children}

--- a/apps/nginx/static/maintenance/index.html
+++ b/apps/nginx/static/maintenance/index.html
+<!doctype html>
+<title>Site Maintenance</title>
+<style>
+    body {
+        text-align: center;
+        padding: 150px;
+    }
+
+    h1 {
+        font-size: 50px;
+    }
+
+    body {
+        font: 20px Helvetica, sans-serif;
+        color: #333;
+    }
+
+    article {
+        display: block;
+        text-align: left;
+        width: 650px;
+        margin: 0 auto;
+    }
+
+    a {
+        color: #dc8100;
+        text-decoration: none;
+    }
+
+    a:hover {
+        color: #333;
+        text-decoration: none;
+    }
+</style>
+<article>
+    <h1>We&rsquo;ll be back soon!</h1>
+    <div>
+        <p>Sorry for the inconvenience but we&rsquo;re performing some maintenance at the moment. If you need to you can
+            always <a href="mailto:uprpsnip@gwdg.de">contact us</a>, otherwise we&rsquo;ll be back online shortly!</p>
+        <p>&mdash; Your Snip Team</p>
+    </div>
+</article>
\ No newline at end of file
--- a/apps/socket/src/prefixes/setupNamespace.ts
+++ b/apps/socket/src/prefixes/setupNamespace.ts
@@ -37,6 +37,11 @@ export function setupNamespaces(server: Server) {
            server,
        };

+
+        book_nsp.on("ping", (callback: (received: number) => void) => {
+            callback?.(performance.now());
+        });
+
        /** Setup all function calls prefixed with pages
         * /book-[book_id]/pages:[function]/
         */