example

example/static/chat.js

@@ -0,0 +1,90 @@
+var names = {};
+Ox.load(function() {
+    var app = window.app = {};
+    app.triggerEvent = function(action, data) {
+        if (action == 'info') {
+            Ox.$('#id').html(data.id);
+            Ox.$('#nick').val(data.nick || '');
+            var peers = Ox.$('#peers');
+            peers.empty()
+            data.local.forEach(function(peer) {
+                console.log('add', peer);
+                if (names[peer]) {
+                    Ox.$('<div>')
+                        .html(peer + '(' + names[peer] +')')
+                        .appendTo(peers);
+                } else {
+                    app.getNick(peer, function(nick) {
+                        var html = peer;
+                        if(nick) {
+                            html = peer + '(' + nick +')';
+                        }
+                        Ox.$('<div>')
+                            .html(html)
+                            .appendTo(peers);
+                    });
+                }
+            });
+        } else if (action == 'message') {
+            var html = (names[data.from] || data.from) + ': ' + data.message;
+            Ox.$('<div>').html(html).appendTo(Ox.$('#messages'));
+        }
+        Ox.print(action, data);
+
+    };
+    app.socket = new WebSocket('ws://' + document.location.host + '/ws');
+    app.socket.onopen = function(event) {
+        app.triggerEvent('open', event);
+    };
+    app.socket.onmessage = function(event) {
+        var data = JSON.parse(event.data);
+        app.triggerEvent(data[0], data[1]);
+    };
+    app.socket.onerror = function(event) {
+        app.triggerEvent('error', event);
+        app.socket.close();
+    };
+    app.socket.onclose = function(event) {
+        app.triggerEvent('close', event);
+        setTimeout(connectSocket, 1000);
+    };
+    app.request = function(action, data, callback) {
+        var xhr = new XMLHttpRequest();
+        xhr.onload = function() {
+            try {
+                var response = JSON.parse(this.response);
+                callback && callback(response);
+            } catch(e) {
+                Ox.print('FAIL', this.response);
+            }
+        }
+        xhr.open('POST', '/' + action);
+        data = JSON.stringify(data);
+        xhr.send(data);
+    };
+    app.api = function(action, data) {
+        console.log('api', action, data);
+        app.socket.send(JSON.stringify([action, data]));
+    };
+    Ox.$('#send').on({
+        click: function() {
+            var value = Ox.$('#message').val();
+            if (value) {
+                app.api('sendMessage', {
+                    message: value
+                });
+            }
+        }
+    })
+    app.getNick = function(peer, callback) {
+        app.request('info', {id: peer}, function(response) {
+            names[peer] = response.nick;
+            callback(response.nick);
+        });
+    }
+    Ox.$('#nick').on({
+        change: function() {
+            app.api('nick', this.value);
+        }
+    });
+});

example/static/index.html

@@ -4,29 +4,21 @@
     <meta charset="utf-8" />
     <title></title>
     <style>
+        #messages {
+        }
     </style>
-    <script src="https://oxjs.org/build/Ox.js"></script>
-    <script>
-        Ox.load(function() {
-            var app = window.app = {};
-            app.request = function(action, data, callback) {
-                data = JSON.stringify(data);
-                var xhr = new XMLHttpRequest();
-                xhr.open('POST', '/' + action, true);
-                xhr.onload = function() {
-                    var response = JSON.parse(this.response);
-                    callback(response)
-                };
-                xhr.onerror = function(error) {
-                    callback(null, error);
-                }
-                xhr.setRequestHeader('Content-Type', 'application/json');
-                xhr.send(data);
-            };
-        });
-    </script>
+    <script src="http://localhost/oxjs/build/Ox.js"></script>
+    <script src="/chat.js"></script>
 </head>
 <body>
+Nick: <input id="nick" type="text"></input>(<span id="id"></span>)<br>
+Peers:
+<div id="peers"></div>
+<textarea id="message" type="text"></textarea><br/>
+<input id="send" type="button" value="Send"></input>
+<br>
+Message:<br/>
+<div id="messages"></div>
 </body>
 </html>