<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Passport example</title>
    </head>
    <body>
        <p>Authenticated!</p>
        <p>Socket ID: <span id="socketId"></span></p>
        <p>Username: <span id="username"></span></p>
        <form action="/logout" method="post">
            <div>
                <input type="submit" value="Log out" />
            </div>
        </form>
        <script src="/socket.io/socket.io.js"></script>
        <script>
          const socket = io();
          const socketIdSpan = document.getElementById("socketId");
          const usernameSpan = document.getElementById("username");

          socket.on('connect', () => {
            socketIdSpan.innerText = socket.id;

            socket.emit('whoami', (username) => {
              usernameSpan.innerText = username;
            });
          });
        </script>
    </body>
</html>
