diff options
Diffstat (limited to 'examples/webchannel/chatclient-html')
3 files changed, 201 insertions, 0 deletions
diff --git a/examples/webchannel/chatclient-html/chatclient-html.pro b/examples/webchannel/chatclient-html/chatclient-html.pro new file mode 100644 index 0000000..f5f0bf4 --- /dev/null +++ b/examples/webchannel/chatclient-html/chatclient-html.pro @@ -0,0 +1,7 @@ +TEMPLATE = aux + +exampleassets.files += \ + chatclient.html + +exampleassets.path = $$[QT_INSTALL_EXAMPLES]/qwebchannel/chatclient-html +include(../exampleassets.pri) diff --git a/examples/webchannel/chatclient-html/chatclient.html b/examples/webchannel/chatclient-html/chatclient.html new file mode 100644 index 0000000..b392282 --- /dev/null +++ b/examples/webchannel/chatclient-html/chatclient.html @@ -0,0 +1,131 @@ +<!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> diff --git a/examples/webchannel/chatclient-html/doc/src/chatclient-html.qdoc b/examples/webchannel/chatclient-html/doc/src/chatclient-html.qdoc new file mode 100644 index 0000000..3d4b672 --- /dev/null +++ b/examples/webchannel/chatclient-html/doc/src/chatclient-html.qdoc @@ -0,0 +1,63 @@ +/**************************************************************************** +** +** Copyright (C) 2014 basysKom GmbH, author Bernd Lamecker <bernd.lamecker@basyskom.com> +** Contact: http://www.qt-project.org/legal +** +** This file is part of the QtWebChannel module of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:LGPL21$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and Digia. For licensing terms and +** conditions see http://qt.digia.com/licensing. For further information +** use the contact form at http://qt.digia.com/contact-us. +** +** GNU Lesser General Public License Usage +** Alternatively, this file may be used under the terms of the GNU Lesser +** General Public License version 2.1 or version 3 as published by the Free +** Software Foundation and appearing in the file LICENSE.LGPLv21 and +** LICENSE.LGPLv3 included in the packaging of this file. Please review the +** following information to ensure the GNU Lesser General Public License +** requirements will be met: https://www.gnu.org/licenses/lgpl.html and +** http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html. +** +** In addition, as a special exception, Digia gives you certain additional +** rights. These rights are described in the Digia Qt LGPL Exception +** version 1.1, included in the file LGPL_EXCEPTION.txt in this package. +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +/*! + \example chatclient-html + \title Qt WebChannel Chatclient HTML Example + \ingroup qtwebchannel-examples + \brief A HTML/JavaScript client that communicates over a WebSocket with a QWebChannel server. + + The chatclient-html example provides a simple QWebChannel client implemented using JavaScript and HTML. + + \section1 Overview + + The client initializes a WebSocket connection to the chat server and receives an object + containing all neccessarry signals, slots and properties for implementing a chat client. + + After login the client can invoke the method \c sendMessage and receive the signal \c newMessage + to send and receive messages. Furthermore there is a \c userList property which provides the + names of all other connected clients. It is automatically updated when its contents change. + Also, the client responds to the servers keep alive signal which is needed to detect disconnected + clients and remove them from the \c userlist property. + + The example shows how basic elements can be used with the client JavaScript implementation of + QWebChannel, like connecting to signals (\c newMessage), calling slots (\c sendMessage) and handle + property changes (\c userList). + + The client is able to work with the chatserver-cpp example. + + To run the example, open the \c chatclient.html in a browser. + + \sa {chatserver-cpp}, {chatclient-qml} + +*/ |