Qt 5.9 | Qt WebChannel | Qt WebChannel ChatClient HTML Example | chatclient.html Example File

Qt 5.9.4 Reference Documentation

# chatclient.html Example File

chatclient-html/chatclient.html

      <!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>