CHAT. This time I m going to go through the code for Paceville s chat in a chronological order from the user s point of view, as follows:

Transcription

1 CHAT This time I m going to go through the code for Paceville s chat in a chronological order from the user s point of view, as follows: 1.) We start with simply loading the page, and the code needed for correct display to begin with. We will now have a chat bar at the bottom and a button that will show available people for chatting with. Just like on Facebook. 2.) What needs to be done in order to show the list of people we can chat with. 3.) The code needed to create a new chat when we click one of the people in the list. 4.) The code needed to submit a message to the other person and what is needed in order to listen for that message and initiate a chat for the counterparty. 5.) Listening for chat messages back and forth. 6.) Closing a chat. 7.) Cleaning up inactive chats. SQL for the tables: 1. CREATE TABLE IF NOT EXISTS `jos_chat_msgs` ( 2. `id` bigint(21) unsigned NOT NULL AUTO_INCREMENT, 3. `from` bigint(12) NOT NULL, 4. `to` bigint(12) NOT NULL, 5. `message` text NOT NULL, 6. `sent` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP, 7. `recd` int(10) unsigned NOT NULL DEFAULT '0', 8. `chat_id` bigint(21) NOT NULL, 9. PRIMARY KEY (`id`) 10. ) ENGINE=MyISAM DEFAULT CHARSET=utf CREATE TABLE IF NOT EXISTS `jos_chats` ( 13. `id` bigint(21) NOT NULL AUTO_INCREMENT, 14. `created_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP, 15. `user1` bigint(21) NOT NULL, 16. `user2` bigint(21) NOT NULL, 17. `user1_closed` tinyint(1) NOT NULL DEFAULT '0', 18. `user2_closed` tinyint(1) NOT NULL DEFAULT '0', 19. PRIMARY KEY (`id`) 20. ) ENGINE=MyISAM DEFAULT CHARSET=utf8

2 The messages first, we ve got the usual stuff, from id, to id, the message, send date for sorting, recd (shorthand for received yes/no) and the parent chat id. The chats keep track of its users and if one or both of them have closed the chat window, more on that later. The CSS needed to draw the basic chat bar: 1..c_bar{ 2. bottom:0; 3. color:#fff; 4. font-size:12px; 5. height:26px; 6. padding:0; 7. position:fixed; 8. right:0; 9. width:100%; 10. z-index:99; 11. background: url(images/grey_btn_gradient.jpg) repeat-x; 12. } paceville1.png Note the use of position fixed in order to make it always stay at the bottom of the screen, note also the z-index of 99 to make sure it stays on top. Let s move on to the HTML needed to display this initial state (check the image to the right to get a feel for what it looks like): 1. <?php if(!cext()->isguest()):?> 2. <div class="c_bar" id="c_bar"> 3. <div id="c_chat" class="c_chat clearfix"> 4. <div id="chat_btn" class="c_btn c_btn_normal"> 5. Chat (<strong><?php cext()->chatechocount()?></strong>) 6. </div> </div> 9. <div id="chat_tab_bar" class="chat_tab_bar"> 10. <?php foreach(cext()->getallchats() as $chat_id => $chat):?> 11. <div id="chatwin_<?php echo $chat_id?>" class="c_chat_window"> 12. <div class="c_btn c_btn_extended"> 13. <img src="<?php echo $chat->thumb?>" height="22" width="22"/> 14. <div id="chatting_with_<?php echo $chat->id?>" class="c_chat_name"><?php echo $chat->name?></div>

3 15. <a id="chat_close_<?php echo $chat_id?>" class="cwin_close_btn"></a> 16. </div> 17. <div id="chat_flow_<?php echo $chat_id?>" class="chat_flow"> 18. <?php foreach($chat->msgs as $msg):?> 19. <div><?php echo $msg->name.': '.$msg->message?></div> 20. <?php endforeach?> 21. </div> 22. <input class="inputbox chat_input" id="chat_input_<?php echo $chat_id?>" type="text" /> 23. </div> 24. <?php endforeach?> 25. </div> 26. </div> 27. <?php endif?> So if we re a logged in and registered member we will see the bar, and we will also see a count of the available number of persons we can chat with on the button (check the image above to see what it looks like). GetAllChats will not return anything yet since we re not chatting with anyone so I will leave its explanation for later. Anyway, the HTML being printed in the loop are the chat windows, if we had had any that is. Note that this PHP/HTML is in the main index.php of our Joomla template, therefore it will show on all pages. 1. jquery("#chat_btn").toggle( 2. function(){ 3. jquery.post("/ajax.php", {func: 'chatfetchonline'}, function(ret){ 4. jquery("#c_chat").removeclass("c_chat").addclass("c_chat_extended"); 5. jquery("#chat_btn").removeclass("c_btn_normal").addclass("c_btn_extended"); 6. jquery("#chat_btn").after(ret); 7. jquery(".c_chat_user").click(function(){ 8. var usr_id = jquery(this).attr("id").split('_').pop(); 9. var name = jquery(this).find(".c_chat_name:first").html(); 10. var thumb = jquery(this).find("img").attr("src"); 11. createnewchat(usr_id, name, thumb, 0); 12. }); 13. }); 14. }, 15. function(){ 16. jquery(".c_chat_user").remove(); 17. jquery("#c_chat").removeclass("c_chat_extended").addclass("c_chat");

4 18. jquery("#chat_btn").removeclass("c_btn_extended").addclass("c_btn_normal"); 19. } 20. ); The above JavaScript is run when the document has finished loading, here we setup the button that will display the list of available people b way of ajax. It will flip up and down with the help of the toggle functionality. As you can see we are calling the PHP function chatfetchonline: 1. function chatfetchonline($return = 'html'){ 2. $sql 3. = "SELECT DISTINCT c.*, u.*, c.params AS c_params FROM jos_session AS s 4. LEFT JOIN jos_users AS u ON u.id = s.userid 5. LEFT JOIN jos_community_users AS c ON u.id = c.userid 6. WHERE s.guest = 0" 7. ; $tmp = $this->loadobjectlist($sql); 8. $friend_ids = Common::objsExtractPart($this->getFriends(), 'id'); 9. $users = array(); 10. $my_id = $this->getloggedin()->id; 11. foreach($tmp as $user){ 12. if($my_id!= $user->id){ 13. if(stripos($user->c_params, 'privacychat=30')!== false && in_array($user- >id, $friend_ids)) 14. $users[] = $user; 15. else if(stripos($user->c_params, 'privacychat=20')!== false stripos($user- >c_params, 'privacychat') === false) 16. $users[] = $user; 17. } 18. } if($return == 'html'){ 21. $this->assign("online", $users); 22. echo $this->fetch("chat_online_list"); 23. }else 24. return $users; 25. } After the result of this function is passed to the JavaScript it could look like in the picture to the right. paceville2.png

5 What s happening here is that we re first creating an array of all the ids of our friends, we then loop through all currently logged in users. If a user has set that he/she should only show for friends we will check if that person is in our array with ids. If the user has set privacychat=20 it means that user will show to the whole community, not just friends, the same goes if the setting doesn t even exist. Now why we re using the values we re using and so on for the chat privacy settings is a completely different story. The different return values are currently needed only because the chatechocount function (in the second listing) is currently simply count()ing them to get the number. 1. function togglechat(chat){ 2. chat.find(".c_btn").click(function(){ 3. if(chat.css("margin-top") == "0px") 4. chat.css("margin-top", "-275px"); 5. else 6. chat.css("margin-top", "0px"); 7. }); 8. } function setupchatinput(chat_id){ 11. var chat = jquery("#chatwin_" + chat_id); 12. var usr_id = chat.find("div[id^='chatting_with_']").attr('id').split('_').pop(); 13. jquery("#chat_input_"+chat_id).keydown(function(event){ 14. if(event.keycode == 13){ 15. var msg = jquery(this).val(); 16. jquery(this).val(''); 17. jquery.post("/ajax.php", {"func": 'savechatmsg', "to": usr_id, "message": msg, "chat_id": chat_id}, function(res){ 18. jquery("#chat_flow_"+chat_id).append('<div>'+res+': '+msg+'</div>'); 19. }); 20. } 21. }); 22. } function setupchatclose(){ 25. jquery("a[id^='chat_close_']").click(function(){ 26. var chat_id = getid(this); 27. jquery("#chatwin_" + chat_id).remove(); 28. jquery.post("/ajax.php", {func: 'closechatwin', id: chat_id}); 29. }); 30. } function createnewchat(usr_id, name, thumb, new_id){ 33. if (jquery("#chatting_with_" + usr_id).size() == 0) { 34. jquery.post("/ajax.php", {func: 'createchat', userid: usr_id}, function(res){

6 35. createnewchatcommon(usr_id, name, thumb, res); 36. }); 37. return true; 38. }else 39. return false; 40. } function createnewchatcommon(usr_id, name, thumb, new_id){ 43. var new_chat = jquery("#chat_tpl").clone(); 44. new_chat.prependto("#chat_tab_bar").css("margin-top", "-275px"); 45. new_chat.attr("id", "chatwin_" + new_id); 46. new_chat.find(".c_chat_name").attr("id", "chatting_with_" + usr_id).html(name); 47. new_chat.find("img").attr("src", thumb); 48. new_chat.find("input").attr("id", "chat_input_" + new_id); 49. new_chat.find(".chat_flow").attr("id", "chat_flow_" + new_id); 50. new_chat.find("a[id^='chat_close_']").attr("id", 'chat_close_' + new_id); 51. togglechat(new_chat); 52. setupchatinput(new_id); 53. setupchatclose(); 54. new_chat.show('slow'); 55. } paceville4.png So the above is the JavaScript needed in order to create a new chat window, it is at the core of the whole application and it s executed when we click someone in the list. The main thing here is setting various ids on elements that previously had none, the chat_tpl div is at the bottom of the site HTML and is hidden, it gets copied every time we create a new chat window. Its HTML is identical to the HTML in listing 2 above. SetupChatInput will bestow the input box with the required functionality, on enter we will send the chat message to PHP, we will also create a new DIV with the contents of the message (more on that later). Everything now looks like in the picture to the right. 1. function createchat(){ 2. $user1 = $this->getloggedin()->id; 3. $user2 = $this->postarr['userid']; 4. $sql = "SELECT DISTINCT id FROM jos_chats WHERE (user1 = $user1 AND user2 = $user2) OR (user1 = $user2 AND user2 = $user1)"; 5. $chat_id = $this->loadresult($sql); 6.

7 7. if(!empty($chat_id)) 8. echo $chat_id; 9. else{ 10. $chat = new stdclass(); 11. $chat->user1 = $user1; 12. $chat->user2 = $user2; 13. $this->insertobject('jos_chats', $chat); 14. echo $this->db()->insertid(); 15. } 16. } And the chat inserting PHP. Note that we don t know who initiated the chat, hence the convoluted SQL, the alternative would be to have an extra table for that but that felt even less palatable. If we get an id from the database query we simply return it, otherwise we create the chat and use db()->insertid() to return its id. 1. function savechatmsg(){ 2. $obj = $this->arrtoobj($this->postarr, array("message", "to", "chat_id")); 3. $obj->from = $this->getloggedin()->id; 4. $this->insertobject('jos_chat_msgs', $obj); 5. echo $this->getloggedin()->name; 6. } paceville5.png Here is the PHP that gets called each time we submit a message, we need the message text itself of course and who is the recipient and the id of the chat it belongs to. Everything now looks like in the picture to the right for the recipient of our message. 1. function checkchatinit(){ 2. jquery.post("/ajax.php", {func: "getchattingwith"}, function(res){ 3. var msgs = eval('('+res+')'); 4. jquery.each(msgs, function(){ 5. if (jquery("#chatwin_" + this.chat_id).size() == 0) { 6. createnewchatcommon(this.id, this.name, this.thumb, this.chat_id); 7. jquery("#chat_flow_"+this.chat_id).append('<div>'+this.name+': '+this.message+'</div>'); 8. } 9. }); 10. });

8 11. } At the other end the above checkchatinit function is being run every 60 seconds. It will make use of createnewchatcommon to run exactly the same logic being run if we click someone in the available for chatting list. And the corresponding PHP: 1. function chatwinaction($id, $action){ 2. $id = $id == false? $this->postarr['id'] : $id; 3. $my_id = $this->getloggedin()->id; 4. $chat = $this->loadobject("select * FROM jos_chats WHERE id = $id"); if($chat->user1 == $my_id) 7. $chat->user1_closed = $action; 8. else 9. $chat->user2_closed = $action; $this->updateobject('jos_chats', array('user1_closed', 'user2_closed'), 'id', $chat); 12. } function closechatwin(){ 15. $this->chatwinaction(false, 1); 16. } function getchattingwith(){ 19. $this->cleanupchats(); 20. $my_id = $this->getloggedin()->id; 21. $sql 22. = "SELECT u.id, u.name, u.username, cu.thumb, msg.message, msg.chat_id, msg.id AS msgid FROM jos_chat_msgs msg 23. LEFT JOIN jos_users AS u ON u.id = msg.from 24. LEFT JOIN jos_community_users AS cu ON cu.userid = u.id 25. WHERE msg.to = $my_id AND msg.recd = 0" 26. ; $msgs = $this->loadobjectlist($sql); 27. foreach($msgs as $msg){ 28. $this->exec("update jos_chat_msgs SET recd = 1 WHERE id = ".$msg- >msgid); 29. $this->chatwinaction($msg->chat_id, 0); 30. } 31. echo json_encode($msgs); 32. } We ll get to cleanupchats later, at the moment it s good to know though that it s needed in order to display the chat windows correctly.

9 ChatWinAction is used to keep track of who has closed the chat window in question. When a chat window has been closed by only one of the participants and the person who still has it open on his/her part sends a message we trigger code that will open it again for the other person and set it to open. When a chat window has been closed by both participants it will be cleaned out, more on that later. The returned JSON will in this case contain the chat info and old messages in it, that way when a chat window re-displays it will contain the chat history, pretty common practice in the IM world. 1. function fetchnewmsgs(){ 2. var chats = jquery("div[id^='chatwin_']"); 3. if(chats.size() > 0){ 4. var ids = ''; 5. jquery.each(chats, function(){ ids += getid(jquery(this)) + ' '; }); 6. jquery.post("/ajax.php", {func:"fetchnewchatmsgs", chat_ids:ids}, function(res){ 7. var tmp = eval('('+res+')'); if(tmp.remove!= false){ 10. jquery.each(tmp.remove, function(){ 11. jquery("#chatwin_" + this).hide("slow").remove(); 12. }); 13. } jquery.each(tmp.msgs, function(){ 16. jquery("#chat_flow_"+this.chat_id).append('<div>'+this.name+': '+this.message+'</div>'); 17. }); 18. }); 19. } 20. } The returned JSON will contain all new messages, the chat id will be used in the JavaScript to update all the chat windows at the same time with their respective messages, having each chat update individually could potentially result in a lot of requests to the sever, doing like this is more efficient. Note the remove flag, if a chat is set to be removed it will simply disappear, that can happen if the other person has logged out. And the PHP: 1. function fetchnewchatmsgs(){ 2. $my_id = $this->getloggedin()->id;

10 3. $id_arr_post = explode(' ', trim($this->postarr['chat_ids'])); $ids = implode(',', $id_arr_post); $sql 8. = "SELECT u.id, u.name, u.username, msg.message, msg.chat_id, msg.id AS msgid FROM jos_chat_msgs msg 9. LEFT JOIN jos_users AS u ON u.id = msg.from 10. WHERE msg.chat_id IN($ids) AND msg.to = $my_id AND msg.recd = 0" 11. ; $msgs = $this->loadobjectlist($sql); $chat_ids = array(); 14. foreach($msgs as $msg) 15. $this->exec("update jos_chat_msgs SET recd = 1 WHERE id = ".$msg- >msgid); $chat_ids = $this->loadresultarray("select id FROM jos_chats WHERE (user1 = $my_id OR user2 = $my_id)"); 18. $remove_ids = array_diff($id_arr_post, array_unique($chat_ids)); 19. $robj = new stdclass(); 20. $robj->remove = empty($remove_ids)? false : $remove_ids; 21. $robj->msgs = $msgs; echo json_encode($robj); 24. } paceville6.png This is probably the most complex PHP logic in the whole application. The fetchnewmsgs JS function above will send a list of chat ids to the PHP, the ids will then be used to fetch only messages belonging to these chats. We will then compare the ids from the JavaScript with the chats that the user in question is actually participating in, all chats that are missing in the database will be marked to be removed. Damn I just realized that the above code could easily be optimized, can you see where? Check the listing below for the answer. To the right is what the chat looks like at the moment now that we have fetched a reply from the guy we are chatting with. 1. function getallchats(){ 2. $my_id = $this->getloggedin()->id; 3.

11 4. $sql 5. = "SELECT DISTINCT u.id, u.name, u.username, cu.thumb, chat.user1, chat.user1_closed, chat.user2, chat.user2_closed, chat.id AS chatid 6. FROM jos_chats chat 7. LEFT JOIN jos_users AS u ON u.id = IF($my_id = chat.user1,chat.user2,chat.user1) 8. LEFT JOIN jos_community_users AS cu ON cu.userid = u.id 9. WHERE (chat.user1 = $my_id OR chat.user2 = $my_id)" 10. ; 11. $chats = array(); 12. $chat_ids = array(); 13. foreach($this->loadobjectlist($sql) as $chat){ 14. if(!($chat->user1_closed == 1 && $chat->user1 == $my_id) &&!($chat- >user2_closed == 1 && $chat->user2 == $my_id) ){ 15. $chat->msgs = array(); 16. $chats[ $chat->chatid ] = $chat; 17. $chat_ids[] = $chat->chatid; 18. } 19. } $ids_str = implode(',',$chat_ids); 22. $sql 23. = "SELECT DISTINCT u.id, u.name, u.username, msg.message, msg.id AS msgid, msg.chat_id 24. FROM jos_chat_msgs msg 25. LEFT JOIN jos_users AS u ON u.id = msg.from 26. WHERE msg.chat_id IN($ids_str) ORDER BY msg.sent" 27. ; 28. $msgs = $this->loadobjectlist($sql); foreach($msgs as $msg) 31. $chats[ $msg->chat_id ]->msgs[] = $msg; $this->exec("update jos_chat_msgs SET recd = 1 WHERE chat_id IN($ids_str)"); return $chats; 36. } paceville7.png We re starting to come full circle, If I refresh the page the above PHP will now return all the chats I m participating in, and all their messages, we build them from scratch here in a lowered state.

12 The alternative would be to have the JS issue an ajax call after the page has finished loading but that would require two roundtrips to the server in order to load the page and I don t like that. After refreshing the chat will look like in the image to the right. If I click the header it will popup with all the old messages. 1. jquery("div[id^='chatwin_']").each(function(){ 2. togglechat(jquery(this)); 3. setupchatinput(getid(jquery(this))); 4. }); setupchatclose(); setinterval("updatechatcount()", 60000); 9. setinterval("checkchatinit()", 10000); 10. setinterval("fetchnewmsgs()", 5000); And the startup JS, we setup the already loaded chats whose existence was explained in the above listing. After that we set the intervals, we will check for a new count every minute, newly initiated chats every 10 seconds and for new messages to existing chats every 5 seconds. 1. function cleanupchats(){ $sess_ids = implode(',', $this->loadresultarray("select userid FROM jos_session")); $sql 6. = "SELECT * FROM jos_chats WHERE ( 7. user1 NOT IN($sess_ids) OR user2 NOT IN($sess_ids) 8. OR (user1_closed = 1 AND user2_closed = 1))" 9. ; 10. foreach($this->loadobjectlist($sql) as $chat){ 11. $this->exec("delete FROM jos_chat_msgs WHERE chat_id = {$chat- >id}"); 12. $this->deleteobject('jos_chats', 'id', $chat); 13. } 14. } Finally, the cleanup code, we will delete a chat window if one of the participants have logged out or if they both have closed the window in question. As the title implies we ve now added online/offline functionality and the ability to toggle the user list to show only friends or all members.

13 The online/offline functionality is the main thing here and the thing that took the most effort, we need to consider the following in order for it to work: 1.) First of all we need to store state in the DB to prevent the offline person from appearing in other people s lists. 2.) All chats that are open when the user goes offline needs to be removed both from the GUI and in the DB. 3.) State needs to be checked every time a page loads in order for the GUI to look correct, ie greyed out. 4.) When the chat button is clicked in order to go online we need to undo everything in # var intvalchatcount; 2. var intvalchatinit; 3. var intvalnewmsgs; 4. var chatoffline = 0; function clearintervals(){ 7. clearinterval(intvalchatcount); 8. clearinterval(intvalchatinit); 9. clearinterval(intvalnewmsgs); 10. } function setintervals(){ 13. intvalchatcount = setinterval("updatechatcount()", 60000); 14. intvalchatinit = setinterval("checkchatinit()", 10000); 15. intvalnewmsgs = setinterval("fetchnewmsgs()", 5000); 16. } function resetintervals(){ 19. clearintervals(); 20. setintervals(); 21. } function foldchatlist(){ 24. jquery("#chat_options").hide(); 25. jquery("#chat_ctrl").hide(); 26. jquery(".c_chat_user").remove(); 27. jquery("#c_chat").removeclass("c_chat_extended").addclass("c_chat"); 28. jquery("#chat_menu").removeclass("c_btn_extended").addclass("c_btn_normal"); 29. } function raisechatlist(){ 32. jquery("#chat_options").hide(); 33. jquery("#chat_menu").css({color: '#000'});

14 34. resetintervals(); 35. chatgetusers({func: 'chatsetoffline', value: 0, fetch: 1 }); 36. jquery("#chat_ctrl").show(); 37. } function getchatliststate(){ 40. if(jquery("#c_chat").hasclass("c_chat_extended")) 41. return "extended"; 42. else 43. return "folded"; 44. } The main thing here is that we need to save the intervals in variables in order to be able to turn them on/off since it doesn t make sense to search for new chat messages when the user in question is offline. Since we not raise and lower the chat list in various places this functionality had to be put in its own functions, namely raisechatlist and foldchatlist. 1. function chatgetusers(obj){ 2. jquery.post("/ajax.php", obj, function(ret){ 3. jquery("#c_chat").removeclass("c_chat").addclass("c_chat_extended"); 4. jquery("#chat_menu").removeclass("c_btn_normal").addclass("c_btn_extended"); 5. jquery("#chat_with_list").html(ret); 6. jquery(".c_chat_user").click(function(){ 7. var usr_id = jquery(this).attr("id").split('_').pop(); 8. var name = jquery(this).find(".c_chat_name:first").html(); 9. var thumb = jquery(this).find("img").attr("src"); 10. createnewchat(usr_id, name, thumb, 0); 11. }); 12. }); 13. } jquery("#chat_ctrl").click( 16. function(){ 17. var offset = jquery(this).offset(); 18. var cur = jquery("#chat_options"); 19. if(cur.css('display') == 'none') 20. cur.show(); 21. else 22. cur.hide(); 23. } 24. ); jquery("#chat_go_offline").click(function(){

15 27. foldchatlist(); 28. jquery("div[id^='chatwin_']").remove(); 29. jquery.post("/ajax.php", {func: 'chatsetoffline', value: 1 }); 30. jquery("#chat_menu").css({color: '#ccc'}); 31. clearintervals(); 32. }); jquery("#chat_show_friends").click(function(){ 35. jquery("#chat_options").hide(); 36. jquery(".c_chat_user").remove(); 37. chatgetusers({func: 'setchatshow', chat_show: 'friends' }); 38. }); jquery("#chat_show_all").click(function(){ 41. jquery("#chat_options").hide(); 42. jquery(".c_chat_user").remove(); 43. chatgetusers({func: 'setchatshow', chat_show: 'all' }); 44. }); jquery("#chat_btn").click(function(){ 47. if(getchatliststate() == "folded") 48. raisechatlist(); 49. else 50. foldchatlist(); 51. }); setupchatclose(); 54. if(chatoffline == 0) 55. setintervals(); When we click the Options button a brand new menu will show where we can choose to show only friends or all users who are currently online, we can of course also go offline. The listing above is about managing these options, note the chatoffline variable, we ll get to that one later. 1. function chatsetoffline(){ 2. $me = $this->getcomuser(); 3. $new_value = "chatoffline={$this->postarr['value']}"; 4. if(stripos($me->params, 'chatoffline') === false) 5. $me->params.= "$new_value\n"; 6. else{ 7. if($this->chatisoffline($me)) 8. $me->params = str_ireplace('chatoffline=1', $new_value, $me->params); 9. else

16 10. $me->params = str_ireplace('chatoffline=0', $new_value, $me->params); 11. } 12. $this->exec("update jos_community_users SET params = '{$me->params}' WHERE userid = {$me->userid}"); 13. if($this->postarr['fetch'] == 1) 14. $this->chatfetchonline(); 15. else 16. echo "ok"; 17. } So we ve got another parameter here, in addition to the ones we already control through the privacy settings, check the prior tutorial, the chatfetchonline function, it s been modified to respect chatoffline too now. 1. <?php 2. if(!cext()->isguest()): 3. $chat_offline = cext()->chatisoffline(); 4.?> 5. <script> var chatoffline = <?php echo $chat_offline?>; </script> 6. <div class="c_bar" id="c_bar"> 7. <div id="c_chat" class="c_chat clearfix"> 8. <div id="chat_options" class="chat_options" style="display:none;"> 9. <ul> 10. <li id="chat_go_offline">go offline</li> 11. <li id="chat_show_friends">show only friends</li> 12. <li id="chat_show_all">show all</li> 13. </ul> 14. </div> 15. <div id="chat_menu" class="c_btn c_btn_normal" <?php if($chat_offline):?> style="color:#ccc;" <?php endif?>> 16. <div id="chat_btn" class="chat_btn">chat (<strong><?php cext()- >chatechocount()?></strong>)</div> 17. <div id="chat_ctrl" class="chat_ctrl" style="display:none;"><strong>options</strong></div> 18. </div> 19. <div id="chat_with_list" class="chat_with_list"> 20. </div> </div> 24. <div id="chat_tab_bar" class="chat_tab_bar"> <?php 27. if($chat_offline == 0): 28. foreach(cext()->getallchats() as $chat_id => $chat): 29.?>

17 30. <div id="chatwin_<?php echo $chat_id?>" class="c_chat_window"> 31. <div class="c_btn c_btn_extended"> 32. <img src="<?php echo $chat->thumb?>" height="22" width="22"/> 33. <div id="chatting_with_<?php echo $chat->id?>" class="c_chat_name"><?php echo $chat->name?></div> 34. <a id="chat_close_<?php echo $chat_id?>" class="cwin_close_btn"></a> 35. </div> 36. <div id="chat_flow_<?php echo $chat_id?>" class="chat_flow"> 37. <?php foreach($chat->msgs as $msg):?> 38. <div><?php echo $msg->name.': '.$msg->message?></div> 39. <?php endforeach?> 40. </div> 41. <input class="inputbox chat_input" id="chat_input_<?php echo $chat_id?>" type="text" /> 42. </div> 43. <?php endforeach?> 44. <?php endif?> 45. </div> 46. </div> <div id="chat_tpl" class="c_chat_window" style="display:none"> 49. <div class="c_btn c_btn_extended"> 50. <img src="" width="22px" height="22px"/> 51. <div class="c_chat_name"></div> 52. <a id="chat_close_" class="cwin_close_btn"></a> 53. </div> 54. <div class="chat_flow"></div> 55. <input type="text" class="inputbox chat_input"/> 56. </div> 57. <?php endif?> And finally the PHP that renders everything when the page loads, note the new menu there and the fact that we re setting the JavaScript variable mentioned above. It s the reason the offline/online state of the GUI can be kept when the user switches page.