Simple Live Chat With PHP Websockets (Free Download)

Welcome to a tutorial on how to create a simple live chat application with PHP and WebSockets. Looking to add live chat features to your website or portal? Let us walk through an example in this guide – Read on!

ⓘ I have included a zip file with all the source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

TABLE OF CONTENTS

 

 

QUICK NOTES

• A copy of PHP Ratchet is required, but not included in the zip file. Use Composer to get the latest version – composer require cboden/ratchet.
• Run 1-chat-server.php in the command line.
• Access 2a-chat-client.html in the web browser.

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

SCREENSHOT

 

EXAMPLE 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.

 

 

 

DOWNLOAD RATCHET WEBSOCKET LIBRARY

• As above, a copy of Ratchet is required.
• An easy way is to use Composer to fetch the latest version.
• Open the command line, navigate to your HTTP folder – cd YOUR-HTTP-FOLDER.
• Run composer require cboden/ratchet. This will automatically download the latest version into the vendor/ folder.

 

PART 1) PHP WEBSOCKET LIVE CHAT

<?php
// (A) COMMAND LINE ONLY
// CREDITS : https://stackoverflow.com/questions/933367/php-how-to-best-determine-if-the-current-invocation-is-from-cli-or-web-server
function is_cli () {
  if (php_sapi_name()==="cli") { return true; } 
  if (defined("STDIN")) { return true; }
  if (array_key_exists("SHELL", $_ENV)) { return true; }
  if (!array_key_exists("REQUEST_METHOD", $_SERVER)) { return true; }
  if (empty($_SERVER["REMOTE_ADDR"]) && !isset($_SERVER["HTTP_USER_AGENT"]) && count($_SERVER["argv"])>0) { return true; }
  return false;
}
if (!is_cli()) { exit("Please run this in the command line."); }

// (B) LOAD RATCHET
// https://github.com/ratchetphp/Ratchet
// composer require cboden/ratchet
require "vendor/autoload.php";
use Ratchet\MessageComponentInterface;
use Ratchet\ConnectionInterface;
use Ratchet\Server\IoServer;
use Ratchet\Http\HttpServer;
use Ratchet\WebSocket\WsServer;

// (C) CHAT CLASS
class Chat implements MessageComponentInterface {
  // (C1) PROPERTIES
  private $debug = true; // debug mode
  protected $clients; // connected clients
  
  // (C2) CONSTRUCTOR - INIT CLIENTS LIST
  public function __construct () {
    $this->clients = new \SplObjectStorage;
    if ($this->debug) { echo "Chat server started.\r\n"; }
  }

  // (C3) ON CLIENT CONNECT - STORE INTO $THIS->CLIENTS
  public function onOpen (ConnectionInterface $conn) {
    $this->clients->attach($conn);
    if ($this->debug) { echo "Client connected: {$conn->resourceId}\r\n";  }
  }

  // (C4) ON CLIENT DISCONNECT - REMOVE FROM $THIS->CLIENTS
  public function onClose (ConnectionInterface $conn) {
    $this->clients->detach($conn);
    if ($this->debug) { echo "Client disconnected: {$conn->resourceId}\r\n";  }
  }

  // (C5) ON ERROR
  public function onError (ConnectionInterface $conn, \Exception $e) {
    $conn->close();
    if ($this->debug) { echo "Client error: {$conn->resourceId} | {$e->getMessage()}\r\n";  } 
  }

  // (C6) ON RECEIVING MESSAGE - SEND TO EVERYONE
  public function onMessage (ConnectionInterface $from, $msg) {
    $msg = strip_tags($msg);
    if ($this->debug) { echo "Received message from {$from->resourceId}: {$msg}\r\n"; }
    foreach ($this->clients as $client) { $client->send($msg); }
  }
}

// (D) START!
$server = IoServer::factory(new HttpServer(new WsServer(new Chat())), 8080); // @CHANGE if not port 8080
$server->run();

Not going to explain this line-by-line, but in summary:

1. A “safety check” to make sure the script is run from the command line.
2. Load and use the Ratchet library.
3. The mechanics of the chat application:
   • (C3) We store all clients into $this->clients when they connect to the WebSocket server.
   • (C4) Remove the clients from $this->clients when they disconnect.
   • (C6) On receiving a message from any client, we loop through $this->clients and forward the message to everyone.
4. Start the live chat server.

Yep. That’s all for the “complicated chat server”.

 

 

PART 2) LIVE CHAT PAGE

2A) THE HTML

<div id="chat-wrap">
  <!-- (A) CHAT MESSAGES -->
  <div id="chat-messages"></div>
 
  <!-- (B) SET NAME -->
  <form id="chat-name" onsubmit="return chat.start()">
    <input type="text" id="chat-name-set" placeholder="What is your name?" value="Jon Doe" required>
    <input type="submit" id="chat-name-go" value="Start" disabled>
  </form>
 
  <!-- (C) SEND MESSAGE -->
  <form id="chat-send" onsubmit="return chat.send()">
    <input type="text" id="chat-send-text" placeholder="Enter message" required>
    <input type="submit" id="chat-send-go" value="Send">
  </form>
</div>

There are 3 parts to the HTML chat interface:

1. <div id="chat-messages"> is where we show all the chat messages.
2. <form id="chat-name"> is where we ask the user for a name before launching the chat.
3. <form id="chat-send"> is the “send message” box. This is hidden at first, will only show after the user enters a name and successfully connects to the WebSocket server.

 

 

2B) LIVE CHAT JAVASCRIPT

var chat = {
  // (A) INIT - GET HTML ELEMENTS
  host : "ws://localhost:8080/", // @CHANGE to your own!
  name : "", // current user name
  socket : null, // websocket object
  hMsg : null, // html chat messages
  hName : null, // html set name form
  hNameSet : null, // html set name field
  hNameGo : null, // html set name submit
  hSend : null, // html send message form
  hSendTxt : null, // html send message field
  hSendGo : null, // html send message submit
  init : () => {
    chat.hMsg = document.getElementById("chat-messages");
    chat.hName = document.getElementById("chat-name");
    chat.hNameSet = document.getElementById("chat-name-set");
    chat.hNameGo = document.getElementById("chat-name-go");
    chat.hSend = document.getElementById("chat-send");
    chat.hSendTxt = document.getElementById("chat-send-text");
    chat.hSendGo = document.getElementById("chat-send-go");
    chat.hNameGo.disabled = false;
  },
 
  // (B) SWAP BETWEEN SET NAME/SEND MESSAGE FORM
  swap : direction => {
    if (direction) {
      chat.hName.classList.add("hide");
      chat.hSend.classList.remove("hide");
    } else {
      chat.hSend.classList.add("hide");
      chat.hName.classList.remove("hide");
    }
  },
 
  // (C) START CHAT
  start : () => {
    // (C1) SET NAME + SWAP HTML FORM
    chat.name = chat.hNameSet.value;
    chat.swap(1);
    chat.hSendGo.disabled = true;
 
    // (C2) CREATE WEB SOCKET
    chat.socket = new WebSocket(chat.host);
 
    // (C3) ON OPEN - ENABLE CHAT
    chat.socket.onopen = e => chat.hSendGo.disabled = false;
 
    // (C4) ON CLOSE - SWAP BACK TO "SET NAME"
    chat.socket.onclose = e => chat.swap(0);
 
    // (C5) ON RECEIVING DATA - UPDATE HTML CHAT
    chat.socket.onmessage = e => {
      let msg = JSON.parse(e.data),
      row = document.createElement("div");
      row.className = "chat-row";
      row.innerHTML = `<div class="chat-name">${msg.n}</div><div class="chat-msg">${msg.m}</div>`;
      chat.hMsg.appendChild(row);
    };
 
    // (C6) ON ERROR
    chat.socket.onerror = e => {
      chat.swap(0);
      console.error(e);
      alert(`Failed to connect to ${chat.host}`);
    };
 
    return false;
  },

  // (D) SEND MESSAGE
  send : () => {
    chat.socket.send(JSON.stringify({
      n: chat.name,
      m: chat.hSendTxt.value
    }));
    chat.hSendTxt.value = "";
    return false;
  }
};
window.onload = chat.init;

This is yet another “massive script”, but keep calm and look carefully – The var chat object literally contains all the mechanics to run the live chat.

1. init() Runs on window load. All it does is literally get all the HTML elements.
2. swap() Swap the HTML interface between “set name” and “send message”.
3. start() When the user enters the name and clicks on “start”. Long story short, create a WebSocket object, connect to the server, and update the HTML chat on receiving messages.
4. send() Self-explanatory. Send a chat message to the server.

 

 

 

IMPROVEMENT IDEAS

This is ultimately a simple example, a lot of changes can be done to make it better.

• Do a “unique name check” after connecting to the server to make sure that there are no clashes.
• Announce when users connect/disconnect from the chat.
• Save the messages to the database, or store them in the browser.
• If you want to create “chat rooms”, a possibility is to:
  • Turn $clients into a nested array in 1-chat-server.php. For example, $clients["PUBLIC"] = [], $clients["TECH"] = [], $clients["LIFE"] = [].
  • On connect, the client needs to provide the group name, or we will put them into PUBLIC by default.
  • When the client sends a message, forward it to everyone in the group only.

Yep, the possibilities are endless – It is up to you to complete your own system now.

 

COMPATIBILITY CHECKS

• Arrow Functions – CanIUse
• Template Literals – CanIUse
• WebSocket API – CanIUse

Works across all modern browsers.

 

LINKS & REFERENCES

• Sockets – PHP
• WebSocket API – MDN
• Ratchet Documentation

 

YOUTUBE TUTORIAL