chatclient.html Example File | Qt WebChannel 5.4

- Qt 5.4
- Qt WebChannel
- Qt WebChannel Chatclient HTML Example
- chatclient.html Example File
- Qt 5.4.2 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>