The html times

Elegantly Powered by Google

Javascript Chat Client in jQuery by Thomas Steinmetz February 9th, 2008 Delicious



Relevant Downloads

Ajax Chat in jQuery

This is a a fully functional chatting client that auto-updates and uses draggable buddy lists and chat windows. Play with a live demo first.

There are three main files (excluding the jQuery required files) that drive this little application and I'll briefly go over them here. Each has decent documentation, so if you have even a moderate experience with PHP/MySQL and jQuery, you should understand what is going on.

tlk.html — The frontend

This page is a very basic html layout. The only thing on the page is a hidden div to bring up the username modal.

js/nikkto.tlk.js

This is where half of the magic happens. The JavaScript is responsible for keeping track of what windows are open and updating them, along with the buddy list, on the page.

When the page (tlk.html) loads, the JavaScript immediately calls getUsername(); so the user is prompted with a pop-up modal to type a desired username in. Once the user inputs a name, messages are checked to this username and the buddy list is created/updated. Both of these functions use the built-in setInterval() function so that they fire off every second to acquire any new messages, new buddies signing on, or buddies logging off (closing the window).

The buddy list is built and each user in it has an onClick() function calling newChat() to create a chat window for the selected user.

Similar to newChat() is makeChat(), which behaves much the same way except it accepts slightly different arguments. This is used in the aforementioned checkMessages setInterval() function for new messages that have yet to have their own chat window up and running.

xhr/nikkto.tlk.php

In this file the messages and buddies are passed to (via $_POST) and from (via XML) the PHP to be processed. Each time this file is called in an ajax request, it expects to have an action ($_POST['action']). This tells the script what it should be doing, like making a buddy list, checking messages, sending messages, and logging on to the chat. Each action is very straightforward and has comments on anything that might be confusing.

I've included the SQL schema for this web app to work for you. If you wanted to run this on your own web server, all you need is to run the SQL schema file into your MySQL database and alter nikkto.tlk.php lines 19 - 20 to connect to your database properly.

I am aware that there are a few things wrong with this little web app (the return key does not send a message, a user can close the username modal and be forced to refresh to bring it back up...). Please keep in mind that it was done over just a few hours to get a grip on working with jQuery and I never intended it to be the end-all-be-all of web chats. If you want to add anything to this app, either comment below or shoot me an email: thsteinmetz@gmail.com


Comments

Comments are now closed

Related Articles:

Cross Domain XMLHttpRequest

By Sam Clearman

Sam Clearman discusses two techniques for circumventing cross domain JavaScript restrictions on XMLHttpRequest in the same origin policy. Read more …


Information Wants To Be Free

Elegantly Powered by Google