Revision control
++ <!DOCTYPE html>
++ <html>
++ <head>
++ <title>ChatClient</title>
++
++ <meta name="viewport" content="width=device-width, initial-scale=1" />
++
++ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.css" />
++ <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css" />
++ <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css" />
++ <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css" />
++ <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
++ <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
++ <script type="text/javascript" src="qwebchannel.js"></script>
++
++ <script>
++ 'use strict';
++ var wsUri = "ws://localhost:12345";
++ window.loggedin = false;
++
++ window.onload = function() {
++ var socket = new WebSocket(wsUri);
++
++ socket.onclose = function() {
++ console.error("web channel closed");
++ };
++ socket.onerror = function(error) {
++ console.error("web channel error: " + error);
++ };
++ socket.onopen = function() {
++ window.channel = new QWebChannel(socket, function(channel) {
++ //connect to the changed signal of a property
++ channel.objects.chatserver.userListChanged.connect(function() {
++ $('#userlist').empty();
++ //access the property
++ channel.objects.chatserver.userList.forEach(function(user) {
++ $('#userlist').append(user + '<br>');
++ });
++ });
++ //connect to a signal
++ channel.objects.chatserver.newMessage.connect(function(time, user, message) {
++ $('#chat').append("[" + time + "] " + user + ": " + message + '<br>');
++ });
++ //connect to a signal
++ channel.objects.chatserver.keepAlive.connect(function(args) {
++ if (window.loggedin) {
++ //call a method
++ channel.objects.chatserver.keepAliveResponse($('#loginname').val())
++ console.log("sent alive");
++ }
++ });
++
++ });
++ }
++ }
++ </script>
++ </head>
++ <body>
++
++ <div id="loginDialog" class="easyui-dialog" title="Chat Login" data-options="iconCls:'icon-save'" style="width:400px;height:200px;padding:10px">
++ <form id="loginForm" method="post">
++ <table cellpadding="5">
++ <tr><td>Name:</td><td><input class="easyui-validatebox" type="text" id="loginname" name="name" data-options="required:true"></input></td></tr>
++ </table>
++ </form>
++ <div style="text-align:center;padding:5px">
++ <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()">Login</a>
++ </div>
++ <div style="text-align:center;padding:5px" id="loginError">
++ Username already in use.
++ </div>
++ <script>
++ $('#loginForm').submit(submitForm);
++
++ function submitForm(event) {
++ console.log("DEBUG login: " + channel);
++ channel.objects.chatserver.login($('#loginname').val(), function(arg) {
++ console.log("DEBUG login response: " + arg);
++ if (arg === true) {
++ $('#loginError').hide();
++ $('#loginDialog').dialog('close');
++ window.loggedin = true;
++ } else {
++ $('#loginError').show();
++ }
++ });
++ console.log($('#loginname').val());
++ if (event !== undefined)
++ event.preventDefault();
++ return false;
++ }
++ </script>
++ </div>
++
++
++ <div class="easyui-layout" style="width:500px;height:300px;">
++ <div data-options="region:'east',split:true" title="Users" id="userlist" style="width:100px;">
++
++ </div>
++ <div data-options="region:'south',split:true" style="height:50px;">
++ <form id="messageForm">
++ <input class="easyui-validatebox" type="text" id="message" name="name" style="width: 97%"></input>
++ </form>
++ </div>
++ <div data-options="region:'center'" id="chat">
++
++ </div>
++ <script>
++ $('#messageForm').submit(submitMessage);
++
++ function submitMessage(event) {
++ channel.objects.chatserver.sendMessage($('#loginname').val(), $('#message').val());
++ $('#message').val('');
++ if (event !== undefined)
++ event.preventDefault();
++ return false;
++ }
++ </script>
++ </div>
++
++
++ <script type="text/javascript">
++ $(document).ready(function() {
++ $('#loginError').hide();
++ });
++ </script>
++
++ </body>
++ </html>