Build a Chat Messaging Platform in PHP

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

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

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:

php -v

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:

composer -v

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:

composer require get-stream/stream-chat

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:

https://gist.github.com/nparsons08/b1ebf2a9773a152e05ac54cc6ee28e6e

Make sure to update the <STREAM_API_KEY> and <STREAM_API_SECRET> 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:

php -S localhost:6060

Creating the Chat Interface

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

https://gist.github.com/nparsons08/7d070fea0508326f34a75d07d3dca0b3

You may have noticed that we include a few <script>s 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> 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:

https://gist.github.com/nparsons08/5d5de24ed99d4fd010b74cdae5e2c444

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> in our page.php file):

https://gist.github.com/nparsons08/54726287b1267e4b5e5e262a3a873b2e

Again, make sure to change the <STREAM_APP_KEY> 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:

https://gist.github.com/nparsons08/e0df0a7fc1850269169e61feb95849d1

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:

https://gist.github.com/nparsons08/a3ca2daaa746e6d46098d5b84dac097e

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:

https://gist.github.com/nparsons08/8ebc733c5acae62777216007f4fe00bc

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:

https://gist.github.com/nparsons08/13c977709627c40f3365472d64fe209c

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:

message div

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:

https://gist.github.com/nparsons08/a192b016e1beab89f01150d3065ce70d

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:

https://gist.github.com/nparsons08/77ad7b20a79777420b0451bad231179c

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:

https://gist.github.com/nparsons08/b08adb44f192143d4d114ba834a2d804

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

https://gist.github.com/nparsons08/56fb536ca4f3ddb55b9e41fffd000628

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!

Sample working application

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!

Tutorials

Chat