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

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

#16 AjusJudy  Icon User is offline

  • New D.I.C Head

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

Posted 20 September 2009 - 03:37 AM

View Postahmad_511, on 10 Sep, 2009 - 11:34 AM, said:

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 Attachment attachment
hope it helps

Quote

Hi Ahmad
it worked great thanks for the script and sparing your little time.
another Qn, ....how can we use a database to store our users, make them login with a password, restrict them from using a room where they dont belong and finally give them a timeout; ie one can use a room for one hour then time out until next day, or how to put a room on and off at specific times. thanks alot.

Was This Post Helpful? 0
  • +
  • -

#17 ahmad_511  Icon User is offline

  • MSX
  • member icon

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

Posted 21 September 2009 - 04:52 AM

Hi,
the main idea was to create a simple chat box without using any database/sql.
and there will be a huge modifications to the codes (actually we need a completely new codes)
so, i believe doing this will be off topic.

besides, this will lead us to create multiple pages to control User's accounts, User's groups, Rooms settings, permissions,...
and i think it will take more than one tutorials.

anyways, once i have a time , I'll write a new one trying to cover your questions.

Thanks for your reply
Was This Post Helpful? 0
  • +
  • -

#18 AjusJudy  Icon User is offline

  • New D.I.C Head

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

Posted 21 September 2009 - 06:08 AM

View Postahmad_511, on 21 Sep, 2009 - 03:52 AM, said:

Hi,
the main idea was to create a simple chat box without using any database/sql.
and there will be a huge modifications to the codes (actually we need a completely new codes)
so, i believe doing this will be off topic.

besides, this will lead us to create multiple pages to control User's accounts, User's groups, Rooms settings, permissions,...
and i think it will take more than one tutorials.

anyways, once i have a time , I'll write a new one trying to cover your questions.

Thanks for your reply



:^: okay Ahmad thanks a lot. am glad coz you've shown a willing heart. i'll patiently wait. be blessed.
Was This Post Helpful? 0
  • +
  • -

#19 bhuvaneswari  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 15
  • Joined: 04-June 08

Posted 18 December 2009 - 03:38 PM

Really awesome & helped me a lot.. hats offf to u .........
Again Thanks Thanks Thanks
Was This Post Helpful? 0
  • +
  • -

#20 LeVampirE  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 02-January 10

Posted 17 January 2010 - 09:40 PM

thanks ahman i was looking for this, great job bro, i will try it as soon as possible thanx 100..0˛
Was This Post Helpful? 0
  • +
  • -

#21 Guest_Vinicolas*


Reputation:

Posted 25 February 2010 - 01:49 PM

Thank you for this chat ... But what is the difference between a simple ajax and php with a flash chat with php? which of the 2 you recommend? What is safer? that consumes less bandwidth on the assumption that the updates will be 10 in 10 seconds? I did a chat with jquery ajax and php but I saw that the majority use flash to make the transaction with PHP transparently to the users do like to ajax ... I would like to know your opinion about it ..
Was This Post Helpful? 0

#22 ahmad_511  Icon User is offline

  • MSX
  • member icon

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

Posted 26 February 2010 - 09:33 AM

Hi All, and thanks for your comments :)

@Vinicolas,

To me it looks the same, it's only a matter of what i'm working on,
If the project is mostly html /javascript, i prefer to stick with javascript ajax.
so,if the ajax i'm using will be responsible on updating html contents, I will not going to use flash, cause it takes more time and code to develop,
bu if ajax will be used in a specific part of the page (chat application, news,...),I'll go with what fits the needs.
if it's required animations, some visual effects or anything that javascript/html can't handle it (or it's harder to handle), of course flash is the best in this case.

which one is safer?
I really don't know, but i think, both of them are using the HTTP protocols to send/receive data to/from server, and the same security rules(I think) are applied on both,
if i'm correct, it's all now depends on the php you have on your server.

More or less bandwidth consuming, is also depends on the way you're going to transfer the data between clients and server, I'm not familiar with jquery (I usually use my own scripts) so I don't know if it sends/receives some data in addition to what you have which may affect your bandwidth.

Finally, if we're talking here about text chat only, I think no matter what you're going to use, it will not be a bandwidth consuming if you just think of the best way to send /receive the minimum bytes of data to get needed result.
e.g. you can process and shrink the data the user should load from the server instead of pushing all data to the user and then display what he really needs.
from another perspective doing a lot of server processing may load the server and affects its performance, that's why it's better to study first what are the requirements and what will be the achievements. and then you can come up with a way you think it's the best to use.

also, flash requires a plug in to be installed first, while internet browser is all what ajax needs.

I do like actionScript, but if things can be done with only javascript, I'll do it with javascript.

I'm not really that expert, I only try to apply my ideas using the language I feel comfortable with.

I hope I did answer some of your questions. if not, I hope someone else will do.
Was This Post Helpful? 0
  • +
  • -

#23 Guest_Roy*


Reputation:

Posted 21 March 2010 - 03:25 AM

Hi, may i know is possible to let the user chat without doing the login process ? Just lets the user simply create a name and chat and the chat box. Thx
Was This Post Helpful? 0

#24 ahmad_511  Icon User is offline

  • MSX
  • member icon

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

Posted 25 March 2010 - 03:10 PM

Hi there,
this is not a real login, it's just a simple way to prevent duplicating the same username in one session, so each online user will have a unique username to identify him.

it's a mater of registering a temporary username for you to use while chatting, and it will be destroyed once you signed out.

I don't know if this answers you, if not please add more details about what you're trying to achieve.

Regards
Was This Post Helpful? 0
  • +
  • -

#25 AjusJudy  Icon User is offline

  • New D.I.C Head

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

Posted 05 April 2010 - 12:07 AM

View PostAjusJudy, on 21 September 2009 - 05:08 AM, said:

View Postahmad_511, on 21 Sep, 2009 - 03:52 AM, said:

Hi,
the main idea was to create a simple chat box without using any database/sql.
and there will be a huge modifications to the codes (actually we need a completely new codes)
so, i believe doing this will be off topic.

besides, this will lead us to create multiple pages to control User's accounts, User's groups, Rooms settings, permissions,...
and i think it will take more than one tutorials.

anyways, once i have a time , I'll write a new one trying to cover your questions.

Thanks for your reply



:^: okay Ahmad thanks a lot. am glad coz you've shown a willing heart. i'll patiently wait. be blessed.


Hi Ahmad,
i had asked a question on how to add more features to this chat. and u repled that are working on it. i dont know how far you av tried working on my request. please let me know how i can go about it. thank you.
Was This Post Helpful? 0
  • +
  • -

#26 Guest_Chintan*


Reputation:

Posted 11 May 2010 - 06:38 AM

Thanks for sharing application.
But i want to know how i can cofigure this code to make chating private between admin and user. what should i modify if i don't want to display text written by user to other users...?
please reply me...
Thanks in advance..

From
Chintan
email: workonid@yahoo.com
Was This Post Helpful? 0

#27 ahmad_511  Icon User is offline

  • MSX
  • member icon

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

Posted 14 May 2010 - 10:13 AM

Hello and thanks for your comment.
This can be easily done, but again, this is for learning purposes only and it doesn’t cover any security / maintenance / controlling issues …
Anyways, to add some privacy to what users may see, I will change a little bit in the sending / receiving parts as following:
1- We will optionally type in usernames (comma separated) we want to send our message to.
So, we will add a new text box (touser) for that purpose,
I will add touser value as a part of the message right after the sender username and use the same delimiter to separate them from each other ( “<!@!>” ).
2- In the receiving part, we will send the username each time we’re going to read new messages, retrieve only messages that have this username as a part of the message’s touser section or if the username is the sender user himself or the touser section is empty (message for all)

This is the idea, but since it was too old tutorial, I did a few minor updates as following:
- I used a new AJAX that I updated it and tested extensively on many different projects.
- Added a new function (dom) just to shrink down the code needed to access objects and to get dir of FF warning messages.

when we've done, we will end up with something like this:Attached Image

Ready?

Index.htm
Add a new text box (touser)somewhere inside the (messageForm)
	<form onsubmit="sendMessage();return false" id="messageForm">
		Send as a private to users: <input id="touser" type="text" /><br />
		<input id="message" type="text">
….



Chatbox.js
As I mentioned before I updated all object accessing codes to use the new added (dom) function, but it’s not related to idea we’re going to apply anyway.

updateInfo() function:

I added the username to be send to the "receive.php" file
b.Data="lastreceived="+lastReceived+"&room="+dom("selRoom").value+"&user="+dom("userName").value;



showMessages() function:
New condition added to exit the function in case “receive.php" returns nothing.
function showMessages(res){
dom("serverRes").innerHTML=""
if(res=="")return;
msgTmArr=res.split("<SRVTM>")
…



sendMessage() function:
I added touser value to be send to "send.php" file
var data="message="+dom("message").value+"&user="+dom("userName").value+"&room="+dom("selRoom").value+"&touser="+dom("touser").value;



send.php
Receive the new variable (touser)
$user=$_POST['user'];
$touser=$_POST['touser'];


Save (touser) as a part of the message with ( "<!@!>" ) as a separator
$room_file[]=time()."<!@!>".$user."<!@!>".$touser."<!@!>".$message;



Receive.php
Receive the user variable
$lastreceived=$_POST['lastreceived'];
$user=$_POST['user'];
…



Declare a new Boolean to help sending the last message’s server time just in case we deliver some messages to the requestor user.
$hasMessage=false;



Inside the loop and after splitting the message using ( "<!@!>" ) as a delimiter, we check first if the result array contains more than one element so we can proceed otherwise we’re maybe dealing with an empty line which was inserted for a newly created room file.
After that we check if the user who requests the messages is exist in the message‘s touser section using in_array() function.
Compile the message according to the new array elements
Update ( $hasMessage ) variable.
Send the last message’s server time if a message was delivered.
for($line=0;$line<count($room_file);$line++){
  $messageArr=explode("<!@!>",$room_file[$line]);
    if(count($messageArr)>1){
    $touser=$messageArr[2];
    if(in_array($user,explode(",",$messageArr[2])) || $user==$messageArr[1] || $touser==""){
      if($messageArr[0]>$lastreceived){
        echo $messageArr[1].": ".preg_replace($pattern,$replacement,$messageArr[3])."<br>";
        $hasMessage=true;
      }
    }
  }
}
echo ($hasMessage)?"<SRVTM>".$messageArr[0]:"";



Note:
When you want to send a private message to a user (or some of users) you can type in his/their usernames in the touser text box (as a comma separated values).

That’s all, I hope I answered your question, if not please explain it a little bit to me cause nowadays my brain is not working as it suppose to do. :)

Attached contains all updated files.Attached File  chatbox.zip (102.61K)
Number of downloads: 611
Was This Post Helpful? 0
  • +
  • -

#28 msherifam01  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 25-January 09

Posted 31 May 2010 - 01:44 AM

Its a nice project and its working fine. How can I Place this in my website...?
Was This Post Helpful? 0
  • +
  • -

#29 Guest_Austin*


Reputation:

Posted 03 June 2010 - 05:55 PM

Hey there, thanks for the great start.

Two questions, I have modified it to place the new messages at the top of the chatBox div via "msgbox.insertBefore(messages,msgbox.firstChild)", but this only works during a chat. New users open the chat and see the older messages in backwards order.

How do I place the new line in the text file at the top instead of bottom?

Also, my room1.txt is getting huge(400k+) with tons of blank white lines.

Ideas?
Was This Post Helpful? 0

#30 ahmad_511  Icon User is offline

  • MSX
  • member icon

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

Posted 04 June 2010 - 08:48 PM

Hello,

@msherifam01,
it's not good idea to place it in your website for public use,
it was just a simple idea to give a basic concept about chat procedures.

anyways, everything was explained in the first post and followed by some friends ideas to enhance it.
so, what part is confusing you, feel free to email me or you can just add some details here.

@Austin
about the messages order simply you can reverse the for loop, but this also requires a small modification regarding the last received time:
1- open the file called "receive.php"
2- before the loop declare a new variable ($lr=0) last receive time
3- edit the for loop to read the lines in backward order
4- assign the last message time to the $lr only when it has zero value,(since we're reading backward, this will contain the latest message time and in the next loop it will be ignored)
5- change the last line that was echoing the $messageArr[0] to echo $lr instead;

$lr=0;
for($line=count($room_file)-1;$line>=0;$line--){
	$messageArr=explode("<!@!>",$room_file[$line]);
	if($lr==0)$lr=$messageArr[0];
.
.
.
.
}
echo ($hasMessage)?"<SRVTM>".$lr:"";



about the size of room1.txt i think this is happen because somehow send.php file is not freeing up the old message
so,
1- open the send.php file
2- update this line:
if (count($room_file)>20)$room_file=array_slice($room_file,1);


to be like this:
if (count($room_file)>20)$room_file=array_slice($room_file,-20,20);


this way we make sure that we always pick up the recent 20 messages.

hope it helps, if not please send me your file and i'll try to do something.
Was This Post Helpful? 0
  • +
  • -

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