Another new feature: websocket controller, for real

Former-commit-id: c1a59b86733e890709b52446e22427a17d87f5fc
2025-12-18 02:17:05 +00:00 · 2017-12-20 17:56:28 +02:00
parent b78698f6c0
commit 2042fddb66
10 changed files with 281 additions and 61 deletions
--- a/_examples/mvc/websocket/views/index.html
+++ b/_examples/mvc/websocket/views/index.html
@@ -0,0 +1,63 @@
+<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>