Free gmail, facebook type chat application using CSS, jQuery and PHP


Demo
Please load the following links in different browsers otherwise it wont work:

Image representing Facebook as depicted in Cru...

Sample Chat User Swadesh
Sample Chat User Vimla
Sample Chat User Brijesh

Introduction
This jQuery chat module enables you to integrate Gmail/Facebook style chat into your existing website.

Features
1. Gmail style bottom right display of chat boxes
2. Keeps chat boxes open and stores state (data) even when pages are browsed/refreshed similar to Facebook
3. Displays “Sent at…” after 3 minutes of inactivity
4. Displays “X says…” & blinks chat boxes when window is not in focus
5. Minimize and close chat boxes
6. Auto-scrolling of chat text
7. Auto-back-off polling policy (hits the server less-often when chat activity is low)
8. Extremely simple to integrate into existing site

Getting Started

You must first create a mySQL table as below (or import db.txt provided in project files)

CREATE TABLE IF NOT EXISTS `chat` (
  `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
  `from` varchar(255) NOT NULL DEFAULT '',
  `to` varchar(255) NOT NULL DEFAULT '',
  `message` text NOT NULL,
  `sent` datetime NOT NULL DEFAULT '0000-00-00 00:00:00',
  `recd` int(10) unsigned NOT NULL DEFAULT '0',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=539 ;

CREATE TABLE IF NOT EXISTS `users` (
  `uid` int(11) NOT NULL AUTO_INCREMENT,
  `username` varchar(30) DEFAULT NULL,
  `password` varchar(30) DEFAULT NULL,
  `email` varchar(100) DEFAULT NULL,
  `gender` varchar(8) NOT NULL,
  `dob` varchar(16) NOT NULL,
  `phone` varchar(20) NOT NULL,
  `profile_image` varchar(50) NOT NULL,
  PRIMARY KEY (`uid`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=21 ;

--
-- Dumping data for table `users`
--

INSERT INTO `users` (`uid`, `username`, `password`, `email`, `gender`, `dob`, `phone`, `profile_image`) VALUES
(1, 'Swadesh', 'pass1', 'itswadesh@gmail.com', '', '', '', ''),
(2, 'Brijesh', 'pass1', 'brijesh@gmail.com', '', '', '', ''),
(3, 'Vimla', 'pass1', 'vimla@gmail.com', '', '', '', '');

Add the following scripts to your page template

<code><script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/chat.js"></script>
</code>

Add the following CSS to your page

<link type="text/css" rel="stylesheet" media="all" href="css/chat.css" />
<link type="text/css" rel="stylesheet" media="all" href="css/screen.css" /><!--[if lte IE 7]>
<link type="text/css" rel="stylesheet" media="all" href="css/screen_ie.css" />
<![endif]-->

Edit chat.php and set your database parameters and try your website.

For better understanding, load 3 different browsers (internet explorer, firefox, safari) and point them to samplea.php, sampleb.php and samplec.php.

Click on “chat with Vimla” link and watch the chat functionality come alive!

Inorder to integrate your existing website, you must place all your content between the “main_container” div tag.

Browser Compatibility
1. Firefox 2+
2. Internet Explorer 6+
3. Safari 2+
4. Opera 9+

80 thoughts on “Free gmail, facebook type chat application using CSS, jQuery and PHP

  1. What?s Taking place i’m new to this, I stumbled upon this I’ve found It positively helpful and it has helped me out loads. I’m hoping to give a contribution & aid different customers like its aided me. Good job.

  2. hi– i was working on the chat and i am not sure if this is a mistake:
    in the demo files at the top:

    $_SESSION[‘chatuser’] = ‘1’;
    $_SESSION[‘chatuser_name’] = ‘Swadesh’;

    shouldnt $_SESSION[‘chatuser_name’] be $_SESSION[‘chatname’] ??? or chatusername??

      1. Integrate with your current running log in application and declare at log in both variables. Just go to YouTube and watch Alex’s new registration video.

  3. Nice script.. But bro, tell me how to show “user is offline” ??? when we will start chat someone but if he is not online then how to show in chat/message “he/username is not online” ????

    Plz tell me.. thanks advance..
    5/5

      1. Itz good, but i meant how to show in chatbox when we type message or enter message like facebook chat??? Will u update ur chat script ???? Becoz I’m still newbie, i cant modify ur chat script..

        Thanks

  4. Ma forse sono l’unico a cui non funziona? Credo di avere dei problemi…oppure non è possibile parlare da soli?
    Is it possible speack alone for a trial? becouse i have not my answers!

  5. can this work only on asp.net or jsp instead of php??????
    Also can u please tell me y i can’t run 2 instances of the chat @ d same time on chrome????

  6. Sir i am fan of ur coding style and this code i have converted into struts2 and it works like charm.
    But my problem is when i go to some other page like(My friends profile etc..)
    this chat window do not appear how to do that please help me out sir

  7. This script is working well. thank you.., i like to have some more chat features in this script. Can any tell how to include smileys or emotions to this script?

  8. Hello as we can make it play a sound every time you send the message to the destination, I have seen a website that when you click on the button below to unlock a window appears sound, change name, this is the website: http: / / zopim.com /, will be attentive to your answer.

  9. hello swadesh…. i m bhumika shukla…. ur script is really very nice but i have some problems related to this script whn i try chat with a person its not working properly, every user getting same message on every page.

  10. Hello sir I’m integrate your chat although i have already set it before 4 months in these time it
    it is working but with some problem problem is thaat when we chat any user who is online
    message displays continiue in recurisive order in my own chatbox but not in user chat box in
    chat table in from table sender id is storing in integer that is correct but in to field only user from whom i’m chating user name is stroing in plcace of that id which is in integer.I want to lance my site soon I’m in trouble and i also submit this site as project in my MCA i’m in last same plz solve problem via e-mail thanks in advance my email-shyambca123@gmail.com

  11. if more window open in one browser it goes left side and we can’t able to see that
    so is that possible to open only 5 or 6 window if next window will open it close old one.

  12. I have some problem in chat,if user enter text in text area and press enter twice. message is not displayed in chat box window but chat is sent to other user.

    In my local host this script run very nice.i have no problem.

    So any kind of suggestion so please give…..

    Thanks

  13. Hey thanx man.. really cool plugin and very helpful for me..
    most of the work is done by you all I need to do is change the styling a bit and use my user database with my own session management…

    thanx again..

  14. I’m trying to make it work with new jquery version 1.9.1. get error. also trying to include sizzle.
    what’s wrong..? any special compiled jquery required? any module missing..?

  15. It is in reality a nice and useful piece of information.
    I’m happy that you simply shared this helpful info with us. Please keep us informed like this. Thank you for sharing.

  16. Its nice, however _VERY_ restrictive. Since it is already using MySQL for the chats, no reason not to use MySQL for the $_SESSION[‘username’].

    Perhaps the author will update for this, if not it is rather useless for most serious sites that would be interested in using, or even purchasing, it.

  17. Hello script is good ineed to integrate complete site i mean when i go through another link in same site then chat window is not showing so i need chat window in complete site. can you help me regarding this

  18. Hello guys if you need chat code am selling where users online and offline status if you are intrested mail me

  19. Hi, everything gets added to the DB and the message sends but the other person can’t receive it? What am i doing wrong?

    thankss

  20. Problem running with chat demo in my php site.
    Change chat.php with my database credential, created chat and user table.
    When running sample a and b program, messages sent by sender not appearing to chat box of receiver.

    1. I have some problem in chat,if user enter text in text area and press enter twice. message is not displayed in chat box window but chat is sent to other user.

      In my local host this script run very nice.i have no problem.

      So any kind of suggestion so please give…..

      Thanks

  21. This to me has been a foundation code to work with… Its not restrictive, it just needs to be expanded and a few bugs fixed but its a GREAT FOUNDATION WORKING CODE.
    The sessions keeps record of the user’s current history but all records are stored in the database.
    From here i was able to expand and pull back out old records, hyperlink names, change styles, include avatars, allow file transfer, restrict open chatboxes to space available else minimise and include notification sounds etc…. The only thing left for me to do is keep track of open and minimised chats when the user logs out and it wont be that hard, just simply to store that in a session and upload on logout or during chat.

  22. Thanks for the Code, I have used this chat in my website which is built in CI Mysql, I found two problems, one is the username is accepting the space between names for eg. Arun kumar. Second one how to remove the ID which comes along with username.

  23. wow Swadesh!! you are such genius. With just a litle modification i make it to work dynamically based on online users name in my online table, and it works perfectly as i like it. But when i was trying to make it appear on all my pages its crippled my compidence, such as my main css is distout. Any hint on how to put it? Thanks 4 share such helpful idea.

    1. tyt
      yt
      ytr
      y
      y
      tru

      besttechlab :
      Thanks buddy. It’s a nice post.
      I am getting stuck somewhere because of session.

      besttechlab :
      Thanks buddy. It’s a nice post.
      I am getting stuck somewhere because of session.

      What?s Taking place i’m new to this, I stumbled upon this I’ve found It positively helpful and it has helped me out loads. I’m hoping to give a contribution & aid different customers like its aided me. Good job.

      Chris M :
      I realize this is free and I appreciate you sharing your work – very respectable, however I want to make some suggestions as I am ripping it apart for my own use. Under startChatSession there is a part in the iteration of the session data that makes an ajax request for the username each and every time, not only is this a database hit every time this is done it also keeps the page from loading fast because the page is waiting on the scripts that are NOT asynchronous to perform asynchronous requests. So if you have a site that has heavy user chat you could have as many requests as you do lines of chat stored in the session when you refresh a page. This can start to become 80+ to 200+ requests in which the chat boxes will not show up until the scripts are done initializing. These requests aren’t even necessary because the session data actually looks up the username of the sending user, no need to do it 200+ times. I will post my other suggestions as I walk through them to share with others, but by commenting out the sub ajax requests that are unecessary I’ve been able to dramatically decrease page load times.
      under
      startChatSession()
      // $.ajax({
      // url: “ajax.php?M=Chat&action=chatname&usw=”+item.f,
      // cache: false,
      // dataType: “json”,
      // async: false,
      // success: function(data) { chatusername=data.unm; } });
      chatusername = item.u;

      Chris M :
      I realize this is free and I appreciate you sharing your work – very respectable, however I want to make some suggestions as I am ripping it apart for my own use. Under startChatSession there is a part in the iteration of the session data that makes an ajax request for the username each and every time, not only is this a database hit every time this is done it also keeps the page from loading fast because the page is waiting on the scripts that are NOT asynchronous to perform asynchronous requests. So if you have a site that has heavy user chat you could have as many requests as you do lines of chat stored in the session when you refresh a page. This can start to become 80+ to 200+ requests in which the chat boxes will not show up until the scripts are done initializing. These requests aren’t even necessary because the session data actually looks up the username of the sending user, no need to do it 200+ times. I will post my other suggestions as I walk through them to share with others, but by commenting out the sub ajax requests that are unecessary I’ve been able to dramatically decrease page load times.
      under
      startChatSession()
      // $.ajax({
      // url: “ajax.php?M=Chat&action=chatname&usw=”+item.f,
      // cache: false,
      // dataType: “json”,
      // async: false,
      // success: function(data) { chatusername=data.unm; } });
      chatusername = item.u;

      Chris M :
      I realize this is free and I appreciate you sharing your work – very respectable, however I want to make some suggestions as I am ripping it apart for my own use. Under startChatSession there is a part in the iteration of the session data that makes an ajax request for the username each and every time, not only is this a database hit every time this is done it also keeps the page from loading fast because the page is waiting on the scripts that are NOT asynchronous to perform asynchronous requests. So if you have a site that has heavy user chat you could have as many requests as you do lines of chat stored in the session when you refresh a page. This can start to become 80+ to 200+ requests in which the chat boxes will not show up until the scripts are done initializing. These requests aren’t even necessary because the session data actually looks up the username of the sending user, no need to do it 200+ times. I will post my other suggestions as I walk through them to share with others, but by commenting out the sub ajax requests that are unecessary I’ve been able to dramatically decrease page load times.
      under
      startChatSession()
      // $.ajax({
      // url: “ajax.php?M=Chat&action=chatname&usw=”+item.f,
      // cache: false,
      // dataType: “json”,
      // async: false,
      // success: function(data) { chatusername=data.unm; } });
      chatusername = item.u;

  24. I realize this is free and I appreciate you sharing your work – very respectable, however I want to make some suggestions as I am ripping it apart for my own use. Under startChatSession there is a part in the iteration of the session data that makes an ajax request for the username each and every time, not only is this a database hit every time this is done it also keeps the page from loading fast because the page is waiting on the scripts that are NOT asynchronous to perform asynchronous requests. So if you have a site that has heavy user chat you could have as many requests as you do lines of chat stored in the session when you refresh a page. This can start to become 80+ to 200+ requests in which the chat boxes will not show up until the scripts are done initializing. These requests aren’t even necessary because the session data actually looks up the username of the sending user, no need to do it 200+ times. I will post my other suggestions as I walk through them to share with others, but by commenting out the sub ajax requests that are unecessary I’ve been able to dramatically decrease page load times.

    under

    startChatSession()

    // $.ajax({
    // url: “ajax.php?M=Chat&action=chatname&usw=”+item.f,
    // cache: false,
    // dataType: “json”,
    // async: false,
    // success: function(data) { chatusername=data.unm; } });
    chatusername = item.u;

  25. Your chat script is awesome and wonderful. I like it very much.. Is there a way to have a desktop notifications when we are in another browser?

    Thank you.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s