<html>

<head>
    <title>Online visitors MVC example</title>
    <style>
        body {
            margin: 0;
            font-family: -apple-system, "San Francisco", "Helvetica Neue", "Noto", "Roboto", "Calibri Light", sans-serif;
            color: #212121;
            font-size: 1.0em;
            line-height: 1.6;
        }

        .container {
            max-width: 750px;
            margin: auto;
            padding: 15px;
        }

        #online_visitors {
            font-weight: bold;
            font-size: 18px;
        }
    </style>
</head>

<body>
    <div class="container">
        <span id="online_visitors">1 online visitor</span>
    </div>

    <script src="/websocket/iris-ws.js"></script>

    <script type="text/javascript">
        (function () {
            var socket = new Ws("ws://localhost:8080/websocket");

            socket.OnConnect(function(){
                // update the rest of connected clients, including "myself" when "my" connection is 100% ready.
                socket.Emit("visit");
            });
        

            socket.On("visit", function (newCount) {
                console.log("visit websocket event with newCount of: ", newCount);

                var text = "1 online visitor";
                if (newCount > 1) {
                    text = newCount + " online visitors";
                }
                document.getElementById("online_visitors").innerHTML = text;
            });

            socket.OnDisconnect(function () {
                document.getElementById("online_visitors").innerHTML = "you've been disconnected";
            });

        })();
    </script>

</body>

</html>