X

This is a LIVE example of an AJAX Chat System where both publisher and subscriber chat can be viewed on the same page. (There is also a live link to the chat log file on the Server, which is refreshed whenever new content is downloaded).

Note: HTML chat systems traditionally use SQL database to store chat data, but a plain text file is really all that's required and can be just as effective for all but the most complex of systems.

I have been writing HTML chat systems for years, but I never stop being amazed by the incredible speed at which computers can process data.

In its most basic form (like this demo) an HTML chat system works something like this:

Publisher [order of events for sending a message] - Passive (must be initated by the user)

  1. You type a message and hit Send or Enter
  2. Your computer sends that message over the internet to the Server (a super computer located in a different country, for example) and waits for a response
  3. The Server reads the message, and updates a text file (the chat log) by adding a new line of comma separated values with the date, sender and message
  4. The Server sends the comma separated values back to your computer
  5. Your computer receives the comma separated values (date, sender, message), formats it for HTML and adds it to the chat window

Subscriber [order of events for getting new messages] - Active (automatically checks for new messages)

  1. Your computer sends a request (for new messages) over the internet to the Server 4 times a second
  2. The server sends back new messages (if any)
  3. Your computer fomats the new messages (if any) for HTML and adds them to your (the subscriber's) dialogue box

Note: This is not to be confused with Peer2Peer chat systems such as Skype or Yahoo, which work in a completely different way!

It is important to note that there is no trickery or DOM manipulation on this page - all the events are processed EXACTLY how they would be in a real AJAX chat system. Both KwakDuck and MooCow chat dialogues are operating completely independantly of each other.

For example, when you type a message and hit Enter, it appears in the Publisher's chat dialogue at almost the same instant you release the key, giving the impression that the webpage simply moved your message from one box to another - but that is absolutely NOT what happened!

In actuality, the entire order of events listed above must happen successfully before that message is added to the Publisher's chat dialogue.

Source code for the JS and PHP files can be viewed by clicking on the process notifiers, such as "Getting New Messages..."

X
HTML5 Chat Demo (with File Send)
Click To See Diagram And Code Samples
SEND Message Process
Server
Opens chat_log.txt and adds a new line in the format of:

"TIME, PUBLISHER NAME, MESSAGE"

Saves chat_log.txt

Opens chat_log.txt, reads new line(s) (message[s]) and sends them back to Browser

Server-Side Script
(PHP)
click to view
Client-Side Script
(JS)
click to view
Sends MESSAGE and PUBLISHER NAME to Server
Add(s) the new message(s) to the PUBLISHER's chat
Client-Side Script
(JS)
click to view
Browser
GET Message Process
Server
If new messages detected (size of chat_log.txt changed) opens chat_log.txt, reads new line(s) (message[s]) and sends them back to Browser
Server-Side Script
(PHP)
click to view
Client-Side Script
(JS)
click to view
Sends request to server (each 2 seconds) to check if there are any new messages in chat_log.txt
Add(s) the new message(s) to the SUBSCRIBERS's chat
Client-Side Script
(JS)
click to view
Browser
SEND File Process
Server
Adds new tags to XML file:
  • <UNIQUE_ID>
    • <UPLOAD PROGRESS>
    • <FILENAME>
  • </UNIQUE_ID>

Adds new line TXT file:

UNIQUE_ID, FILENAME

Client-Side Script
(JS)
click to view
Sends UPLOAD COMPLETED or UPLOAD ABORTED message to Server
Server-Side Script
(PHP)
click to view
Client-Side Script
(JS)
click to view
Continually sends latest UPLOAD PROGRESS to Server and updates PUBLISHER's chat with current progress of the file transfer
Updates XML file with latest UPLOAD PROGRESS
Server-Side Script
(PHP)
click to view
Client-Side Script
(JS)
click to view
Sends UNIQUE_ID and FILENAME to Server
Updates XML file and sets UPLOAD PROGRESS to "100" or "CANCELLED"
Server-Side Script
(PHP)
click to view
Browser
GET File Process
Server
Client-Side Script
(JS)
click to view
If new files were detected by the previous script, continually checks with Server (file_transfers.xml) for latest transfer progress for the file tags with the UNIQUE_ID's obtained by the previous script

Stops checking when the <load> tags for the relevant file(s) have values of either "100" or "CANCELLED"

If new file transfers detected (i.e. the size of file_transfers_for_MooCow.txt has changed) opens file_transfers_for_MooCow.txt, reads new line(s) (file detail[s]) and sends them back to Browser
Server-Side Script
(PHP)
click to view
Sends back latest file transfer progress to Browser, so that Client-Side script can update the "% completed..." message(s) for all current file transfers in the SUBSCRIBER's chat
Server-Side Script
(PHP)
click to view
Client-Side Script
(JS)
click to view
Sends request to Server (each 5 seconds) to check if there are any new lines (file transfers) in file_transfers_for_MooCow.txt
Updates the "% completed..." for all current file transfers in the SUBSCRIBER's chat
Client-Side Script
(JS)
click to view
Browser
X
code_sample
SEND FILE (Order of Events)
  1. send_file.js: generate UNIQUE ID for file
  2. send_file.js: add info message for KwakDuck: Sending File To MooCow...
  3. send_file.js: add new <div> element to KwakDucks's chat, with an id of the file ID, and with the text "Sending <filename> 0% completed..."
  4. send_file.js: create new FormData object for uploading file to server
  5. send_file.js: add event listeners for the upload (progress, load, abort)
  6. send_file.js / file_transfer.php: post FormData object (file) to server, for saving to server directory
  7. send_file.js / init_file_transfer_details.php: send file details (UNIQUE ID, filename) to server, for adding new content to file_transfers_for_MooCow.txt
  8. send_file.js / init_file_transfer_details.php: send file details (UNIQUE ID, filename, progress) to server, for adding new content to file_transfers.xml
  9. progress event:
    • send_file.js/update_file_transfer_details.php: update file details (progress) for UNIQUE ID tag in file_transfers.xml when progress event fires
  10. load event:
    • send_file.js / update_file_transfer_details.php: update file details (set progress to 100) for UNIQUE ID tag in file_transfers.xml when load event fires (load event only fires ONCE when upload is completed)
    • send_file.js: add info message for KwakDuck: <filename> sent
    • send_file.js: update relevant <div> element in KwakDuck's chat with the text: "<filename> has been sent"
  11. abort event:
    • send_file.js / cancel_file_transfer.php: update file details (set progress to CANCELLED) when abort event fires (abort event fires when file upload is cancelled by sender)
    • send_file.js: add info message for KwakDuck: File Transfer CANCELLED
    • send_file.js: update relevant <div> element in KwakDuck's chat with the text: "<filename> <load>% - CANCELLED
Scripts Used By This Process
Files Required By This Process
GET FILE (Order of Events)
  1. get_file.js / check_incoming_file_transfers.php: keep checking filesize of "file_transfers_for_MooCow.txt" to see if any new file transfers exist
  2. check_incoming_file_transfers.php: if filesize of "file_transfers_for_MooCow.txt" has changed, then we know that new files are being uploaded, so...
  3. send_file.js: add info message for MooCow: Getting New File(s)...
  4. check_incoming_file_transfers.php: read file_transfers_for_MooCow.txt and send back details (ID, FILENAME) of file transfer(s) as csv (comma separated values)
  5. get_file.js: add new <div> element to MooCow's chat, with an id of the file ID, and with the text "Receiving File <filename> 0% completed..."
  6. get_file.js / get_incoming_file_transfer_status.php: keep checking the status of the current file transfer(s) by reading file_transfers.xml on the server, and sending back values of the xml tags (ID <parent tag>, PROGRESS <load>, FILENAME <filename>) as csv (comma seperated values)
  7. get_file.js: update the text (innerHTML) of the <div> elements of the relevant ID's with the latest progress (%) obtained from the xml <load> tag(s)
  8. get_file.js: stop checking the status of the current file transfers(s) when all xml <load> tag values are either "100" or "CANCELLED", and update the <div> elements with the relevant ID's
  9. If the file transfer was cancelled...
    • get_text.js: add info message for MooCow: File Transfer CANCELLED
    • get_text.js: update relevant <div> element in MooCow's chat with the text: "Sending of <filename> was CANCELLED"
  10. If the file transfer was completed...
    • get_text.js: add info message for MooCow: <filename> received
    • get_text.js: update relevant <div> element in MooCow's chat with the text: "<filename> was received. Click to Save File" (with the filename as an HTML link to the file on the server)
  11. get_file.js: stop checking the status of current file transfers, as there are none (stop reading file_transfers.xml)
Scripts Used By This Process
Files Required By This Process
SEND MESSAGE (Order of Events)
Note: send_text.js and send_text.php are used both for SENDING and GETTING new messages
  1. send_text.js: add info message for PUBLISHER: Sending Message To <subscriber>...
  2. send_text.js: send text to the server-side script (send_text.php)
  3. send_text.php: add new line to the chat log (chat_log.txt) in CSV (comma seperated values) format with the following values: <time>, <publisher name>, <message>
  4. send_text.php: get new lines from chat log, and send them back to send_text.js
  5. send_text.js: add infor message for PUBLISHER: Message Sent To <subscriber>
  6. send_text.js: generate line values from CSV, and add them to the publisher's chat
Scripts Used By This Process
Files Required By This Process
GET MESSAGE (Order of Events)
Note: send_text.js and send_text.php are used both for SENDING and GETTING new messages
  1. send_text.js: keep checking filesize of "chat_log.txt", to see if any new messages exist
  2. send_text.php: get new lines from chat log, and send them back to send_text.js
  3. send_text.js: add info message for SUBSCRIBER: Getting New Message(s)...
  4. send_text.js: generate individual lines from the comma separated values, and add them to the subscriber's chat
Scripts Used By This Process
Files Required By This Process
KwakDuck
MooCow
debug