May 7 2008

Gmail Chat Implementation

This entry is part 3 of 3 in the series Gmail Architecture

Today i implemented gmail chat window , not an ajax chat with a chat server, but its client side implementation.

Here you can see the demo: http://www.sajithmr.com/gtalk/

Take this link in a new tab or window, and take any other website without closing it.

After 3 seconds , (Consider it as a new chat message arrived situation) you can see the google chat notification sound , and title changing. (I didn’t get the actual gtalk notification sound, so i used windows notify.wav file )

You know google (gmail) implemented its sound notification is via swf object. Here me too done the same.

I wrote two function to check whether the browser is in focus or not.

 

Here is the functions:

function lostFocus()
{
document.title = 'Sajith M.R Says...';
state = 'nonfocus';
 
played =  0 ;
 
changeColorRed();
 
alterTitle();
 
}
 
function gotFocus()
{
document.title = 'Gmail Inbox(1)';
 
state = 'focus';
 
played = 0 ;
}

The alterTitle() function calls in 3 seconds setTimeOut manner.

function alterTitle()
{
 
if(state =='nonfocus')
 
{
if ( document.title == 'Gmail Inbox(1)')
{
 
if(played == 0)
{
soundManager.play('notify');
played = 1;
}
 
document.title = 'Sajith M.R Says...';
 
}
else
document.title = 'Gmail Inbox(1)';
 
setTimeout("alterTitle()",3000);
 
}
}

The soundmanager.js file handles the swf flash object and sound triggering.

<script type=”text/javascript” src=”script/soundmanager.js”></script>

These three simple scripts together created this demo: http://www.sajithmr.com/gtalk/

If you want the whole source code , mail me: admin@sajithmr.com

Comment Please …

Regards

Sajith.M.R
http://www.sajith.name


Gmail Architecture
Series Navigation«Upload Files Like Gmail

18 Comments on this post

Trackbacks

  1. sanils said:

    This is cool implementation in the client side.

    May 7th, 2008 at 7:27 pm
  2. vikas said:

    Hi,
    I looking for hints to implement a gmail like chat, and reading your post has been very informative. Thanks a lot for such a good break of the functionality. It would be very kind of you, if you can send the source code for the gtalk demo you have put on your website.

    Thanks a lot.

    Regards,
    vika

    June 16th, 2008 at 6:16 pm
  3. Sajith M.R said:

    Hey Vikas,
    Here is the full source code of client side implementation .
    (Not the sever side)

    http://www.sajithmr.com/downloads/gtalk.zip

    Regards
    Sajith

    June 16th, 2008 at 8:02 pm
  4. Leonardo Parada said:

    Hello:
    What need your code for work like an real chat?…AJAX?
    I want put on GMAIL CHAT on my blog…I will thank your help please.
    Thanks and Congratulations.

    July 20th, 2008 at 10:26 pm
  5. Sajith M.R said:

    @Leonardo Parada

    Hello, i dont have gmail full chat code. If you want to put a gmail chat on your blog, you can use google widget for that purpose, no need to code yourself. Gtalk widget for any blog is currently available.

    Regards
    Sajith

    July 20th, 2008 at 11:14 pm
  6. Mohamed Hanifa said:

    Hi

    How gmail chat get value from another client or user side windows value .Thats what icant under stand..and how its working . you were discuss about only title bar

    message and focus changing.

    Colud u explain breifly please..

    Thanks & Regards

    R.Mohamed anifa

    July 30th, 2008 at 2:36 pm
  7. Raja said:

    Hi,
    good work.
    Do u have facebook like chat source
    Plz if u hav send me
    thanks.

    September 29th, 2008 at 12:12 pm
  8. M.V.Chowdary said:

    Hai,

    I have seen the site and I am curious to know the program regarding Gmail Chat Implementation

    will u send it to the above mentioned e-mail id

    October 3rd, 2008 at 12:20 pm
  9. sagay said:

    hey,
    its very cool… Is there any script to find out the invisible chat persons in gmail ?… thanks in advance

    November 13th, 2008 at 1:35 pm
  10. vivek said:

    hi
    sir i m vivek khtrri
    i m working on similar project but i coudnd make it good chat
    so pls send me ur code if u dont mind

    November 20th, 2008 at 12:17 am
  11. priyesh said:

    Sir,
    Can U pls send me the whole code..

    January 9th, 2009 at 8:37 am
  12. jesima said:

    sir,
    i have seen the chat application.since i m doing my project in chat application i need he source code of chat application.kindly send me the source code of chat application as soon as possible.

    with regards,

    jesima.s

    January 23rd, 2009 at 6:09 pm
  13. Yaci said:

    Sajith M.R, is your flash file secure? Can anyone hack me with downloading other .xml file or something so…?
    Thanks for the script, I’ll use it on my chat once will check all is secure :)

    January 24th, 2009 at 1:15 pm
  14. Michael M. said:

    My nod Google - (Am at the good e-mail and website!!!)

    February 13th, 2009 at 12:26 am
  15. mohanv said:

    i want more sexy photos pls send my email id

    March 8th, 2009 at 7:35 am
  16. Zuhaib said:

    This can be done without the help of flash also and is easy .. do you have any idea on how to implement push chat as in gtalk? or may b something about comet?

    March 10th, 2009 at 1:05 am
  17. Poobalan said:

    hi, very nice article… i need to develop a chat system like gmail..
    can you give me some code ,,
    please help me……..

    April 13th, 2009 at 8:27 pm
  18. Saboor said:

    hi
    i also want to implement a chatting like Gmail or FaceBook ,
    please, email me the source code on saboorahmedawan@gmail.com , i will be thankful to you.

    June 25th, 2009 at 1:26 am

LEAVE A COMMENT

Subscribe Form

Subscribe to Blog

Recent Comments

  • Sajith M.R: Press shift and enter key for a new line in chat
  • Borellus: Nice little function there, I think I may try to use it at some point.
  • Abhishek: Can we have newline characters…. i want something like this Line 1 Line 2 Line 3
  • Joanne Cox: Thanks for sharing this; your input is appreciated and has made me change my opinion slightly. About the...
  • Saboor: hi i also want to implement a chatting like Gmail or FaceBook , please, email me the source code on...

Recent Posts

Categories

Blogroll