Author: ngn
Date: Thu Aug  5 21:34:42 2010
New Revision: 982793

URL: http://svn.apache.org/viewvc?rev=982793&view=rev
Log:
Example client to support receiving messages, and have a nicer UI (VYSPER-226, 
VYSPER-227, VYSPER-228, by Bogdan Pistol). 

Modified:
    
mina/vysper/trunk/server/extensions/xep0124-xep0206-bosh/src/examples/client/client.html
    
mina/vysper/trunk/server/extensions/xep0124-xep0206-bosh/src/examples/client/client.js

Modified: 
mina/vysper/trunk/server/extensions/xep0124-xep0206-bosh/src/examples/client/client.html
URL: 
http://svn.apache.org/viewvc/mina/vysper/trunk/server/extensions/xep0124-xep0206-bosh/src/examples/client/client.html?rev=982793&r1=982792&r2=982793&view=diff
==============================================================================
--- 
mina/vysper/trunk/server/extensions/xep0124-xep0206-bosh/src/examples/client/client.html
 (original)
+++ 
mina/vysper/trunk/server/extensions/xep0124-xep0206-bosh/src/examples/client/client.html
 Thu Aug  5 21:34:42 2010
@@ -53,26 +53,14 @@
 
 <div id="workspace" style="display: none;">
 
-<div id="buttons" style="float: right;">
-<input type="button" value="Chat with JID..." id="chat" disabled="disabled"/>
-<input type="button" value="Disconnect" id="disconnect" disabled="disabled"/>
-</div>
-
-<div>
-<select size="10" style="width: 150px;" id="roster">
-</select>
-<br/>
-Roster
-</div>
+<div id="roster"></div>
 
-<div id="tabs">
+<div id="tabs" style="width: 50%; height: 400px; display: none;">
 <ul></ul>
 </div>
 
-<div style="position: absolute; left: 0; width: 100%; bottom: 0px;">
-<div id="logger"
-       style="border: 1px solid; height: 300px; overflow: scroll; margin: 
10px;">
-</div>
+<div style="position: absolute; left: 0; width: 100%; height: 30%; bottom: 
0px;">
+<div id="logger" style="border: 1px solid; height: 100%; overflow: auto;"/>
 </div>
 
 </div>

Modified: 
mina/vysper/trunk/server/extensions/xep0124-xep0206-bosh/src/examples/client/client.js
URL: 
http://svn.apache.org/viewvc/mina/vysper/trunk/server/extensions/xep0124-xep0206-bosh/src/examples/client/client.js?rev=982793&r1=982792&r2=982793&view=diff
==============================================================================
--- 
mina/vysper/trunk/server/extensions/xep0124-xep0206-bosh/src/examples/client/client.js
 (original)
+++ 
mina/vysper/trunk/server/extensions/xep0124-xep0206-bosh/src/examples/client/client.js
 Thu Aug  5 21:34:42 2010
@@ -23,6 +23,8 @@ var port;
 var jid;
 var password;
 var connection;
+var subscribeRequests = [];
+var isDisconnecting = false;
 
 var connectionStatuses = {};
 connectionStatuses[Strophe.Status.ERROR] = "ERROR";
@@ -39,8 +41,18 @@ connectionStatuses[Strophe.Status.ATTACH
 window.flensed.base_path="../resources/flxhr/";
 
 $(document).ready(function() {
-       $("#disconnect").click(disconnect);
-       $("#chat").click(chat);
+       $("#tabs").tabs();
+       $("#roster").dialog({
+               autoOpen: false,
+               buttons: {"Disconnect": disconnect, "Add contact...": 
addContact},
+               closeOnEscape: false,
+               width: 400,
+               height: 250,
+               position: ["right", "top"],
+               title: "Roster",
+               beforeclose: function() {return isDisconnecting;}
+       });
+
        $("#connect").click(function() {
                $("#connect-form").hide();
                $("#workspace").show();
@@ -48,6 +60,14 @@ $(document).ready(function() {
        });
 });
 
+function getSubscribeRequest(jid) {
+    for (var i = 0; i < subscribeRequests.length; i++) {
+        if (jid === subscribeRequests[i]) {
+            return i;
+        }
+    }
+    return -1;
+}
 
 function formatTime(val) {
        return val < 10 ? "0" + val : val;
@@ -93,56 +113,137 @@ function connect() {
 }
 
 function userConnected() {
-       // get roster
-       var iq = $iq({type: 'get'}).c('query', {xmlns: 'jabber:iq:roster'});
-       log("Requesting roster", iq.toString());
-       connection.sendIQ(iq, rosterReceived);
-       
+       getRoster();
        // handle received messages
        connection.addHandler(messageReceived, null, "message", "chat");
        
-       $("#chat, #disconnect").removeAttr("disabled");
+       // handle presence
+       connection.addHandler(presenceReceived, null, "presence");      
+       isDisconnecting = false;
+       $("#roster").dialog("open");    
+}
+
+function getRoster() {
+       var iq = $iq({type: 'get'}).c('query', {xmlns: 'jabber:iq:roster'});
+       log("Requesting roster", iq.toString());
+       connection.sendIQ(iq, rosterReceived);
 }
 
 function rosterReceived(iq) {
        log("Received roster", Strophe.serialize(iq));
+       $("#roster").empty();
+
        $(iq).find("item").each(function() {
                // if a contact is still pending subscription then do not show 
it in the list
                if ($(this).attr('ask')) {
                        return true;
                }
                var jid = $(this).attr('jid');
-               $("#roster").append("<option value='" + jid + "'>" + jid + 
"</option>");
+               $("#roster").append("<div jid='" + jid2id(jid) + "'>" + jid + " 
(offline)</div>");
        });
+       log("Sending my presence", $pres().toString());
+       connection.send($pres());
 }
 
 function jid2id(jid) {
-       return jid.replace("@", "AT").replace(/\./g, "_").replace(/\//g, "-");
+       return Strophe.getBareJidFromJid(jid).replace("@", "AT").replace(/\./g, 
"_");
 }
 
 function messageReceived(msg) {
-       var jid = $(message).attr("from");
+       log("Received chat message", Strophe.serialize(msg));
+       var jid = $(msg).attr("from");
+       var bareJid = Strophe.getBareJidFromJid(jid);
        var id = jid2id(jid);
-       if ($("#" + id).length === 0) {
-               initChatArea(jid, id);
+
+       $("#tabs").show()
+       
+       if ($("#chat" + id).length === 0) {
+               $("#tabs").tabs("add", "#chat" + id, bareJid);
+               $("#chat" + id).append("<div style='height: 290px; 
margin-bottom: 10px; overflow: auto;'></div><input type='text' style='width: 
100%;'/>");
        }
-       $("#tabs").tabs("select", "#" + id);
-       $("#" + id + " > input").focus();
-}
+       
+       if($(msg).find("> body")) {
+               $("#chat" + id + " > div").append("<p>" + $(msg).find("> 
body").text() + "</p>");
+               $("#chat" + id + " > div").get(0).scrollTop = $("#chat" + id + 
" > div").get(0).scrollHeight;
+       }
+       
+       $("#chat" + id).data("jid", jid);
+       $("#tabs").tabs("select", "#chat" + id);
+       $("#chat" + id + " > input").focus();
 
-function initChatArea(jid, id) {
-       $("#tabs").tabs("add", id, jid);
-       $("#" + id).append("<div></div><input type='text'/>");
-       $("#" + id).attr("jid", jid);
+       return true;
 }
 
+
 function disconnect() {
+       isDisconnecting = true;
+       $("#roster").dialog("close");
        $("#roster").empty();
-       $("#chat, #disconnect").attr("disabled", "disabled");
-       log("Disconnecting...");
+       
+       log("Disconnecting...");
+       
+       connection.send($pres({type: "unavailable"}));
+       connection.flush();
        connection.disconnect();
 }
 
 function chat() {
        
+}
+
+function presenceReceived(presence) {
+       log("Received presence", Strophe.serialize(presence));
+       var fromJid = $(presence).attr('from');
+       var bareFromJid = Strophe.getBareJidFromJid(fromJid);
+       var type = $(presence).attr('type');
+       var id = jid2id(fromJid);
+       if (type === "error") {
+               alert("Received presence error!");
+       } else if (type === "subscribe") {
+               if (confirm(fromJid + " wants to subscribe to your presence. Do 
you allow it?")) {
+                       var pres = $pres({to: fromJid, type: "subscribed"});
+                       log("Allowing subscribe", pres.toString());
+                       connection.send(pres);
+                       if ($("#roster > div[jid=" + id + "]").length === 0) {
+                               $("#roster").append("<div jid='" + id + "'>" + 
bareFromJid + " (offline)</div>");
+                               pres = $pres({to: fromJid, type: "subscribe"});
+                               log("Requesting subscribe from " + fromJid, 
pres.toString());
+                               connection.send(pres);
+                       }
+               } else {
+                       var pres = $pres({to: fromJid, type: "unsubscribed"});
+                       log("Denying subscribe", pres.toString());
+                       connection.send(pres);
+               }
+       } else if (bareFromJid !== jid) {
+               $("#roster > div[jid=" + id + "]").text(bareFromJid + " (" + 
(type === "unavailable" ? "offline" : "online") + ")");
+               if (getSubscribeRequest(bareFromJid) === -1) {
+                       log("Sending presence", $pres().toString());
+                       connection.send($pres());
+               } else {
+                       
subscribeRequests.splice(getSubscribeRequest(bareFromJid), 1);
+               }
+       }
+       return true;
+}
+
+function addContact() {
+       var toJid = prompt("Please type the JID of the contact you want to 
add");
+       var id = jid2id(toJid);
+       if (toJid === null) {
+               return;
+       }
+       if (toJid === jid) {
+               alert("You cannot add yourself to the roster!");
+               return;
+       }
+       if ($("#roster > div[jid=" + id + "]").length > 0) {
+               alert("JID already present in the roster!");
+               return;
+       }
+       $("#roster").append("<div jid='" + jid2id(toJid) + "'>" + toJid + " 
(offline)</div>");
+       subscribeRequests.push(toJid);
+       var pres = $pres({to: toJid, type: "subscribe"});
+       log("Requesting subscribe to " + toJid, pres.toString());
+       connection.send(pres);
 }
\ No newline at end of file


Reply via email to