examples/client-side-load-balancing-example/index.html - main - githubmirror/socket.io

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

64 строки2 KB

Damien Arrachequesne

docs(examples): add client-side load balancing example

02 июн 2026, 11:50

02 июн 2026, 11:5020df6ae

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Socket.IO client-side load balancing example</title>
  </head>
  <body>
    <p>Server: <span id="server">-</span></p>
    <p>Connection status: <span id="status">-</span></p>
    <p>Transport: <span id="transport">-</span></p>

    <script src="/socket.io/socket.io.js"></script>
    <script>
      const $server = document.getElementById("server");
      const $status = document.getElementById("status");
      const $transport = document.getElementById("transport");

      const SERVERS = [
        "http://localhost:3000",
        "http://localhost:3001",
        "http://localhost:3002",
      ];

      function pickServer() {
        const randomServer =
          SERVERS[Math.floor(Math.random() * SERVERS.length)];

        $server.innerText = randomServer;

        return randomServer;
      }

      const socket = io(pickServer(), {
        // transports: ["websocket"]
        transports: ["polling", "websocket"],
      });

      socket.io.on("reconnect_attempt", () => {
        socket.io.uri = pickServer();
      });

      socket.on("connect", () => {
        console.log(`connect ${socket.id}`);
        $status.innerText = "connected";
        $transport.innerText = socket.io.engine.transport.name;

        socket.io.engine.on("upgrade", (transport) => {
          console.log(`transport upgraded to ${transport.name}`);
          $transport.innerText = socket.io.engine.transport.name;
        });
      });

      socket.on("connect_error", (err) => {
        console.log(`connect_error due to ${err.message}`);
      });

      socket.on("disconnect", (reason) => {
        console.log(`disconnect due to ${reason}`);
        $status.innerText = "disconnected";
        $transport.innerText = "-";
      });
    </script>
  </body>
</html>