Build a Chat Messaging Platform in PHP

Building a fully functional and scalable chat platform is time-consuming. Luckily, Stream can help you build one in minutes!

In this tutorial, we are going to use the Stream API to build a chat messaging platform in PHP.

Prerequisites

To follow along with this tutorial, you need to have a basic understanding
of PHP and JavaScript.

You'll also want to make sure you have PHP and Composer installed on your system.

To check if you already have PHP installed on your system, run this command in your terminal:

If PHP is installed on your system, the version installed will be returned; otherwise, you will see “command not found: php”.

To check if you have Composer installed, run:

Once you've confirmed you have the necessary languages/packages installed, let’s dive in!

Creating a Stream Account

To be able to use the Stream API, you'll need to create an account. Visit the Stream Chat website and then click on the "SIGNUP" button.

On the popup page that appears, fill in your desired username and password, along with your email address, and then click on the "CREATE FREE ACCOUNT" button:

After creating your account, you will be taken to your Dashboard, where you'll find your APP ID, API KEY, and SECRET keys, which we’ll use to authenticate the SDK. Take note of these keys, as we will be using them in a bit:

Creating the Project

Now that we've gathered all of our "tools", create a folder named stream-chat-php in the directory where you store your code; this will be the home for all of our project files. Inside of your new stream-chat-php directory, create the following files:

  1. custom.js - this will contain our JavaScript code
  2. page.php - this will contain our chat interface
  3. server.php - this will contain our chat server logic
  4. style.css - this will contain our chat styling

Generating Tokens

We’ll be using the PHP SDK on the server and the JavaScript SDK on the client end to get realtime updates of what is happening on the chat, which includes realtime messages. To use the JavaScript SDK, we need to get a valid token, which we can generate from our PHP server.

To start, open your terminal and cd into your project root directory (stream-chat-php), then install the PHP SDK using composer:

On the prompt that appears - No composer.json in current directory, do you want to use the one at …? [Y,n]?, input n and press Enter.

Now that we have the SDK installed, we can add the following to the server.php file:

Make sure to update the and placeholders with your correct API KEY and SECRET respectively (which we grabbed from our Stream Dashboard).

In the above code, after initializing the PHP SDK, with the if (isset($_REQUEST["create-token"])) { block, we check the request for a user's create-token variable, so we can create a token with it by calling the $client->createToken(… function.

Now that we've initiated the code for our server, we can start up the server by running:

Creating the Chat Interface

Add the below code to the page.php file to create your chat interface:

You may have noticed that we include a few script tags at the end of this code:

  1. The JavaScript Stream SDK allows us to use Stream in our app
  2. Axios enables us to make http requests
  3. The script tag for our custom JavaScript code will be how we connect in the magic we'll create below

Making Our App Beautiful

You are welcome to add your own flair to your app, but you can get started by adding the following to the style.css file:

If you visit the project now, you will notice the page is blank: localhost:6060/page.php; we’ll be fixing this in the next step.

Initializing the JavaScript SDK

Let's get started with the client side of our app by initializing the Javascript SDK! Add the below code to your custom.js file (which, you'll remember, we referenced in the final script tag on our page.php file):

Note: Make sure to change the placeholder with your correct key.

Then, add the below function to the custom.js file, so that we can initialize the chat when the page is ready:

Getting a User's ID

Each user needs to have a unique id that we can use to identify them. Add the below code to the custom.js file:

The above allows us to display the chat page and initalize the JavaScript SDK when an valid user enters their username and password. To trigger this, we'll need to listen for when the user hits Enter; add the code below to the custom.js file:

Appending New Messages

In order to add each new message that comes in to the chat, add the below function to the custom.js file:

This function will take in the message payload (that contains the user's username and message), create a new Node element that holds the username and message, and then attach the message to the page using the message's id.

In the UI, that will look something like this:

Juggling New and Old Messages

Let's start by listening for new messages coming to the channel! Add the below code to the initializeClient(username) function at the top of custom.js:

Now, what about old messages on the channel already? We need to render those as well... To accomplish this, add the following to the initializeClient() function:

Sending Messages

So far, we can see previous messages and new messages added to the channel. Next, we will add functionality to allow users to send a new message to the channel.

Add the below function to the custom.js file:

Next, listen for the message-input and for when the user hits Enter, so we can send the message to the channel:

Testing It Out

To test out the chat:

  1. Open the application in two different tabs or browsers.
  2. Type in a username and hit Enter, in each.
  3. Exchange messages!

Conclusion

We have covered the basics of getting started with Stream Chat using the PHP SDK to power your chat. There are lots of amazing chat features that you can add to your chat, like the "is typing" indicator, online presence, and much more!

Please reach out and share your incredible creations with us; until then, happy coding!

TutorialsChat