Pastebin launched a little side project called VERYVIRAL.com, check it out ;-) Want more features on Pastebin? Sign Up, it's FREE!
Guest

example_chat.tpl.php

By: a guest on Jul 8th, 2012  |  syntax: JavaScript  |  size: 6.20 KB  |  views: 246  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. <script src="http://<?php print $_SERVER['SERVER_ADDR'] ?>:8080/socket.io/socket.io.js"></script>
  2. <script>
  3.   (function($){
  4.     var myNick = 'me';
  5.     var newlyJoined = true;
  6.     var socket = io.connect('http://<?php print $_SERVER['SERVER_ADDR'] ?>:8080');
  7.  
  8.     socket.on('connect', function () {
  9.       $('#chat').addClass('connected');
  10.     });
  11.  
  12.     socket.on('announcement', function (msg) {
  13.       $('#lines').append($('<p>').append($('<em>').text(msg)));
  14.     });
  15.  
  16.     socket.on('nicknames', function (nicknames) {
  17.     $('#nicknames').empty().append($('<span>Online:</span>'));
  18.     for (var i in nicknames) {
  19.         var attrs = {
  20.             'class': 'chatNickname',
  21.             'id': nicknames[i],
  22.             'text': nicknames[i]
  23.         };
  24.         $('#nicknames').append($('<div>',attrs));
  25.     }
  26. });
  27.  
  28.     socket.on('user message', message);
  29.     socket.on('private message', privateMessage);
  30.  
  31.     socket.on('reconnect', function () {
  32.       $('#lines').remove();
  33.       message('System', 'Reconnected to the server');
  34.     });
  35.  
  36.     socket.on('reconnecting', function () {
  37.       message('System', 'Attempting to re-connect to the server');
  38.     });
  39.  
  40.     socket.on('error', function (e) {
  41.       message('System', e ? e : 'A unknown error occurred');
  42.     });
  43.  
  44.     socket.on('chat log', function(chatlog) {
  45.       if (newlyJoined) {
  46.     var i = 0;
  47.     for (stamp in chatlog) {
  48.       if (chatlog[stamp].type == 'user message') {
  49.         var ts   = tstamp(stamp);
  50.         var nick = chatlog[stamp].nick
  51.         var msg  = chatlog[stamp].msg
  52.         message(ts, nick, msg);
  53.         i++;
  54.       }
  55.     }
  56.     if (i > 0) {
  57.       $('#lines').append($('<hr>')).append($('<small style="text-align:center; display:block; color: #888;">').text('Chat messages posted within the past half hour appear above this line.')).append($('<hr>'));
  58.       $('#lines').get(0).scrollTop = 10000000;      
  59.     }
  60.     newlyJoined = false;
  61.       }
  62.     });
  63.                    
  64.     function message (msg_time, from, msg) {
  65.       $('#lines').append($('<p>').append($('<small>').text(msg_time)).append($('<b>').text(from), linkify(msg)));
  66.     }
  67.  
  68.     function privateMessage (msg_time, from, msg) {
  69.       $('#chatLogDiv').append($('<p>').append($('<small>').text(msg_time)).append($('<b>').text(from), linkify(msg)));
  70.     }
  71.    
  72.     function linkify(inputText) {
  73.       //URLs starting with http://, https://, or ftp://
  74.       var replacePattern1 = /(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim;
  75.       var replacedText = inputText.replace(replacePattern1, '<a href="$1" target="_blank">$1</a>');
  76.  
  77.       //URLs starting with www. (without // before it, or it'd re-link the ones done above)
  78.       var replacePattern2 = /(^|[^\/])(www\.[\S]+(\b|$))/gim;
  79.       var replacedText = replacedText.replace(replacePattern2, '$1<a href="http://$2" target="_blank">$2</a>');
  80.  
  81.       //Change email addresses to mailto:: links
  82.       var replacePattern3 = /(\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,6})/gim;
  83.       var replacedText = replacedText.replace(replacePattern3, '<a href="mailto:$1">$1</a>');
  84.  
  85.       return replacedText
  86.     }
  87.  
  88.     function tstamp(stamp) {
  89.       var currentTime = new Date();
  90.       if (typeof stamp != 'undefined') {
  91.     currentTime.setTime(stamp);
  92.       }
  93.       var days = new Array('Sun', 'Mon', 'Tue', 'Wed', 'Thr', 'Fri', 'Sat');
  94.       var day = currentTime.getDay();
  95.       var hours = currentTime.getHours();
  96.       var minutes = currentTime.getMinutes();
  97.       if (minutes < 10) {
  98.     minutes = "0" + minutes;
  99.       }
  100.       if (hours > 11) {
  101.     var ap = 'p';
  102.       }
  103.       else {
  104.     var ap = 'a';
  105.       }
  106.       if (hours > 12) {
  107.     hours = hours - 12;
  108.       }
  109.       return "["+ days[day] + " " + hours + ":" + minutes + ap + "m] ";
  110.     }
  111.  
  112.     function startPrivateChat(targetUser, sendingUser){
  113.             if(targetUser !=sendingUser){
  114.                 var privateMessage1="starting private chat with " + targetUser + ". My name is " + sendingUser;
  115.                 var chatBoxId= targetUser + 'ChatBox';
  116.                 $("#content").append('<div class="chatBox" id="' + chatBoxId + '">' + sendingUser + ', ' + targetUser + '</div>');
  117.                 $('#' + chatBoxId).append('new private chat');
  118.                 $('#' + chatBoxId).dialog();
  119.                 privateMessage(tstamp(), myNick, privateMessage1);
  120.                 //socket.emit('private message', targetUser, privateMessage1);
  121.                 clear();    
  122.             }
  123.         }
  124.          
  125.            
  126.     $(document).ready(function() {
  127.         $('#nicknames').on('click', '.chatNickname', function(){
  128.           startPrivateChat(this.id,myNick);
  129.         });
  130.        
  131.       $('input#message').focus(function() {
  132.     if ($(this).val() == 'Type your chat messages here...') {
  133.       $(this).val('');
  134.     }
  135.       });
  136.  
  137.       $('input#show-timestamps').click(function() {
  138.     if ($(this).is(':checked')) {
  139.       $('#messages p small').show();
  140.     }
  141.     else {
  142.       $('#messages p small').hide();
  143.     }
  144.       })
  145.  
  146.       socket.emit('nickname', '<?php print $username ?>', function (nick) {
  147.     if (nick != 'me') {
  148.       myNick = nick;
  149.       socket.emit('get log');          
  150.       return $('#chat').addClass('nickname-set');
  151.     }
  152.       });
  153.  
  154.       $('#send-message').submit(function () {
  155.     message(tstamp(), myNick, $('#message').val());
  156.     socket.emit('user message', $('#message').val());
  157.     clear();
  158.     $('#lines').get(0).scrollTop = 10000000;
  159.     return false;
  160.       });
  161.  
  162.       function clear () {
  163.     $('#message').val('').focus();
  164.       };
  165.  
  166.     });
  167.   })(jQuery);
  168. </script>
  169. <?php
  170. drupal_add_library('system', 'ui.dialog');
  171. drupal_add_js('jQuery(document).ready(function(){jQuery("#dialog").dialog({ modal: true, autoOpen: false });});', 'inline');
  172. ?>
  173. <div id="dialog" title="Basic dialog">
  174.         <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
  175. </div>
  176. <div id="chat">
  177.   <div id="messages">
  178.     <div id="nicknames">
  179.     </div>
  180.     <div id="lines">
  181.     </div>
  182.   </div>
  183.   <form id="send-message" autocomplete="off">
  184.     <input id="message" type="text" value="Type your chat messages here..." autocomplete="off" />
  185.     <button>Send</button>
  186.   </form>
  187. </div>
  188. <small><input id="show-timestamps" type="checkbox" checked="checked" /> Show timestamps</small>
  189.  
  190. <div id='chatLogDiv'>test <br /></div>