docs: add example with connection state recovery

socketio · Sep 20, 2023 · ccbb4c0 · ccbb4c0
1 parent d744fda
commit ccbb4c0
Show file tree

Hide file tree

Showing 8 changed files with 255 additions and 0 deletions.
diff --git a/examples/connection-state-recovery-example/README.md b/examples/connection-state-recovery-example/README.md
@@ -0,0 +1,25 @@
+# Example with connection state recovery
+
+This example shows how to use the [Connection state recovery feature](https://socket.io/docs/v4/connection-state-recovery).
+
+![Video of the example](assets/csr.gif)
+
+## How to use
+
+```shell
+# choose your module syntax (either ES modules or CommonJS)
+$ cd esm/
+
+# install the dependencies
+$ npm i
+
+# start the server
+$ node index.js
+```
+
+And point your browser to `http://localhost:3000`.
+
+You can also run this example directly in your browser on:
+
+- [CodeSandbox](https://codesandbox.io/p/sandbox/github/socketio/socket.io/tree/main/examples/connection-state-recovery-example/esm?file=index.js)
+- [StackBlitz](https://stackblitz.com/github/socketio/socket.io/tree/main/examples/connection-state-recovery-example/esm?file=index.js)
diff --git a/examples/connection-state-recovery-example/assets/csr.gif b/examples/connection-state-recovery-example/assets/csr.gif
diff --git a/examples/connection-state-recovery-example/cjs/index.html b/examples/connection-state-recovery-example/cjs/index.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Connection state recovery | Socket.IO</title>
+  </head>
+  <body>
+    <p>Status: <span id="connectionStatus">disconnected</span></p>
+    <p>Recovered? <span id="recoveryStatus">-</span></p>
+
+    <p>Latest messages:</p>
+    <ul id="messages"></ul>
+
+    <script src="/socket.io/socket.io.js"></script>
+    <script>
+      const $connectionStatus = document.getElementById("connectionStatus");
+      const $recoveryStatus = document.getElementById("recoveryStatus");
+      const $messages = document.getElementById("messages");
+
+      const socket = io({
+        reconnectionDelay: 5000 // 1000 by default
+      });
+
+      socket.on("connect", () => {
+        $connectionStatus.innerText = "connected";
+        $recoveryStatus.innerText = "" + socket.recovered;
+
+        setTimeout(() => {
+          // close the low-level connection and trigger a reconnection
+          socket.io.engine.close();
+        }, Math.random() * 5000 + 1000);
+      });
+
+      socket.on("disconnect", () => {
+        $connectionStatus.innerText = "disconnected";
+        $recoveryStatus.innerText = "-"
+      });
+
+      socket.on("ping", (value) => {
+        const item = document.createElement("li");
+        item.textContent = value;
+        $messages.prepend(item);
+        if ($messages.childElementCount > 10) {
+          $messages.removeChild($messages.lastChild);
+        }
+      });
+    </script>
+  </body>
+</html>
diff --git a/examples/connection-state-recovery-example/cjs/index.js b/examples/connection-state-recovery-example/cjs/index.js
@@ -0,0 +1,53 @@
+const { readFile } = require("node:fs/promises");
+const { createServer } = require("node:http");
+const { Server } = require("socket.io");
+
+const httpServer = createServer(async (req, res) => {
+  if (req.url !== "/") {
+    res.writeHead(404);
+    res.end("Not found");
+    return;
+  }
+  // reload the file every time
+  const content = await readFile("index.html");
+  const length = Buffer.byteLength(content);
+
+  res.writeHead(200, {
+    "Content-Type": "text/html",
+    "Content-Length": length,
+  });
+  res.end(content);
+});
+
+const io = new Server(httpServer, {
+  connectionStateRecovery: {
+    // the backup duration of the sessions and the packets
+    maxDisconnectionDuration: 2 * 60 * 1000,
+    // whether to skip middlewares upon successful recovery
+    skipMiddlewares: true,
+  },
+});
+
+io.on("connection", (socket) => {
+  console.log(`connect ${socket.id}`);
+
+  if (socket.recovered) {
+    console.log("recovered!");
+    console.log("socket.rooms:", socket.rooms);
+    console.log("socket.data:", socket.data);
+  } else {
+    console.log("new connection");
+    socket.join("sample room");
+    socket.data.foo = "bar";
+  }
+
+  socket.on("disconnect", (reason) => {
+    console.log(`disconnect ${socket.id} due to ${reason}`);
+  });
+});
+
+setInterval(() => {
+  io.emit("ping", new Date().toISOString());
+}, 1000);
+
+httpServer.listen(3000);
diff --git a/examples/connection-state-recovery-example/cjs/package.json b/examples/connection-state-recovery-example/cjs/package.json
@@ -0,0 +1,13 @@
+{
+  "name": "connection-state-recovery-example",
+  "version": "0.0.1",
+  "private": true,
+  "type": "commonjs",
+  "description": "Example with connection state recovery",
+  "scripts": {
+    "start": "node index.js"
+  },
+  "dependencies": {
+    "socket.io": "^4.7.2"
+  }
+}
diff --git a/examples/connection-state-recovery-example/esm/index.html b/examples/connection-state-recovery-example/esm/index.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Connection state recovery | Socket.IO</title>
+  </head>
+  <body>
+    <p>Status: <span id="connectionStatus">disconnected</span></p>
+    <p>Recovered? <span id="recoveryStatus">-</span></p>
+
+    <p>Latest messages:</p>
+    <ul id="messages"></ul>
+
+    <script src="/socket.io/socket.io.js"></script>
+    <script>
+      const $connectionStatus = document.getElementById("connectionStatus");
+      const $recoveryStatus = document.getElementById("recoveryStatus");
+      const $messages = document.getElementById("messages");
+
+      const socket = io({
+        reconnectionDelay: 5000 // 1000 by default
+      });
+
+      socket.on("connect", () => {
+        $connectionStatus.innerText = "connected";
+        $recoveryStatus.innerText = "" + socket.recovered;
+
+        setTimeout(() => {
+          // close the low-level connection and trigger a reconnection
+          socket.io.engine.close();
+        }, Math.random() * 5000 + 1000);
+      });
+
+      socket.on("disconnect", () => {
+        $connectionStatus.innerText = "disconnected";
+        $recoveryStatus.innerText = "-"
+      });
+
+      socket.on("ping", (value) => {
+        const item = document.createElement("li");
+        item.textContent = value;
+        $messages.prepend(item);
+        if ($messages.childElementCount > 10) {
+          $messages.removeChild($messages.lastChild);
+        }
+      });
+    </script>
+  </body>
+</html>
diff --git a/examples/connection-state-recovery-example/esm/index.js b/examples/connection-state-recovery-example/esm/index.js
@@ -0,0 +1,53 @@
+import { readFile } from "node:fs/promises";
+import { createServer } from "node:http";
+import { Server } from "socket.io";
+
+const httpServer = createServer(async (req, res) => {
+  if (req.url !== "/") {
+    res.writeHead(404);
+    res.end("Not found");
+    return;
+  }
+  // reload the file every time
+  const content = await readFile("index.html");
+  const length = Buffer.byteLength(content);
+
+  res.writeHead(200, {
+    "Content-Type": "text/html",
+    "Content-Length": length,
+  });
+  res.end(content);
+});
+
+const io = new Server(httpServer, {
+  connectionStateRecovery: {
+    // the backup duration of the sessions and the packets
+    maxDisconnectionDuration: 2 * 60 * 1000,
+    // whether to skip middlewares upon successful recovery
+    skipMiddlewares: true,
+  },
+});
+
+io.on("connection", (socket) => {
+  console.log(`connect ${socket.id}`);
+
+  if (socket.recovered) {
+    console.log("recovered!");
+    console.log("socket.rooms:", socket.rooms);
+    console.log("socket.data:", socket.data);
+  } else {
+    console.log("new connection");
+    socket.join("sample room");
+    socket.data.foo = "bar";
+  }
+
+  socket.on("disconnect", (reason) => {
+    console.log(`disconnect ${socket.id} due to ${reason}`);
+  });
+});
+
+setInterval(() => {
+  io.emit("ping", new Date().toISOString());
+}, 1000);
+
+httpServer.listen(3000);
diff --git a/examples/connection-state-recovery-example/esm/package.json b/examples/connection-state-recovery-example/esm/package.json
@@ -0,0 +1,13 @@
+{
+  "name": "connection-state-recovery-example",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "description": "Example with connection state recovery",
+  "scripts": {
+    "start": "node index.js"
+  },
+  "dependencies": {
+    "socket.io": "^4.7.2"
+  }
+}