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