SYSTEM OVERVIEW

There are 3 parts to this live chat system:

• Database – To store the chat.
• Server – The PHP scripts that will host the chat.
• Clients – The HTML/Javascript that will connect to the server.

AJAX LONG POLLING VS WEBSOCKET

Remember that “AJAX long polling” is mentioned in the introduction above? What is it and how is WebSocket different? Well, long story short:

• AJAX is an asynchronous connection to the server – Once you get the data, the connection is closed. Long polling works by firing multiple AJAX requests to the server over a long period of time to simulate a real-time connection.
• A socket, on the other hand, is a “permanent” connection – Once you connect to the server, you remain connected until you manually disconnect.

So yep, some of you sharp code ninjas should have figured this out. An “always on” WebSocket connection works better in the context of real-time applications.

PHP SOCKET EXTENSION

For this project to work, you need to enable the socket extension. Look under the extensions section of your php.ini file and enable it accordingly:

extension=sockets

SERVER-SIDE PHP SCRIPT

We begin the project by creating the server-side script:

• This script will open up a socket at your specified address, port number, and listen for client connections.
• The somewhat painful part to understand is that PHP does not support WebSockets out-of-the-box… We will have to manually serve our own handshake headers to the clients.
• You can read more about the WebSocket headers at MDN web docs if you want.
• The final part is really isn’t that much of a mystery. We simply keep this script running and output a dummy timestamp to any connected client in an infinite while (true) loop.

CLIENT JAVASCRIPT

Next, this is as simple as it gets on the client side. All we need to do is to connect to the server socket, and show the updates as they stream in.

START YOUR ENGINES!

With scripts on both server and client side ready, we can now launch the script from the command prompt (or terminal). 

D:\http\test>php 1-server.php

Then, access the client script from your web browser.

THE SCRIPT

0) {
    /* (5) LISTEN FOR DATA INPUT */
    foreach ($clients as $c) {
      if (($chat = socket_read($c, 5000)) !== false) {
        // The client message is masked!
        // We need to unmask it to get back the original message
        $buffer .= unmask($chat) . "
";
        if ($verbose) { echo "Buffer - " . $buffer . "\r\n"; }
      }
    }

    /* (6) UPDATE CHAT TO ALL CONNECTED CLIENTS */
    if ($buffer != "") {
      $chat = chr(129) . chr(strlen($buffer)) . $buffer;
      if ($verbose) { echo "Output Buffer - " . $chat . "\r\n"; }
      foreach ($clients as $c) {
        socket_write($c, $chat);
      }
      $buffer = "";
    }
  }
}
?>

THE EXPLANATION

Holy cow. Some of you guys might be foaming in the mouth at the “small improvements” this server-side script has… But rest assured, how it works is still fundamentally the same. The only exception is that instead of being a dumb “output timestamp”, we added features to allow multiple client connections, and allow 2-way communications. Here’s a summary:

1. As usual, we begin with the settings and a support function.
2. Create and open a WebSocket.
3. Create an endless loop.
4. Listen for new connections, and do the WebSocket magic handshake thing.
5. Listen for chat input from the users, and store them into a buffer.
6. Output the chat buffer to all connected clients to update them.

THE SCRIPT

THE EXPLANATION

Holy cow. Some of you guys will be foaming in the mouth again from the “improvements” made in the Javascript. But keep calm and look carefully.

• We have only added a simple form to receive text input for the chat.
• Things may look complicated, but we are just arranging things better by putting all the chat related stuff into var chat.
• The working principals are the same as the above simple example.
• Connect to the server, enable the chat form, and update the view as we receive more messages from the server.

See, it’s not so bad.

RESTART YOUR ENGINES

All that remains is the same as previous – Run the server-side script in the command line, and access the client-side script in your web browser.

REFERENCES

If you want to learn more about sockets, here are the official links:

• PHP Sockets
• MDN WebSocket

LIMITATIONS

This chat script is extremely simplistic. There are no user identifications, nor does the server-side does any detection if the user has closed connection. There is no error management as well. All of these are kind of up to everyone’s project needs, and I will not add any more to it… Nor give away free lunches.  

QUICK START

Skipped the entire tutorial? Here are a few quick steps to set up the example:

• Download and unzip into the project folder, there are 2 sets of codes in the zip file.
• 1-server.php and 1-client.html is not a live chat, but a simple demonstration of WebSocket.
• 2-chat-server.php and 2-chat-client.html are the simple live chat.
• Run 2-chat-server.php in the command line.
• Access 2-chat-client.html in your web browser.

SOURCE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.
 

The post How to Create PHP Live Chat With Websocket appeared first on Code Boxx.