Skip to content

Commit 20df6ae

Browse files
darrachequesnedarrachequesne
committed
docs(examples): add client-side load balancing example
1 parent 16d1923 commit 20df6ae

3 files changed

Lines changed: 119 additions & 0 deletions

File tree

‎examples/client-side-load-balancing-example/index.html‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Socket.IO client-side load balancing example</title>
6+
</head>
7+
<body>
8+
<p>Server: <span id="server">-</span></p>
9+
<p>Connection status: <span id="status">-</span></p>
10+
<p>Transport: <span id="transport">-</span></p>
11+
12+
<script src="/socket.io/socket.io.js"></script>
13+
<script>
14+
const $server = document.getElementById("server");
15+
const $status = document.getElementById("status");
16+
const $transport = document.getElementById("transport");
17+
18+
const SERVERS = [
19+
"http://localhost:3000",
20+
"http://localhost:3001",
21+
"http://localhost:3002",
22+
];
23+
24+
function pickServer() {
25+
const randomServer =
26+
SERVERS[Math.floor(Math.random() * SERVERS.length)];
27+
28+
$server.innerText = randomServer;
29+
30+
return randomServer;
31+
}
32+
33+
const socket = io(pickServer(), {
34+
// transports: ["websocket"]
35+
transports: ["polling", "websocket"],
36+
});
37+
38+
socket.io.on("reconnect_attempt", () => {
39+
socket.io.uri = pickServer();
40+
});
41+
42+
socket.on("connect", () => {
43+
console.log(`connect ${socket.id}`);
44+
$status.innerText = "connected";
45+
$transport.innerText = socket.io.engine.transport.name;
46+
47+
socket.io.engine.on("upgrade", (transport) => {
48+
console.log(`transport upgraded to ${transport.name}`);
49+
$transport.innerText = socket.io.engine.transport.name;
50+
});
51+
});
52+
53+
socket.on("connect_error", (err) => {
54+
console.log(`connect_error due to ${err.message}`);
55+
});
56+
57+
socket.on("disconnect", (reason) => {
58+
console.log(`disconnect due to ${reason}`);
59+
$status.innerText = "disconnected";
60+
$transport.innerText = "-";
61+
});
62+
</script>
63+
</body>
64+
</html>

‎examples/client-side-load-balancing-example/index.js‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import { readFileSync } from "node:fs";
2+
import { createServer } from "node:http";
3+
import { Server } from "socket.io";
4+
5+
function initServer(port) {
6+
const httpServer = createServer((req, res) => {
7+
if (req.method === "GET" && req.url === "/") {
8+
const content = readFileSync("./index.html");
9+
res.writeHead(200, {
10+
"content-type": "text/html",
11+
});
12+
res.write(content);
13+
res.end();
14+
} else {
15+
res.writeHead(404).end();
16+
}
17+
});
18+
19+
const io = new Server(httpServer, {
20+
cors: {
21+
origin: [
22+
"http://localhost:3000",
23+
"http://localhost:3001",
24+
"http://localhost:3002",
25+
],
26+
},
27+
// TODO use an adapter to broadcast messages between the Socket.IO servers
28+
});
29+
30+
io.on("connection", (socket) => {
31+
console.log(`connect ${socket.id}`);
32+
33+
socket.conn.on("upgrade", (transport) => {
34+
console.log(`transport upgraded to ${transport.name}`);
35+
});
36+
37+
socket.on("disconnect", (reason) => {
38+
console.log(`disconnect ${socket.id} due to ${reason}`);
39+
});
40+
});
41+
42+
httpServer.listen(port, () => {
43+
console.log(`server listening at http://localhost:${port}`);
44+
});
45+
}
46+
47+
initServer(3000);
48+
initServer(3001);
49+
initServer(3002);

‎examples/client-side-load-balancing-example/package.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"private": true,
3+
"name": "client-side-load-balancing-example",
4+
"version": "0.0.0",
5+
"type": "module"
6+
}

0 commit comments

Comments
 (0)