[ahmad_511]

Well,
when I first check your page source I noticed that an Uncaught SyntaxError: Unexpected token ILLEGAL
in the ajax.js file

so after I downloaded your ajax.js from your site, I found a lot of none recognized characters (using notepad++)
the file was encoded as UCS-2 Little Endian and I'm pretty sure it was encoded as UTF-8 without BOM when I uploaded it

so, please make sure you have the correct encoding, try again and let me know if any error will appear in your browser console
thanks

[omerjawhar]

Hi man!
I think I've found what I was looking for.
it's a very cool php chat box and I really like it.
but what about adding such as loging with facebook account or google account....etc?
it'll make this advanced chat than a simple one...
thanks again

[Spliffie]

Hi ahmad_511,

I want to thank you first of all, this has been one of the more informitive run downs of a chat box.
every thing work wonders and have no problems.
one thing i would like to know or maybe you could shed some light.

insted of users having to enter a user name is there any way we could pull/get the user name from a session/cookie.
i already have a log in and registration page, and do not want to have to log in and then relog in to the chat if u get what i mean.

this is the script im currently using to check the session on my page...

<?php 
require_once ('includes/config.inc.php'); 
$page_title = 'Home Page';

// Start output buffering:
ob_start();

// Initialize a session:
session_start();

// Check for a $page_title value:
if (!isset($page_title)) {
	$page_title = 'User Registration';
}

// If no first_name session variable exists, redirect the user:
if (!isset($_SESSION['first_name'])) {
	
	$url = BASE_URL . 'index.php'; // Define the URL.
	ob_end_clean(); // Delete the buffer.
	header("Location: $url");
	exit(); // Quit the script.
	
}
?>

Regards me...
thanx a mill for all the help.

This post has been edited by macosxnerd101: 06 June 2011 - 07:33 AM
Reason for edit:: Please use code tags

[ahmad_511]

Hello and thanks for your comments.
we've encountering a very bad internet service since a few days so sorry for late.

@omerjawhar, I didn't try it before and as I mentioned we have an internet problems here, so I'll check for it when it's Ok,
anyway, you can follow with this post because we dropped the login codes, so all you need to do is to use any other login you want and save the username to a session or a coockie.

@Spliffie, Yes, you can use your own login by using a sessions or cookies as you already mentioned.

Please follow:

Note:
I'm assuming that the username is stored in a $_SESSION['username'], so adjust it as needed

index.htm
remove:

<input id="userName" type="text">

chatbox.js/function hideShow(hs)
remove:

dom("userName").style.display="block"

remove:

dom("userName").style.display="none"

replace:

dom("signInName").innerHTML=dom("selRoom").options[dom("selRoom").selectedIndex].innerHTML+" / " + dom("userName").value

with:

dom("signInName").innerHTML=dom("selRoom").options[dom("selRoom").selectedIndex].innerHTML

chatbox.js/function signInOut()
remove:

if (dom("userName").value=="" || dom("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.");
dom("userName").focus();
return false;
}

replace:

var data="user=" + dom("userName").value +"&room="+dom("selRoom").value+"&oper=signin";

with:

var data="room="+dom("selRoom").value+"&oper=signin";

replace:

var data="user=" + dom("userName").value +"&room="+dom("selRoom").value+"&oper=signout";

with:

var data="room="+dom("selRoom").value+"&oper=signout";

chatbox.js/function checkSignIn(res)
replace:

if(res=="userexist"){
alert("The user name you typed is already exist\nPlease try another one");

with:

if(res=="notsignedin"){
alert("Please signin first");

chatbox.js/function checkSignOut(res)
remove:

if(res=="usernotfound"){
dom("serverRes").innerHTML="Sign out error";
res="signout"
}

remove:

dom("userName").focus()

chatbox.js/function updateInfo()
replace:

b.Data="lastreceived="+lastReceived+"&room="+dom("selRoom").value+"&user="+dom("userName").value;

with:

b.Data="lastreceived="+lastReceived+"&room="+dom("selRoom").value;

chatbox.js/function sendMessage()
replace:

var data="message="+dom("message").value+"&user="+dom("userName").value+"&room="+dom("selRoom").value+"&touser="+dom("touser").value;

with:

var data="message="+dom("message").value+"&room="+dom("selRoom").value+"&touser="+dom("touser").value;

users.php
at the top of the file add:

session_start();

search for:

$onlineusers_file=file("onlineusers_".$_POST['room'].".txt",FILE_IGNORE_NEW_LINES);

add after:

if (!isset($_SESSION['username'])){
	echo "notsignedin";
	exit();
}

replace:

if (isset($_POST['user'],$_POST['oper'])){
$user=$_POST['user'];

with:

if (isset($_POST['oper'])){
$user=$_SESSION['username'];

replace:

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

with:

if($oper=="signin"){
if(!$userexist)$onlineusers_file[]=$user;

remove:

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

replace:

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

with:

if($oper=="signout"){
if($userexist)array_splice($onlineusers_file,$userindex,1);

remove:

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

send.php + receive.php
at the top of the file add:

session_start();

replace:

$user=$_POST['user'];

with:

$user=$_SESSION['username'];

hope it helps

This post has been edited by ahmad_511: 06 June 2011 - 12:13 PM

[Spliffie]

Hi man,

would it not work if the Chat Box is held in an iFrame?

iv done all the code and changed the 'username' to my needs...

chat box comes up but wont pull the logged in name...

[shadowstep0705]

Very nice!

If I have the time once I will implemet this into my websitr

[ahmad_511]

@shadowstep0705, Thanks

@Spliffie, I just noticed your message about how to change the private messages color, and here is a simple way to do that.

the idea is to surround the private messages with a span and give it a class (private), and then add necessary css rule in the style sheet file.

so, open the receive.php file in your favorite text editor:

replace:

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;
    }
}

with:

$isPrivate=in_array($user,explode(",",$messageArr[2]));
if($isPrivate || $user==$messageArr[1] || $touser==""){
    if($messageArr[0]>$lastreceived){
        $msg=$messageArr[3];
        if($isPrivate)$msg="<span class='private'>".$msg."</span>";
        echo $messageArr[1].": ".preg_replace($pattern,$replacement,$msg)."<br>";
        $hasMessage=true;
    }
}

open the cb_style.css file:

add at the bottom of it the following css rule (adjust it as required):

.private{
    color:red;
}

now, all private messages will be in red.

[ahmad_511]

Hi,
First I would like to thank Spliffie for his suggestions,
I have updated the code as suggested and wanted to share those updates.
I know they are simple but here is what we did just in case someone else has the same concerns.

1- the username in the private message field is case insensitive now.
2- you can click the username you want from the online users menu to add him to the private users textbox.
3- online users are now styled based on their group. (this requires you to have a session for the group.

note:
the online users style rule can be set as grp_*, where * is the group name or code (at the bottom of attached css file I added .grp_admin and .grp_normal rules, for admin and normal groups)

also I added a fake signin page in order to test the new changes (access it from the address bar)

all files are attached excluding the emotion folder  chat2.zip (6.67K)
Number of downloads: 207

Regards

[Spliffie]

ahmad_511, on 08 June 2011 - 10:44 AM, said:

Hi,
First I would like to thank Spliffie for his suggestions,
I have updated the code as suggested and wanted to share those updates.
I know they are simple but here is what we did just in case someone else has the same concerns.

1- the username in the private message field is case insensitive now.
2- you can click the username you want from the online users menu to add him to the private users textbox.
3- online users are now styled based on their group. (this requires you to have a session for the group.

note:
the online users style rule can be set as grp_*, where * is the group name or code (at the bottom of attached css file I added .grp_admin and .grp_normal rules, for admin and normal groups)

also I added a fake signin page in order to test the new changes (access it from the address bar)

all files are attached excluding the emotion folder chat2.zip

Regards

i would just like to say thanx to you too Ahmad,

with our ur original script i would now have been able to get round all of this...

your have shed alot of light on how to mold and create an awesome little chat room

Regards Spliffie

[ahmad_511]

Hello there,
some updates have been added to the chatbox (thanks Spliffie) and I'd like to share them with you guys,
I'm too busy to add descriptions about the changes but don't mind to answer any question about it.

Changes since last update:

1- general code cleanup
2- emotions must now declared inside the chatbox.js file to prevent trying to load none defined ones.
3- you can insert emotions by click on them instead of typing their code manually.
4- sound notifications for normal and private messages (this is done using a simple AS2 flash file which triggered from javascript by using external interface class to load and play necessary mp3 files).
5- user's time (based on user's timezone) is what now shown next to the messages instead of server time
6- adding a simple AFK status depending on last sent message
7- remove a user from online users list when he exceeded a specific amount of time without sending any mesage.
8- reduce unnecessary requests when there is no new messages or when a user is not in the online users list but still viewing the chatbox.
9- add a configuration file config.php where you can setup some parameters as following:

USER: session used for username
GROUP: session used for user group
ADMIN_GROUP: administrator group code, this helps in sorting online users only.
ROOM: the room file path to temporarily store sent messages.
ONLINE_USERS: the path to online users file
LOGS: the path to the log file
ROOM_BUFFER: the number of messages buffer inside the room file
TIME_TO_DIE: the time needed to remove the user from online users if exceeded.
AFK_TIME: the time needed to mark a user as Away From Keyboard if exceeded.
ENABLE_LOGS: enable or disable logging
SHOW_LOGS: show logging information as a BOT message (currently logging only joined and left users)


finally here is a link to the chatbox2 where you can test
you'll be first prompted to login, but it's just a fake login.

and here is the code:  chat2.zip (55.24K)
Number of downloads: 292

hope it helps.

[rielrivas]

Sir I try to use your code and I really appreciate the code..when I test it to a local computer it works...but when I test it to my website, and it does not work...can you give me an advice what would be the additional code for chatting in my website...because it only works when i test it to "localhost"...

This post has been edited by rielrivas: 22 July 2011 - 01:54 AM

[ahmad_511]

Can you please provide us a link to your website so we can test

[hatem39]

thank you ahmed for this tutorial
i want to try this chat box in my PC i downloaded your first code in the first page but it didn't work i can't sign in?
this chat box method seems like the chat box in FACEBOOK
when i know how can i try it in my PC i have a lot of questions

This post has been edited by hatem39: 23 July 2011 - 01:04 PM

[ahmad_511]

Hi,
First, you have to setup php and a localhost on your PC in order to test the chat box, also you have to make sure you add write permissions to files mentioned in this tutorial.
Second, I suggest to download the latest updated code , since it has more improvements (thanks to all contributors)

the new features, code and a live demo link can be found a few posts above.

also, do you receive any error messages when you try it on your PC.

This post has been edited by ahmad_511: 23 July 2011 - 03:57 PM

[hatem39]

thank you for your reply i installed WAMPSERVER and it works
can i send a file from my PC to my friend to download it like in SKYPE?(add a function for example)

can i change the font color from the form send because i try this code but it didn't work
i typed
<p style="color:red;"> hello</p>
and then click on send but the color didn't changed