Facebook Chat rocks. If you’re on Facebook, chances are you might have sent and received a message or two via Facebook Messenger. The bottom line is it works and it works well for both the users and the servers that are hard at work. A buggy and inefficient chat just won’t work when you have millions of users to serve.

In this resource guide, you’ll find resources that will provide the knowledge that you need to create a Facebook chat app using PHP. But quick interruption before we get there. I just want to be clear with the terminology. In the context of this resource guide, we’re using Facebook Chat/FB Chat/Facebook chat to refer to the specific feature in Facebook Messenger that allows the users to send and receive messages in real time. We won’t be covering other Messenger features such as attachment and voice call.

Here are some aspects we’ll be covering in this guide:-

  • The essence of a chat app
  • Tech stack to use
  • PHP chat server
  • Database design
  • User interface (UI) design

Resources to Help You Build a Facebook-like Chat with PHP

1. Simple PHP Chat

One of the best way to learn is to looking at sample code. In the link below, you’ll find a bare-Bone chat built using jQuery and PHP socket programming. The code is not complete and is not production-ready. But it’s a great way for coders such as yourself who are familiar with JavaScript and PHP to learn how does a chat system work through code. To run this code and see it in action, you’ll need to whip up some simple HTML for the JS code to work with.

See it here

2. Chat System Overview

What makes a chat system a chat system? What is the common architecture and what are the building blocks?

This article by cometchat does a great job at giving the readers an overview of the chat system without getting long-winded. It’s easy to follow and understand. The diagrams are really helpful too. It’s not PHP-specific, as a matter of fact, there’s no code in there. It’s strictly an overview.

cometchat: Understanding the Architecture & System Design of a Chat Application – read it here.

Another overview that I recommend is this article by System Interview. It’s wordier and the structure of the guide itself can be somewhat less systematic than the cometchat article. But it provides a deeper look into how chat works. There are also plenty of diagrams to help you understand and gain intuition on the system-level design. One of topics the article touches on is database design, something a chat system developer might find useful.

System Interview: Design of a Chat System – read it here.

3. Tech Stack for Your Chat System

You should do your own research on the tech to use based on your specific needs. But here are my recommendations for your PHP-based chat app:-

Backend

Recommendation: Laravel/Lumen + Plain PHP

For all the bad rep PHP has been getting, it’s actually a solid tool to build web applications. You can absolutely build a chat server using just plain PHP but if productivity and security are of any concern to you, you might want to consider using frameworks such as Laravel and Lumen. While they aren’t without learning curves, you can offload responsibilities like user authentication and REST API parameter validation to them.

Unfortunately, it appears that the frameworks’ support for web socket is a little weak. That means you will most likely have to write the core chat code yourself.

Database

Recommendation: Any

MySQL, PostgreSQL, MongoDB or any other databases that you’re comfortable with AND have excellent PHP support.

Here’s a video from AppifyLab that discusses efficient database design for chat app. Note that it uses a JavaScript backend instead of PHP, but the database structure should be independent of the programming language you use.

Protocol

Recommendation: Web Socket

Socket programming is your best bet here if you’re using PHP. You might have heard about this hugely popular chat protocol known as XMPP. Famously, it powers popular messenger apps like Whatsapp and Wechat. However, you don’t implement XMPP in a PHP server the same way you do with web socket. XMPP is usually deployed as part of an already-built XMPP server such as the famous ejabberd used in the early days of Facebook Chat . I believe Erlang is typically used for customizing an XMPP server. Please do more research on this if you’re interested. But if you’re using PHP, personally I would just go with web socket.

Client

Building an efficient chat server is a challenging task. But don’t undermine the complexity of client code — especially if you’re planning to support multiple platforms à la Facebook Chat.

1. Web Client

Recommendation: VueJS

VueJS is a battery-included, battle-tested JavaScript framework. It’s been around for years and thriving. That means excellent community support and most importantly plenty of tutorials available. For example, here are some tutorials on building a chat app:-

  • VueJS Examples: Vue JS Chat App Like Facebook Messenger. Read it here.
  • VueJS Examples: All Vue JS chat examples. See it here.
  • cometchat: Create a Chat App with Vue.js. Read it here.

Angular JS was shortlisted for recommendation but I took it out the very last minute. Unfortunately, I just felt that the chat-specific resources available just weren’t as great as Vue.js.

2. Mobile App Client

This is beyond the scope of this guide. But support for socket programming is pretty common, so it’s unlikely that you’ll run into any problems whether you’re doing Native Android / iOS or using a cross-platform framework like Ionic.

Facebook Chat UI Design (CSS)

To capture the essence of that Facebook Messenger look, check out these CSS tips and examples.

  • CSS Tricks: Recreating the Facebook Messenger Gradient Effect with CSS – See it here.
  • ishadeed: CSS Findings From The New Facebook Design – See it here.

Code examples and templates

Helpful Videos and Tutorials

Once you have looked at some sample codes and have an understanding of how the system operates, check out these video tutorials.

  • Coding Nepal: Chat Application using PHP with MySQL & JavaScript – Watch it here.
  • Coding Cafe: PHP Chat Application Tutorial – Watch it here. This is part 1 of a series of videos dedicated to developing a PHP chat app.
  • Techno Geek: Messenger Chat System in PHP and MySQL – Watch it here. The tecno music is terrible and it’s more of a show than tell, but otherwise it’s a helpful video.

Other Resources / Readings

Here are some additional readings that you might find helpful.

Digital Ocean: PHP Server Scaling Tips

Facebook Engineering on Facebook Chat

Software developer looking for remote Golang opportunities.