Chat php


Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Chat php

  1. 1. In this tutorial we will learn about the basics of text chat.And to do that, we will use a simple idea for text chat box routines.Before you start:We will use multiple programming languages in this tutorial, so please make sure before you startthat you know:1-The basics of HTML elements and Objects.2-The basics of CSS to create a simple layout for the chat box elements.3-Intermediate skills in Javascript to control all the chat box functionality (client side).4-Intermediate skills in php to process incoming and outgoing information (server side).And we will use an Ajax script to create a connection between the Server and Clients.So I will use Ajax snippet I posted here before.And that Ajax snippet will allow you to call another function when the server responses.Now let’s get into work:What are the procedures to accomplish a basic chat?To do List:- Create the user interface.- Style user interface.- Coding Client/Server.Creating user interface :(index.htm)Within the document’s body we need to add:1-Form for Sign-in / Sign-out operations and let’s give it an id and set it to "signInForm"Inside that form create the following elements and give it the associated idElement id---------- --Textbox "userName"Submit button "signInButt"Span "signInNmae"Now, since I decided to use the same button for signing in and out I will give that button a name andI will change it accordingly.That’s why I’ll give the submit button a name="signIn" as initial value.2-Div element to view the messages, give it id="chatBox"3-Div element to show currently online users, give it id ="usersOnLine".4-Another Form to handle message submitting, give it id ="messageForm" that contains thefollowing elements:Element id---------- --Textbox "message"
  2. 2. Submit button "send"Div "serverRes"<html>0203 <head>04 <title>DIC ChatBox Beta 1</title>05 </head>0607 <body>0809 <h1></DIC> Chat Box</h1>10 <form id="signInForm">11 <input id="userName" type="text">12 <input id="signInButt" name="signIn" type="submit" value="Sign in">13 <span id="signInName">User name</span>14 </form>1516 <div id="chatBox"></div>1718 <div id="usersOnLine"></div>1920 <form id="messageForm">21 <input id="message" type="text">22 <input id="send" type="submit" value="Send">23 <div id="serverRes"></div>24 </form>25 </body>26 </html>That’s all elements we need, let’s save our HTML document as "index.htm".Creating the style sheet: (cb_style.css)Let’s make it simple and clean so everyone else can edit it easily.We will style each element depending on its idHere is the CSS we need, it’s very simple so no need to add any comment#signInForm, #messageForm {02 margin:0px;03 margin-bottom:1px;04 }05 #userName {06 width: 150px;07 height: 22px;
  3. 3. 08 border: 1px teal solid;09 float:left;10 }11 #signInButt {12 width: 60px;13 height: 22px;14 }15 #signInName{16 font-family:Tahoma;17 font-size:12px;18 color:orange;19 }20 #chatBox {21 font-family:tahoma;22 font-size:12px;23 color:black;24 border: 1px teal solid;25 height: 225px;26 width: 400px;27 overflow: scroll;28 float:left;2930 }31 #usersOnLine{32 font-family:tahoma;33 font-size:14;34 color:orange;35 border:1px teal solid;36 width:150px;37 height:225px;38 overflow:scroll;39 margin-left:1px;40 }41 #message {42 width: 350px;43 height: 22px;44 border: 1px teal solid;45 float:left;46 margin-top:1px;47 }48 #send {49 width: 50px;50 height: 22px;51 float:left;52 margin:1px;53 }
  4. 4. 54 #serverRes{55 width:150px;56 height:22px;57 border: 1px teal solid;58 float:left;59 margin:1px;60 }Save that style as "cb_style.css" to same directory where we saved the index.htm before.Now, we need to link the index.htm with cb_style.css.At the document’s header part add this codeview sourceprint?1 <link rel="stylesheet" type="text/css" href="cb_style.css">Take a look at the screen shot it must be similar, if not please make sure that you typed theprevious code correctly.Resized to 83% (was 607 x 491) - Click image to enlargeAfter we finished working on the HTML elements and the style we’ll work on coding theseelements to do what it has to do.Coding:In this part we will code the client side in javascript and the server side in php
  5. 5. As everybody knows there are 4 basic procedures in every text chat application which are:1- Signing in 2- Sending messages 3- Updating user’s data 4- Signing outAnd of course we need some interface to transfer the data between the client and the serverHere I will use XMLHTTP request which is known as AJAXIm not going to talk about Ajax and how it works, so I will use an old snippet of Ajax that Iposted here.I will just mention its syntaxTo send data we just call the Ajax function, give it the sending method("GET"/"POST"),"therequested URL","data as name=value pairs",the function handler that will receive the serverresponse)1 Ajax_Send("POST","my_url","name1=ahmad&name2=511",reponseFunc);Save the snippet in the same directory and rename it to "ajax.js"So let’s link this snippet to the index.htm like this:In the document header add this code1 <script type="text/javascript" src="ajax.js"></script>Client side: (chatBox.js / hideShow()): FunctionFirst create the function "hideShow(hs)" that will control signInForm and messageFromvisibilityWe need to pass a string parameter to show/hide forms accordingly.By default we want the messageForm to be hidden, that’s so we need to pass the function"show" as parameter that will hide the signInForm and show the messageFormThe name/value attributes of signInButt and the signInName will change too.And when we pass it "hide" the things will go reverseOpen a new text document and type our hideShow() function function hideShow(hs){02 if(hs=="hide"){03 signInForm.signInButt.value="Sign in"04"signIn"05"none"06"block"07 signInName.innerHTML=""08 }09 if(hs=="show"){10 signInForm.signInButt.value="Sign out"11"signOut"12"block"13"none"14 signInName.innerHTML=signInForm.userName.value15 }
  6. 6. 16 }Save the file as "chatbox.js" to the same directory we already working inOpen the index.htm file and link "chatbox.js" to it by adding this code in the document’sheader1 <script type="text/javascript" src="chatbox.js"></script>As we said before we need the meesageForm to be hidden by default so edit the body tag tocall hideShow() function to hide the messageForm on body’s load event like this1 <body onload="hideShow(hide)">Create two empty text files:"onlineusers.txt" will store the already signed in users"room1.txt" will store the recently sent messages (last 20 in our case)Make sure that the tow files are having write permission.Notes:Take a look at the flowchart in each procedure, it will give you a better understanding abouthow things are goes.Part#1: Singing in
  7. 7. Resized to 97% (was 519 x 799) - Click image to enlargeClient side: (chatbox.js / signInOut()): FunctionUser will enter the user name he want and hit [signInButt] which has "signIn" as name’svalue right nowThe [signInForm] form will call the function [signInOut()] on submit event and exit.[signInOut()] function will validate the user name for existing spaces (you can add any
  8. 8. validation rules at this part.The function will check the [signInButt] name if it’s equal to "signIn" (which already is)If so, collect the user name and the sign in operation as name=value pairsSend the data to server-side script "users.php" and let the Ajax to call [checkSignIn] functionon server response.Exit the function01 // Sign in and Out02 function signInOut(){03 // Validation if (signInForm.userName.value=="" || signInForm.userName.value.indexOf("04 ")>-1){ alert("Not valid user namenPlease make sure your user name didnt05 contains a spacenOr its not empty.");06 signInForm.userName.focus();07 return false;08 }0910 // Sign in11 if ("signIn"){12 data="user=" + signInForm.userName.value +"&oper=signin"13 Ajax_Send("POST","users.php",data,checkSignIn);14 return false15 }16 }Server side: (users.php)users.php will load the "onlineusers.txt" file to $onlineusers_file using built in (file) functionwhich will converts the file to an arrayCheck if the client sent the user and the oper variablesIf so, search the $onlieusers_file if the sent user name is exist, if so get the user indexIf the operation is "signin" and user is not exist, add this user to $onlineusers_file arrayCall the function [saveUsers()] to save the changes.Send the "signin" string to the client and exitIf the user is exist send the "userexist" string to the client and exitThe [saveUsers()] function will receive an arrayOpen the onlineusers.txt file for over writingLock the fileWrite the array elements with linefeed characterUnlock the fileClose the filefunction saveUsers($onlineusers_file){
  9. 9. 02 $file_save=fopen("onlineusers.txt","w+");03 flock($file_save,LOCK_EX);04 for($line=0;$line<count($onlineusers_file);$line++){05 fputs($file_save,$onlineusers_file[$line]."n");06 };07 flock($file_save,LOCK_UN);08 fclose($file_save);09 }1011 $onlineusers_file=file("onlineusers.txt",FILE_IGNORE_NEW_LINES);12 if (isset($_POST[user],$_POST[oper])){13 $user=$_POST[user];14 $oper=$_POST[oper];15 $userexist=in_array($user,$onlineusers_file);16 if ($userexist)$userindex=array_search($user,$onlineusers_file);1718 if($oper=="signin" && $userexist==false){19 $onlineusers_file[]=$user;20 saveUsers($onlineusers_file);21 echo "signin";22 exit();23 }2425 if($oper=="signin" && $userexist==true){26 echo "userexist";27 exit();28 }29 }After the user.php sent the data, the Ajax will detect server response and execute the functionwe specified [checkSignIn()]Client side: (chatbox.js / checkSignIn()) Function:The function will read the server response text (res)If the server response is "userexist" the function will alert the user to change his sign in nameIf response text is equal to "signin" that means the user name was accepted and it’s ready touseCall [hideShow()] function to hide the [signInForm] and show the [messageForm]And the [hideShow()] function now will set the name of the [signInButt] to "signOut" and itsvalue to "Sign out" to be used in signing out procedureCreate an interval [updateIntrerval] to call each 3 seconds a new function we will create later[updateInfo()] which will handle the update of online users and sent messages.Show "Sign in" notification in the [serverRes] DIV01 // Sign in response02 function checkSignIn(res){03 if(res=="userexist"){ alert("The user name you typed is already existnPlease try another04 one");
  10. 10. 05 return false;06 }07 if(res=="signin"){08 hideShow("show")0910 messageForm.message.focus()11 updateInterval=setInterval("updateInfo()",3000);12 serverRes.innerHTML="Sign in"13 }14 }Part#2: Sending messages
  11. 11. Client side: (chatbox.js / sendMessage()) FunctionThe user types a message in the [message] text box and hit [send] buttonThe form submit event will call the [sendMessage()] functionThe function will collect the user name and the message in one string as name=value pairsUse Ajax to send the data to "send.php" script on the server and call the function [sentOk]when server response1 // Send message2 function sendMessage(){3 data="message="+messageForm.message.value+"&user="
  12. 12. lue4 serverRes.innerHTML="Sending"5 Ajax_Send("POST","send.php",data,sentOk)6}Server side: (send.php)send.php receives the message and strips the HTML/PHP tags and slashes right awayReceives the user tooLoad the room1.txt file into $room_file and convert it to array using built in(file) function.Create a new array element that contain the server time at the beginning, the string "<!@!>"as separator, the user name , ": " and the messageNote: "<!@!>" has no meaning, it’s just a string we think that it will never occurs in themessages and we will use it again to separate the server time from the messagesCheck if the $room_file array element’s count is greater than 20(last 20 recently sentmessages), when it’s true remove the first elements in the array (the oldest message), andthat’s will work just like a buffer for the sent messagesNote:The number (20) means that the maximum number of messages that the client can receive ineach update is 20So maximizing this number will provides more messages buffer sizeAnyway, send.php will open the "room1.txt" file for over writing nowLock the fileWrite the array’s elements with line feed characterUnlock the fileClose the fileSend "sentok" string to the client which will be received by [sentOk()] function that willexecute on server response.Exit01 $message=strip_tags($_POST[message]);02 $message=stripslashes($message);03 $user=$_POST[user];0405 $room_file=file("room1.txt",FILE_IGNORE_NEW_LINES);0607 $room_file[]=time()."<!@!>".$user.": ".$message;08 if (count($room_file)>20)$room_file=array_slice($room_file,1);09 $file_save=fopen("room1.txt","w+");10 flock($file_save,LOCK_EX);11 for($line=0;$line<count($room_file);$line++){12 fputs($file_save,$room_file[$line]."n");13 };14 flock($file_save,LOCK_UN);15 fclose($file_save);16 echo "sentok";
  13. 13. 17 exit();Save the file as "send.php" to the same directory we are working inClient side: (chatbox.js / sentOk()) FunctionThe function check if the response text is "sentok"If so, clear the [message] text box valueSet the focus the [message] text boxShow the notification "Sent" in the [serverRes] DIVIf the server response is not equals to "sentok" the function will show "Not sent" in the[serverRes] DIV01 // Sent Ok02 function sentOk(res){03 if(res=="sentok"){04 messageForm.message.value=""05 messageForm.message.focus()06 serverRes.innerHTML="Sent"07 }08 else{09 serverRes.innerHTML="Not sent"10 }11 }Part#3: Updating user’s dataHere we have two types of the data we need to update (online users and the messages)If you still remember, we create the [updateInterval] after sign in procedure done, and thisinterval will call the [updateInfo()] function every 3 secondsClient side: (chatbox.js / updateInfo()) FunctionShow the "Updating" string in the [serverRes] DIVUse Ajax to call "user.php" script on server with no data to send and direct it to call[showUsers()] function on server responseUse Ajax to call "receive.php" on the server and send the variable lastReceived then call[showMessages()] function on server responseNow before we write this function we need to define the lastReceived variable out side thefunction making it have a global scope which will allow us to change/read its value fromwithin [updateInfo()] and [showMessages()] functionsAnd maybe you will use it as a counter for the received messagesSo at the top part of [chatbox.js] and outside any function let’s add this:1 lastReceived=0And here is the function1 // Update info2 function updateInfo(){
  14. 14. 3 serverRes.innerHTML="Updating"4 Ajax_Send("POST","users.php","",showUsers)5 Ajax_Send("POST","receive.php","lastreceived="+lastReceived,showMessages)6}Updating online users:Server side: (users.php)When the user.php receives nothing from the client it will load the onlineuser.txt file to$onlineusers_file arrayJoin that array with the string "<br>" and then send the joined array to the [sowUsers()]function on the client’s machinesOpen the users.php file and add these two lines to it (at the bottom)1 $olu=join("<br>",$onlineusers_file);2 echo $olu;Save the fileClient side: (chatbox.js / showUsers()) FunctionThis function will receive the online-users joined array from the server and display it as it isinside the [usersOnLine] DIV1 // update online users2 function showUsers(res){
  15. 15. 3 usersOnLine.innerHTML=res4}Updating messages:Server side: (receive.php)receive.php will receive the lastreceived variable from the client and assign it to $lastreceivedLoad the room1.txt file to $room_file arrayLoop all over the array elementsRead each element and split the server time from the message (using the "<!@!>" string we
  16. 16. added before) to $messageArrNow the message time is $messageArr[0] and the username with the message is$messageArr[1]Check if the message time > $lastreceived then send this message with HTM line break tag tothe client because he didn’t receive it yet. (Depending on the lastreceived time the client sent)After loop is done, send "<SRVTM>" string and the $messageArr[0] (which is now carry thelast message’s time) to the clientNote: the string "<SRVTM>" has no meaning, we will just use it to separate the messagesfrom the last message received time1 $lastreceived=$_POST[lastreceived];2 $room_file=file("room1.txt",FILE_IGNORE_NEW_LINES);3 for($line=0;$line<count($room_file);$line++){4 $messageArr=split("<!@!>",$room_file[$line]);5 if($messageArr[0]>$lastreceived)echo $messageArr[1]."<br>";6}7 echo "<SRVTM>".$messageArr[0];Save the file as "receive.php" to the same directory we are working in.Client side: (chatbox.js / showMessages()) FunctionThe function will receive a string with all messages connected together with "<br>" and thelast element is the last message time and it’s connected with "<SRVTM>"First, we will clear the [serverRes] DIVThen we split the last received time from the messages into msgTmArr array using the string"<SRVTM>"Now we have array with two elements:msgTmArr[0] contains all none received yet messagesmsgTmArr[1] contains the last message’s time that delivered to the clientNow Assign the msgTmArr[1] to lastReceived variable (that we defined it before),so we willuse it again in the next [updateInfo()] callCreate a new HTML span element to contain the received messagesInsert the msgTmArr[0] in the Span inner htmlAppend the span to the [chatbox] DIVUpdate the [chatbox] DIV vertical scroll bar to show the last inserted line01 // Update messages view02 function showMessages(res){03 serverRes.innerHTML=""04 msgTmArr=res.split("<SRVTM>")05 lastReceived=msgTmArr[1]06 messages=document.createElement("span")07 messages.innerHTML=msgTmArr[0]08 chatBox.appendChild(messages)09 chatBox.scrollTop=chatBox.scrollHeight10 }
  17. 17. Part#4: Signing outClient side: (chatbox.js / signInOut()) FunctionUser click on the singInButt (its value now is "Sign out" and its name is "signOut")The [signInForm] will call the [signInOut()] function and now the signInButt has the name"signOut"The function will check the user name validation. (The validation is useless here because theuser is passed this validation when he signed in)The function will check if the signInButt name is equals to "signOut"Collect user and oper dataSend the data using Ajax to users.php and tell Ajax to execute [checksignOut()] function onserver responseInside the [signInOut()] function and just before closing brackets add this code:1 // Sign out2 if ("signOut"){
  18. 18. 3 data="user=" + signInForm.userName.value +"&oper=signout"4 Ajax_Send("POST","users.php",data,checkSignOut);5 return false6}Server side: (users.php)users.php will load the onlineusers.txt file to $onlineusers_file arrayReceive the user and oper variables from the clientSearch the array if the user exists; if so get its indexCheck if the oper is equals to "signout" and the user is existIf so, splice the user from the arraySend "signout" string to the clientExitIf the user not exists send "usernotfound" to the client and exit.Open the users.php file and add this code after the part of the sign in procedure (before theclosing bracket of (if isset) statement)So if the sign in and out check failed, we will then join the array and send it back to the client01 if($oper=="signout" && $userexist==true){02 array_splice($onlineusers_file,$userindex,1);03 saveUsers($onlineusers_file);04 echo "signout";05 exit();06 }0708 if($oper=="signout" && $userexist==false){09 echo "usernotfound";10 exit();11 }Client side: (chatbox.js / checkSignOut())The [checkSignOut()] function reads the server response and if it’s equals to "usernotfound"show "Sign out error" in the [serverRes] DIV and change the response text to "signout"If the server response text is equals to "signout", hide the [messageForm] and show the[signInForm]Clear the updateIntervalShow "Sign out" string in [serverRes] DIVNote: the [hideShow()] function will rename the signInButt to "signIn" and chage its value to"Sign in" tooExit01 // Sign out response02 function checkSignOut(res){03 if(res=="usernotfound"){04 serverRes.innerHTML="Sign out error";05 res="signout"
  19. 19. 06 }07 if(res=="signout"){08 hideShow("hide")09 signInForm.userName.focus()10 clearInterval(updateInterval)11 serverRes.innerHTML="Sign out"12 return false13 }14 }One other thing we have to doIf the user leave the site he must sign out automatically, that’s so we will call the[signInOut()] function on unload or on beforeunload eventAnd to do that we have to change the [signInButt] name to"signOut" then we call the function[signInOut()]Edit the document’s body tag to be like this: <body onbeforeunload=";signInOut()"1 onload="hideShow(hide)">And that’s allYou must have now 9 files:1-ajax.js2-chatbox.js3-index.htm4-cb_style.css5-users.php6-send.php7-receive.php8-onlineusers.txt9-room1.txtAgain make sure that you have write permission on the onlineusers.txt and room1.txtUpload those files and brows index.htm