summaryrefslogtreecommitdiff
path: root/examples/webchannel/chatclient-html
diff options
context:
space:
mode:
Diffstat (limited to 'examples/webchannel/chatclient-html')
-rw-r--r--examples/webchannel/chatclient-html/chatclient-html.pro7
-rw-r--r--examples/webchannel/chatclient-html/chatclient.html131
-rw-r--r--examples/webchannel/chatclient-html/doc/src/chatclient-html.qdoc63
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}
+
+*/