• (12 Pages)
  • +
  • 1
  • 2
  • 3
  • Last »

Simple Text Chat Box Learn how to use a simple idea to make text chat web application Rate Topic: ****- 3 Votes

#1 ahmad_511  Icon User is offline

  • MSX
  • member icon

Reputation: 131
  • View blog
  • Posts: 722
  • Joined: 28-April 07

Post icon  Posted 01 March 2008 - 06:41 AM

*
POPULAR

Hello and welcome.

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 start that 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 id
Element 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 and I 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 the following elements:

Element id
---------- --
Textbox "message"
Submit button "send"
Div "serverRes"


<html>

<head>
<title>DIC ChatBox Beta 1</title>
</head>

<body>

<h1></DIC> Chat Box</h1>
<form id="signInForm">
	<input id="userName" type="text">
	<input id="signInButt" name="signIn" type="submit" value="Sign in">
	<span id="signInName">User name</span>
</form>

<div id="chatBox"></div>

<div id="usersOnLine"></div>

<form id="messageForm">
	<input id="message" type="text">
	<input id="send" type="submit" value="Send">
<div id="serverRes"></div>
</form>
</body>
</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 id

Here is the CSS we need, itís very simple so no need to add any comment
#signInForm, #messageForm {
	margin:0px;
	margin-bottom:1px;
}
#userName {
	width: 150px;
	height: 22px;
	border: 1px teal solid;
	float:left;
}
#signInButt {
	width: 60px;
	height: 22px;
}	
#signInName{
	font-family:Tahoma;
	font-size:12px;
	color:orange;
}
#chatBox {
	font-family:tahoma;
	font-size:12px;
	color:black;
	border: 1px teal solid;
	height: 225px;
	width: 400px;
	overflow: scroll;
	float:left;

}
#usersOnLine{
	font-family:tahoma;
	font-size:14;
	color:orange;
	border:1px teal solid;
	width:150px;
	height:225px;
	overflow:scroll;
	margin-left:1px;
}
#message {
	width: 350px;
	height: 22px;
	border: 1px teal solid;
	float:left;
	margin-top:1px;
}
#send {
	width: 50px;
	height: 22px;
	float:left;
	margin:1px;
}
#serverRes{
	width:150px;
	height:22px;
	border: 1px teal solid;
	float:left;
	margin:1px;
}



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 code

<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 the previous code correctly.
Attached Image
After we finished working on the HTML elements and the style weíll work on coding these elements 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

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 out
And of course we need some interface to transfer the data between the client and the server

Here I will use XMLHTTP request which is known as AJAX

I'm not going to talk about Ajax and how it works, so I will use an old snippet of Ajax that I posted here.

I will just mention its syntax
To send data we just call the Ajax function, give it the sending method("GET"/"POST"),"the requested URL","data as name=value pairs",the function handler that will receive the server response)
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 code
<script type="text/javascript" src="ajax.js"></script>



Client side: (chatBox.js / hideShow()): Function
First create the function "hideShow(hs)" that will control signInForm and messageFrom visibility
We 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 messageForm
The name/value attributes of signInButt and the signInName will change too.

And when we pass it "hide" the things will go reverse
Open a new text document and type our hideShow() function

function hideShow(hs){
if(hs=="hide"){
signInForm.signInButt.value="Sign in"
signInForm.signInButt.name="signIn"
messageForm.style.display="none"
signInForm.userName.style.display="block"
signInName.innerHTML=""
}
if(hs=="show"){
signInForm.signInButt.value="Sign out"
signInForm.signInButt.name="signOut"
messageForm.style.display="block"
signInForm.userName.style.display="none"
signInName.innerHTML=signInForm.userName.value 
}
}



Save the file as "chatbox.js" to the same directory we already working in
Open the index.htm file and link "chatbox.js" to it by adding this code in the documentís header
<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 to call hideShow() function to hide the messageForm on bodyís load event like this
<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 about how things are goes.

Part#1: Singing in
Attached Image

Client side: (chatbox.js / signInOut()): Function
User will enter the user name he want and hit [signInButt] which has "signIn" as nameís value right now
The [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 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 pairs
Send the data to server-side script "users.php" and let the Ajax to call [checkSignIn] function on server response.
Exit the function
// Sign in and Out
function signInOut(){
// Validation
if (signInForm.userName.value=="" || signInForm.userName.value.indexOf(" ")>-1){
alert("Not valid user name\nPlease make sure your user name didn't contains a space\nOr it's not empty.");
signInForm.userName.focus();
return false;
}

// Sign in
if (signInForm.signInButt.name=="signIn"){
data="user=" + signInForm.userName.value +"&oper=signin"
Ajax_Send("POST","users.php",data,checkSignIn);
return false
}
}



Server side: (users.php)
users.php will load the "onlineusers.txt" file to $onlineusers_file using built in (file) function which will converts the file to an array
Check if the client sent the user and the oper variables
If so, search the $onlieusers_file if the sent user name is exist, if so get the user index
If the operation is "signin" and user is not exist, add this user to $onlineusers_file array
Call the function [saveUsers()] to save the changes.
Send the "signin" string to the client and exit

If the user is exist send the "userexist" string to the client and exit

The [saveUsers()] function will receive an array
Open the onlineusers.txt file for over writing
Lock the file
Write the array elements with linefeed character
Unlock the file
Close the file
function saveUsers($onlineusers_file){
$file_save=fopen("onlineusers.txt","w+");
flock($file_save,LOCK_EX);
for($line=0;$line<count($onlineusers_file);$line++){
fputs($file_save,$onlineusers_file[$line]."\n");
};
flock($file_save,LOCK_UN);
fclose($file_save);
}

$onlineusers_file=file("onlineusers.txt",FILE_IGNORE_NEW_LINES);
if (isset($_POST['user'],$_POST['oper'])){
$user=$_POST['user'];
$oper=$_POST['oper'];
$userexist=in_array($user,$onlineusers_file);
if ($userexist)$userindex=array_search($user,$onlineusers_file);

if($oper=="signin" && $userexist==false){
$onlineusers_file[]=$user;
saveUsers($onlineusers_file);
echo "signin";
exit();
}

if($oper=="signin" && $userexist==true){
echo "userexist";
exit();
}
}



After the user.php sent the data, the Ajax will detect server response and execute the function we 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 name
If response text is equal to "signin" that means the user name was accepted and itís ready to use
Call [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 its value to "Sign out" to be used in signing out procedure
Create 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] DIV
// Sign in response
function checkSignIn(res){
if(res=="userexist"){
alert("The user name you typed is already exist\nPlease try another one");
return false;
}
if(res=="signin"){
hideShow("show")

messageForm.message.focus()
updateInterval=setInterval("updateInfo()",3000);
serverRes.innerHTML="Sign in"
}
}



Part#2: Sending messages
Attached Image

Client side: (chatbox.js / sendMessage()) Function
The user types a message in the [message] text box and hit [send] button
The form submit event will call the [sendMessage()] function
The function will collect the user name and the message in one string as name=value pairs
Use Ajax to send the data to "send.php" script on the server and call the function [sentOk] when server response

// Send message
function sendMessage(){
data="message="+messageForm.message.value+"&user="+signInForm.userName.value
serverRes.innerHTML="Sending"
Ajax_Send("POST","send.php",data,sentOk)
}



Server side: (send.php)
send.php receives the message and strips the HTML/PHP tags and slashes right away
Receives the user too
Load 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 message
Note: "<!@!>" has no meaning, itís just a string we think that it will never occurs in the messages and we will use it again to separate the server time from the messages

Check if the $room_file array elementís count is greater than 20(last 20 recently sent messages), when itís true remove the first elements in the array (the oldest message), and thatís will work just like a buffer for the sent messages

Note:
The number (20) means that the maximum number of messages that the client can receive in each update is 20
So maximizing this number will provides more messages buffer size

Anyway, send.php will open the "room1.txt" file for over writing now
Lock the file
Write the arrayís elements with line feed character
Unlock the file
Close the file
Send "sentok" string to the client which will be received by [sentOk()] function that will execute on server response.
Exit
$message=strip_tags($_POST['message']);
$message=stripslashes($message);
$user=$_POST['user'];

$room_file=file("room1.txt",FILE_IGNORE_NEW_LINES);

$room_file[]=time()."<!@!>".$user.": ".$message;
if (count($room_file)>20)$room_file=array_slice($room_file,1);
$file_save=fopen("room1.txt","w+");
flock($file_save,LOCK_EX);
for($line=0;$line<count($room_file);$line++){
fputs($file_save,$room_file[$line]."\n");
};
flock($file_save,LOCK_UN);
fclose($file_save);
echo "sentok";
exit();


Save the file as "send.php" to the same directory we are working in

Client side: (chatbox.js / sentOk()) Function
The function check if the response text is "sentok"
If so, clear the [message] text box value
Set the focus the [message] text box
Show the notification "Sent" in the [serverRes] DIV

If the server response is not equals to "sentok" the function will show "Not sent" in the [serverRes] DIV
// Sent Ok
function sentOk(res){
if(res=="sentok"){
messageForm.message.value=""
messageForm.message.focus()
serverRes.innerHTML="Sent"
}
else{
serverRes.innerHTML="Not sent"
}
}



Part#3: Updating userís data
Here 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 this interval will call the [updateInfo()] function every 3 seconds

Client side: (chatbox.js / updateInfo()) Function
Show the "Updating" string in the [serverRes] DIV
Use Ajax to call "user.php" script on server with no data to send and direct it to call [showUsers()] function on server response
Use Ajax to call "receive.php" on the server and send the variable lastReceived then call [showMessages()] function on server response

Now before we write this function we need to define the lastReceived variable out side the function making it have a global scope which will allow us to change/read its value from within [updateInfo()] and [showMessages()] functions
And maybe you will use it as a counter for the received messages
So at the top part of [chatbox.js] and outside any function letís add this:
lastReceived=0



And here is the function
// Update info
function updateInfo(){
serverRes.innerHTML="Updating"
Ajax_Send("POST","users.php","",showUsers)
Ajax_Send("POST","receive.php","lastreceived="+lastReceived,showMessages)
}



Updating online users:
Attached Image

Server side: (users.php)
When the user.php receives nothing from the client it will load the onlineuser.txt file to $onlineusers_file array
Join that array with the string "<br>" and then send the joined array to the [sowUsers()] function on the clientís machines

Open the users.php file and add these two lines to it (at the bottom)
$olu=join("<br>",$onlineusers_file);
echo $olu;


Save the file

Client side: (chatbox.js / showUsers()) Function
This function will receive the online-users joined array from the server and display it as it is inside the [usersOnLine] DIV
// update online users
function showUsers(res){
usersOnLine.innerHTML=res
}



Updating messages:
Attached Image

Server side: (receive.php)
receive.php will receive the lastreceived variable from the client and assign it to $lastreceived
Load the room1.txt file to $room_file array
Loop all over the array elements
Read each element and split the server time from the message (using the "<!@!>" string we added before) to $messageArr
Now 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 to the 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 the last messageís time) to the client

Note: the string "<SRVTM>" has no meaning, we will just use it to separate the messages from the last message received time
$lastreceived=$_POST['lastreceived'];
$room_file=file("room1.txt",FILE_IGNORE_NEW_LINES);
for($line=0;$line<count($room_file);$line++){
$messageArr=split("<!@!>",$room_file[$line]);
if($messageArr[0]>$lastreceived)echo $messageArr[1]."<br>";
}
echo "<SRVTM>".$messageArr[0];


Save the file as "receive.php" to the same directory we are working in.

Client side: (chatbox.js / showMessages()) Function
The function will receive a string with all messages connected together with "<br>" and the last element is the last message time and itís connected with "<SRVTM>"
First, we will clear the [serverRes] DIV
Then 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 messages
msgTmArr[1] contains the last messageís time that delivered to the client

Now Assign the msgTmArr[1] to lastReceived variable (that we defined it before),so we will use it again in the next [updateInfo()] call
Create a new HTML span element to contain the received messages
Insert the msgTmArr[0] in the Span inner html
Append the span to the [chatbox] DIV
Update the [chatbox] DIV vertical scroll bar to show the last inserted line
// Update messages view
function showMessages(res){
serverRes.innerHTML=""
msgTmArr=res.split("<SRVTM>")
lastReceived=msgTmArr[1]
messages=document.createElement("span")
messages.innerHTML=msgTmArr[0]
chatBox.appendChild(messages)
chatBox.scrollTop=chatBox.scrollHeight
}



Part#4: Signing out
Attached Image

Client side: (chatbox.js / signInOut()) Function
User 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 the user is passed this validation when he signed in)
The function will check if the signInButt name is equals to "signOut"
Collect user and oper data
Send the data using Ajax to users.php and tell Ajax to execute [checksignOut()] function on server response

Inside the [signInOut()] function and just before closing brackets add this code:
// Sign out
if (signInForm.signInButt.name=="signOut"){
data="user=" + signInForm.userName.value +"&oper=signout"
Ajax_Send("POST","users.php",data,checkSignOut);
return false
}



Server side: (users.php)
users.php will load the onlineusers.txt file to $onlineusers_file array
Receive the user and oper variables from the client
Search the array if the user exists; if so get its index
Check if the oper is equals to "signout" and the user is exist
If so, splice the user from the array
Send "signout" string to the client
Exit
If 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 the closing 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 client

if($oper=="signout" && $userexist==true){
array_splice($onlineusers_file,$userindex,1);
saveUsers($onlineusers_file);
echo "signout";
exit();
}

if($oper=="signout" && $userexist==false){
echo "usernotfound";
exit();
}



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 updateInterval
Show "Sign out" string in [serverRes] DIV
Note: the [hideShow()] function will rename the signInButt to "signIn" and chage its value to "Sign in" too
Exit
// Sign out response
function checkSignOut(res){
if(res=="usernotfound"){
serverRes.innerHTML="Sign out error";
res="signout"
}
if(res=="signout"){
hideShow("hide")
signInForm.userName.focus()
clearInterval(updateInterval)
serverRes.innerHTML="Sign out"
return false
}
}



One other thing we have to do
If the user leave the site he must sign out automatically, thatís so we will call the [signInOut()] function on unload or on beforeunload event
And 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="signInForm.signInButt.name='signOut';signInOut()" onload="hideShow('hide')">



And thatís all

You must have now 9 files:
1-ajax.js
2-chatbox.js
3-index.htm
4-cb_style.css
5-users.php
6-send.php
7-receive.php
8-onlineusers.txt
9-room1.txt

Again make sure that you have write permission on the onlineusers.txt and room1.txt

Upload those files and brows index.htm

Note:
This tutorial is based on a simple idea and itís for learning purposes only
And it needs more enhancements before you can use it for real work. (adding user registration, administrators control panel, more validation rules,Ö)

Now I guess you can edit that code to make it use multiple chat rooms.

I hope it helps somebody to get the basics of text chat.

Download all files here Attached File  chatbox.zip (3.9K)
Number of downloads: 22482

Any suggestions or comments are appreciated.

Regards

Is This A Good Question/Topic? 12
  • +

Replies To: Simple Text Chat Box

#2 rezaxtama  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 1
  • Joined: 04-March 09

Posted 04 March 2009 - 08:47 AM

CAN I PLACE EMOTICONS FOR THIS CHAT BOX...Please???
Was This Post Helpful? 1
  • +
  • -

#3 ahmad_511  Icon User is offline

  • MSX
  • member icon

Reputation: 131
  • View blog
  • Posts: 722
  • Joined: 28-April 07

Posted 12 March 2009 - 12:33 PM

Hello,
Sorry for late, but I was so busy.

there are many ways to add emotions, but the easiest one is to replace a pattern of word with an image,

it's like when you say i want to replace all words that starts and ends with [:] (without brackets)
with an image refers to that words

So, according to that simple idea, I'll do the following

1- create a new folder in same path of the other files and rename it to "emotions"
2- add a few .gif images (or any type of images) to the emotions folder
3- open the file called "receive.php" in your favorite text editor, and edit it as following:
<?php
$lastreceived=$_POST['lastreceived'];
$room_file=file("room1.txt",FILE_IGNORE_NEW_LINES);
$pattern = '/:(\w+):/';
$replacement = "<img src='./emotions/$1.gif' />";
for($line=0;$line<count($room_file);$line++){
$messageArr=split("<!@!>",$room_file[$line]);
if($messageArr[0]>$lastreceived)echo preg_replace($pattern,$replacement,$messageArr[1])."<br>";
}
echo "<SRVTM>".$messageArr[0];
?>


4- save and test

how it works?
$pattern = '/:(\w+):/';


this line is the pattern that will match user input for any word starts and ends with : (for more info, read about regular expression)

$replacement = "<img src='./emotions/$1.gif' />";


and this line will be the replacement text, and it's as you see just an image tag with source attribute to be set to the emotions folder path and specify .gif as an extension to the image file (you can change this to fit your needs)
but don't change $1 because it's a part of regular expression ( returns the first match pattern)

now, say you have an emotion called [me.gif] without brackets, so you have to type :me: in the send text box and then it will be converted to
<image src="./emotions/me.gif" />

and will be what the user see

finally, this is just a simple easy way to accomplish your request

I hope it helps
Was This Post Helpful? 3
  • +
  • -

#4 beju0506  Icon User is offline

  • D.I.C Head

Reputation: 7
  • View blog
  • Posts: 78
  • Joined: 23-February 08

Posted 27 March 2009 - 05:25 PM

Ahmad511,

Just wanted to thank you! This is a really cool bit of code! I've enjoyed playing around with it the past two days and it actually works really well! Great job!

Thanks again! :)

-Justin
Was This Post Helpful? 0
  • +
  • -

#5 rendz1987  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 10-July 09

Posted 10 July 2009 - 10:53 PM

low good day... just wonderin that .. how could i change the skins or make it look great... im realy new at this and finding trouble in codes .. thanks in advance .. more power...

low good day... just wonderin that .. how could i change the skins or make it look great... im realy new at this and finding trouble in codes .. thanks in advance .. more power...
Was This Post Helpful? 0
  • +
  • -

#6 ahmad_511  Icon User is offline

  • MSX
  • member icon

Reputation: 131
  • View blog
  • Posts: 722
  • Joined: 28-April 07

Posted 17 July 2009 - 02:29 PM

Hello,
I thought it's already looks great!.... :D
OK, you have to read about CSS, try http://www.w3schools...css/default.asp
if you take a look inside the cb_style.css file you'll find some CSS rules there so try to edit it
and if necessary you can add some images, changing colors, playing with elements sizes,... to make it looks better

I'm terrible when it comes to graphics(actually graphics is just one of a lot of things i'm terrible in),so if you already have something in mind, try to apply it, and if you encounter some problem doing that ,post your problem here and we'll be more than happy to help you

Good luck
Was This Post Helpful? 0
  • +
  • -

#7 AjusJudy  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 11
  • Joined: 20-February 08

Posted 14 August 2009 - 03:12 AM

View Postahmad_511, on 17 Jul, 2009 - 01:29 PM, said:

Hello,
I thought it's already looks great!.... :D
OK, you have to read about CSS, try http://www.w3schools...css/default.asp
if you take a look inside the cb_style.css file you'll find some CSS rules there so try to edit it
and if necessary you can add some images, changing colors, playing with elements sizes,... to make it looks better

I'm terrible when it comes to graphics(actually graphics is just one of a lot of things i'm terrible in),so if you already have something in mind, try to apply it, and if you encounter some problem doing that ,post your problem here and we'll be more than happy to help you

Good luck



Hi thanks for the simple and very good code. i got a problem with the emoticon code. am getting an error message at line 8. here is the error "Warning: preg_replace() [function.preg-replace]: Compilation failed: missing ) at offset 6 in C:\wamp\www\chatbox\receive.php on line 8"
i have tried to figure out what could wrong but everything seems to be okay. please with the correction. thanks (receive.php)
Was This Post Helpful? 0
  • +
  • -

#8 AjusJudy  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 11
  • Joined: 20-February 08

Posted 18 August 2009 - 01:23 AM

View PostAjusJudy, on 14 Aug, 2009 - 02:12 AM, said:

View Postahmad_511, on 17 Jul, 2009 - 01:29 PM, said:

Hello,
I thought it's already looks great!.... :D
OK, you have to read about CSS, try http://www.w3schools...css/default.asp
if you take a look inside the cb_style.css file you'll find some CSS rules there so try to edit it
and if necessary you can add some images, changing colors, playing with elements sizes,... to make it looks better

I'm terrible when it comes to graphics(actually graphics is just one of a lot of things i'm terrible in),so if you already have something in mind, try to apply it, and if you encounter some problem doing that ,post your problem here and we'll be more than happy to help you

Good luck



Hi thanks for the simple and very good code. i got a problem with the emoticon code. am getting an error message at line 8. here is the error "Warning: preg_replace() [function.preg-replace]: Compilation failed: missing ) at offset 6 in C:\wamp\www\chatbox\receive.php on line 8"
i have tried to figure out what could wrong but everything seems to be okay. please with the correction. thanks (receive.php)



i got it dont bother. thanks.
Was This Post Helpful? 0
  • +
  • -

#9 axisofevil  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 06-August 09

Posted 21 August 2009 - 08:42 AM

I'm having a problem with the chat. I downloaded your files and I'm having a problem when I type in the chat it doesn't show up. I've uploaded everything onto my website and it allows me to sign-in but after that I type in the message, it never shows up. In the bottom right and corner of the chat it says Sending and then Sent and then keeps flashing Updating.


Any help would be greatly appreciated.
Was This Post Helpful? 0
  • +
  • -

#10 ahmad_511  Icon User is offline

  • MSX
  • member icon

Reputation: 131
  • View blog
  • Posts: 722
  • Joined: 28-April 07

Posted 31 August 2009 - 09:05 AM

Hello all, and thanks for your comments.

@AjusJudy, can you please share us your experience and tell us what did you do to solve the problem you were facing?

@axisofevil, did you give write permission to(onlineusers.txt, room1.txt) ?
does your web host serves php with no problem?
can you provide us a link to your website, so we can check what is the response AJAX returns (because if there is an error while executing php the error page will be returned back through AJAX and you may not notice the error)

anyways, i updated that AJAX function to be more flexible, so I'll post the new one if we figured out that it is what causes the problem.

Sorry for any inconvenience
Was This Post Helpful? 0
  • +
  • -

#11 AjusJudy  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 11
  • Joined: 20-February 08

Posted 01 September 2009 - 03:09 AM

View Postahmad_511, on 31 Aug, 2009 - 08:05 AM, said:

Hello all, and thanks for your comments.

@AjusJudy, can you please share us your experience and tell us what did you do to solve the problem you were facing?

@axisofevil, did you give write permission to(onlineusers.txt, room1.txt) ?
does your web host serves php with no problem?
can you provide us a link to your website, so we can check what is the response AJAX returns (because if there is an error while executing php the error page will be returned back through AJAX and you may not notice the error)

anyways, i updated that AJAX function to be more flexible, so I'll post the new one if we figured out that it is what causes the problem.

Sorry for any inconvenience




Hi, thanks for getting back to us.

i realized there was a problem with the URL. i thought since i had created emoticon as a folder and there was also another folder 'chatbox' i thought i could use both of them as image source. so i deleted 'chatbox' n remained with 'emoticon'.

by the way, could you please show me something on how to make it work as multiple chatrooms.
Was This Post Helpful? 0
  • +
  • -

#12 axisofevil  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 06-August 09

Posted 03 September 2009 - 07:00 AM

View Postahmad_511, on 31 Aug, 2009 - 08:05 AM, said:

Hello all, and thanks for your comments.

@axisofevil, did you give write permission to(onlineusers.txt, room1.txt) ?
does your web host serves php with no problem?
can you provide us a link to your website, so we can check what is the response AJAX returns (because if there is an error while executing php the error page will be returned back through AJAX and you may not notice the error)

anyways, i updated that AJAX function to be more flexible, so I'll post the new one if we figured out that it is what causes the problem.

Sorry for any inconvenience


How would I give write permission to those files? Sorry just started coding and am trying to make an internet text based game. Here is the chat http://www.chaosrising.com/chat/ I host with Website palace so Php should be useable.
Was This Post Helpful? 0
  • +
  • -

#13 Glorfindal  Icon User is offline

  • Java Enthusiast
  • member icon

Reputation: 23
  • View blog
  • Posts: 538
  • Joined: 31-December 08

Posted 04 September 2009 - 08:33 AM

He, nice tutorial but I keep getting this message in the chatbox:
Deprecated: Function split() is deprecated in C:\wamp\www\chatbox\receive.php on line 5 :blink:
Was This Post Helpful? 0
  • +
  • -

#14 ahmad_511  Icon User is offline

  • MSX
  • member icon

Reputation: 131
  • View blog
  • Posts: 722
  • Joined: 28-April 07

Posted 10 September 2009 - 12:34 PM

Hello all,
sorry for late, but you know... life and work

@Glorfindal, try to use explode() function instead of split()

@axisofevil, the link you provided is broken, please check. you can use your web site file manager to give the necessary permissions

@AjusJudy, to add multiple chat rooms please follow these steps:

index.html
directly under the sign in form tag:
Add a select control (name="room",id="selRoom")
append room options(two for example) into the select and give them differnt values("fun","health")
<form onsubmit="signInOut();return false" id="signInForm">
    <select id="selRoom" name="room">
        <option value="fun">Fun</option>
        <option value="health">Health</option>
    </select>
    <input id="userName" type="text">
    <input id="signInButt" name="signIn" type="submit" value="Sign in">
    <span id="signInName">User name</span>
</form>


chatbox.js
hideShow() function / if(hs=="hide"){} block:
Add
signInForm.selRoom.style.display="block"


hideShow() function / if(hs=="show"){} block:
Add
signInForm.selRoom.style.display="none"


Modify
signInName.innerHTML=signInForm.selRoom.options[signInForm.selRoom.selectedIndex].innerHTML+" / " + signInForm.userName.value


signInOut() function / if (signInForm.signInButt.name=="signIn"){} block
Modify
var data="user=" + signInForm.userName.value +"&room="+signInForm.selRoom.value+"&oper=signin";



signInOut() function / if (signInForm.signInButt.name=="signOut"){} block
Modify
var data="user=" + signInForm.userName.value +"&room="+signInForm.selRoom.value+"&oper=signout";



checkSignOut() function / if(res=="signout"){} block
Add
lastReceived=0;
chatBox.innerHTML="";
usersOnLine.innerHTML="";



updateInfo() function
Modify
Ajax_Send("POST","users.php","room="+signInForm.selRoom.value,showUsers)
Ajax_Send("POST","receive.php","lastreceived="+lastReceived+"&room="+signInForm.selRoom.value,showMessages)



sendMessage() function
Modify
var data="message="+messageForm.message.value+"&user="+signInForm.userName.value+"&room="+signInForm.selRoom.value;




users.php
saveUsers() function
Modify
$file_save=fopen("onlineusers_".$_POST['room'].".txt","w+");



First line after the end of the function
Modify
$onlineusers_file=file("onlineusers_".$_POST['room'].".txt",FILE_IGNORE_NEW_LINES);




send.php
Add
$room="room_".$_POST['room'].".txt";


Modify
$room_file=file($room,FILE_IGNORE_NEW_LINES);


$file_save=fopen($room,"w+");




receive.php
Add
$room="room_".$_POST['room'].".txt";


Modify
$room_file=file($room,FILE_IGNORE_NEW_LINES);



Finally:
Add the following files to your chatbox folder and give them write/read permissions
room_fun.txt, room_health.txt
onlineusers_fun.txt, onlineusers_health.txt

Note: you have to add a text file (room_VALUE.txt)for each option value in the room select control, (VALUE is the option's value)

you can download the updated files here Attached File  updated_files.zip (3.27K)
Number of downloads: 3402
hope it helps
Was This Post Helpful? 2
  • +
  • -

#15 Solaiman  Icon User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 24
  • Joined: 10-September 09

Posted 10 September 2009 - 04:57 PM

thx a7mad !!!

great lesson !!

i will try !!!


thx very much bro !!
Was This Post Helpful? 2
  • +
  • -

  • (12 Pages)
  • +
  • 1
  • 2
  • 3
  • Last »