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
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:-
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.
MySQL, PostgreSQL, MongoDB or any other databases that you’re comfortable with AND have excellent PHP support.
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.
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
- 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
- Facebook like chat box
- Facebook Messenger Chat
- Bootstrap messenger examples – multiple examples covering Facebook and WhatsApp.
- Bootstrap chat box like Facebook – classic Facebook chat box design
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 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