Add socket.io example

Former-commit-id: 895669c537db46f1694e8006418ea0509c60cb04
2025-12-20 03:17:04 +00:00 · 2019-11-13 19:18:41 +02:00
parent 7ad97865b5
commit 8da68a0a43
6 changed files with 394 additions and 3 deletions
--- a/_examples/websocket/socketio/asset/index.html
+++ b/_examples/websocket/socketio/asset/index.html
@@ -0,0 +1,80 @@
+<!doctype html>
+<html>
+
+<head>
+    <title>Socket.IO chat</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font: 13px Helvetica, Arial;
+        }
+
+        form {
+            background: #000;
+            padding: 3px;
+            position: fixed;
+            bottom: 0;
+            width: 100%;
+        }
+
+        form input {
+            border: 0;
+            padding: 10px;
+            width: 90%;
+            margin-right: .5%;
+        }
+
+        form button {
+            width: 9%;
+            background: rgb(130, 224, 255);
+            border: none;
+            padding: 10px;
+        }
+
+        #messages {
+            list-style-type: none;
+            margin: 0;
+            padding: 0;
+        }
+
+        #messages li {
+            padding: 5px 10px;
+        }
+
+        #messages li:nth-child(odd) {
+            background: #eee;
+        }
+    </style>
+</head>
+
+<body>
+    <ul id="messages"></ul>
+    <form action="">
+        <input id="m" autocomplete="off" /><button>Send</button>
+    </form>
+    <script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
+    <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
+    <script>
+        var socket = io();
+        // socket.emit('msg', 'hello');
+        var s2 = io("/chat");
+        socket.on('reply', function (msg) {
+            $('#messages').append($('<li>').text(msg));
+        });
+        $('form').submit(function () {
+            s2.emit('msg', $('#m').val(), function (data) {
+                $('#messages').append($('<li>').text('ACK CALLBACK: ' + data));
+            });
+            socket.emit('notice', $('#m').val());
+            $('#m').val('');
+            return false;
+        });
+    </script>
+</body>
+
+</html>