im.php

   1 <?php
   2
   3 include_once("auth.php");
   4
   5 ?>
   6
   7 <html>
   8 <script type="text/javascript" src="ajax.js"></script>
   9 <script type="text/javascript" src="debugger.js"></script>
  10 <script>
  11 var last_chat_id = 0;
  12 var chat_div;
  13 var chat_json = new Object();
  14 var chat_ping = null;
  15
  16 if(document.layers)
  17     document.captureEvents(Event.KEYDOWN);
  18         document.onkeydown =
  19     function (evt) {
  20         var keyCode = evt ? (evt.which ? evt.which : evt.keyCode) : event.keyCode;
  21         if (keyCode == 13) {
  22                         document.getElementById('send').click();
  23         } else return true;
  24     };
  25
  26 function parse_message_response(){
  27         var message_count = chat_json.m.length;
  28         if(message_count > 0) { beep_sound.play(); }
  29         var message_text = "";
  30         for(var i = 0; i < message_count; i++){
  31                 message_text += '<div><font color="red">' + chat_json.m[i].t + '</font>&nbsp;';
  32                 message_text += '<font color="blue">' + chat_json.m[i].n + '</font>&nbsp;';
  33                 message_text += chat_json.m[i].c + '</div>';
  34                 last_chat_id = chat_json.m[i].id;
  35         }
  36         document.getElementById("chat_window").innerHTML += message_text;
  37 }
  38
  39 function update_ping(){
  40         if(chat_ping > 2000){ document.getElementById("chat_status").innerHTML = "<img src='./gfx/bullet_red.png'>"; }
  41         else if (chat_ping > 1000){ document.getElementById("chat_status").innerHTML = "<img src='./gfx/bullet_yellow.png'>"; }
  42         else { document.getElementById("chat_status").innerHTML = "<img src='./gfx/bullet_green.png'>"; }
  43 }
  44
  45 function getChat(url, pageElement){
  46         // START TIMER
  47         var timer = new Date();
  48         var t_start = timer.getTime();
  49         //debugEvent(url, "get");
  50
  51         // WE USE A JAVASCRIPT FEATURE HERE CALLED "INNER FUNCTIONS"
  52         // USING THESE MEANS THE LOCAL VARIABLES RETAIN THEIR VALUES AFTER THE OUTER FUNCTION
  53         // HAS RETURNED. THIS IS USEFUL FOR THREAD SAFETY, SO
  54         // REASSIGNING THE ONREADYSTATECHANGE FUNCTION DOESN'T STOMP OVER EARLIER REQUESTS.
  55         function ajaxBindCallback(){
  56                 if(ajaxRequest.readyState == 0) { window.status = "Waiting...";      }
  57                 if(ajaxRequest.readyState == 1) { window.status = "Loading Page..."; }
  58                 if(ajaxRequest.readyState == 2) { window.status = "Data Received...";}
  59                 if(ajaxRequest.readyState == 3) { window.status = "Interactive...";  }
  60                 if(ajaxRequest.readyState == 4) {
  61                         window.status = "Transaction Complete...";
  62
  63       // STOP TIMER AND FIND DIFFERENCE
  64       // MUST CREATE NEW TIMER INSTANCE :)
  65       var timer2 = new Date();
  66       var t_end = timer2.getTime();
  67       var t_diff = t_end - t_start;
  68       chat_ping = t_diff;
  69       update_ping();
  70
  71       // TEST HTTP STATUS CODE - DISPLAY IN DUBUGGER AND STATUS
  72       switch (ajaxRequest.status.toString()) {
  73         case "200" :
  74           window.status = "Page Loaded Sucessfully";
  75                   chat_json = JSON.parse(ajaxRequest.response);
  76                   parse_message_response();
  77           debugEvent(url, "got", ajaxRequest.responseText, t_diff);
  78           break;
  79         case "403" :
  80           window.status = "Forbidden...";
  81           debugEvent(url, "error_403", ajaxRequest.responseText, t_diff);
  82           break;
  83         case "404" :
  84           window.status = "File Not Found...";
  85           debugEvent(url, "error_404", ajaxRequest.responseText, t_diff);
  86           break;
  87         case "500" :
  88           window.status = "File Not Found...";
  89           debugEvent(url, "error_500", ajaxRequest.responseText, t_diff);
  90           break;
  91         default :
  92           window.status = "Unknown Ajax Error..."+ajaxRequest.status.toString();
  93         }
  94                         }
  95         }
  96         var ajaxRequest = null;
  97         // BIND OUR CALLBACK THEN HIT THE SERVER...
  98         if (window.XMLHttpRequest) {
  99                 ajaxRequest = new XMLHttpRequest();
 100                 ajaxRequest.onreadystatechange = ajaxBindCallback;
 101                 ajaxRequest.open("GET", url, true);
 102                 ajaxRequest.send(null);
 103         } else if (window.ActiveXObject) {
 104                 ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
 105                 if (ajaxRequest) {
 106                         ajaxRequest.onreadystatechange = ajaxBindCallback;
 107                         ajaxRequest.open("GET", url, true);
 108                         ajaxRequest.send();
 109                         }
 110                 }
 111 }
 112
 113 function start_updates(){
 114         beep_sound = document.getElementById('beep_sound');
 115         beep_sound.src = 'sfx/beep.wav';
 116         click_sound = document.getElementById('click_sound');
 117         click_sound.src = 'sfx/click.wav';
 118         document.getElementById('message').focus();
 119         chat_div = document.getElementById("chat_window");
 120         getChat( "im_chat_update.php?id=-1", "chat_window");
 121         setInterval(update_chat_messages, 2000);
 122         update_users_online();
 123         setInterval(update_users_online, 15000);
 124 }
 125
 126 function update_chat_messages(){
 127         getChat( "im_chat_update.php?id="+last_chat_id, "chat_window");
 128         chat_window.scrollTop = chat_window.scrollHeight;
 129 }
 130
 131 function update_users_online(){
 132         getPage("im_user_update.php", "chat_users", "");
 133 }
 134
 135 function send_message(){
 136         sendData("im_send_message.php?message="+document.getElementById("message").value);
 137         click_sound.play();
 138         document.getElementById("message").value = '';
 139 }
 140
 141 function disable_sound(){
 142         beep_sound.src = '';
 143         click_sound.src = '';
 144 }
 145
 146 </script>
 147
 148 <style>
 149
 150 body {
 151         font-family: Tahoma, sans-serif;
 152         font-size: 14px;
 153         background-color: #c5bcff;
 154 }
 155 #chat_window {
 156         border: solid 1px #000;
 157         background-color: #fff;
 158         float: left;
 159         width: 490px;
 160         padding-left: 10px;
 161         overflow:hidden;
 162         height:300px;
 163 }
 164 #chat_users {
 165         border: solid 1px #000;
 166         background-color: #dedede;
 167         float: right;
 168         width: 150px;
 169         padding-left: 10px;
 170         overflow:hidden;
 171         height:300px;
 172 }
 173 #users_list {
 174         list-style-type: none;
 175 }
 176 #users_list li {
 177         padding-top: 5px;
 178 }
 179 #send {
 180         padding: 10px;
 181 }
 182 </style>
 183 <body  onLoad="start_updates();">
 184 <audio id="beep_sound" style="display: none;"></audio>
 185 <audio id="click_sound" style="display: none;"></audio>
 186 <div id=chat_window></div>
 187 <div id=chat_users></div>
 188 <div id=chat_input>
 189         <table><tr>
 190                 <td><textarea id="message" cols=65 rows=1></textarea></td>
 191                 <td><button id="send" onCLick="send_message();">Send</button></td>
 192                 <td><div id=chat_status><img src="./gfx/bullet_green.png"></div></td>
 193                 <tr><td><button onCLick="openDebug();">Debug</button></td><td></td></tr>
 194         </tr></table>
 195 </div>
 196 </body>
 197 </html>