github/socket.io
1
1
Fork 0
mirror of https://github.com/socketio/socket.io.git synced 2026-01-09 15:08:12 -05:00
Code Issues Packages Projects Releases Wiki Activity

docs: add example with connection state recovery

Browse Source
This commit is contained in:
Damien Arrachequesne
2023-09-20 12:45:04 +02:00
parent d744fda772
commit ccbb4c0773
8 changed files with 255 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
examples/connection-state-recovery-example/README.md Normal file
View File

@@ -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)

BIN
examples/connection-state-recovery-example/assets/csr.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 103 KiB

49
examples/connection-state-recovery-example/cjs/index.html Normal file
View File

@@ -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>

53
examples/connection-state-recovery-example/cjs/index.js Normal file
View File

@@ -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);

13
examples/connection-state-recovery-example/cjs/package.json Normal file
View File

@@ -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"
}
}

49
examples/connection-state-recovery-example/esm/index.html Normal file
View File

@@ -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>

53
examples/connection-state-recovery-example/esm/index.js Normal file
View File

@@ -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);

13
examples/connection-state-recovery-example/esm/package.json Normal file
View File

@@ -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"
}
}