Chat Application Like Facebook using PHP – Facebook Chat application is more popular site and it has lot of user everyday visit. Making a simple chat application like Facebook is pretty much simple. In this post i will show you how make a simple chat application just like Facebook.
Social Media networks are maximum used to pack the chat application. Moreover chat application not a easy steps to create social media platforms. Nowadays lot of social networks and chat conversations are available. So I hope this tutorial helps to build perfect chat web based application using PHP & MySQL database.
Already we are developing chat application similar of Facebook, Whatsapp, Viber and more. So one of the main apps are surely helps to build your own web application with same features like Facebook. For that you need to deploy your code on server. Then only communicate with server library files for activate mailer function.
Database Design
There are two tables in this design, users and chat. This schema design does not implement real authentication system. It just simulates a situation where both the users are logged in by passing the user id through the browser address bar i.e as a parameter.
The chat table has a foreign key reference to the users table id field.
Chat Application Like Facebook
The Chat Class (FbChatMock) contains the core methods for adding and retrieving the chat messages from the database. This class also connects to the database when the object is first created. These are just function based modules, so you have to create new service for every methods.
The methods in this class is easy to understand. The addMessage() method adds the user provided message by escaping it through real_escape_string and adds the message into the database. The user id is casted into an integer so that nothing gets inserted other than integer value.
The getMessages method makes a JOIN statement with both the users and chat table on the user_id field.
FbChatMock.php
Just add the database configuration.
/**
* @author vetripandi
*/
class FbChatMock {
// Holds the database connection
private $dbConnection;
//----- Database connection details --/
//-- Change these to your database values
private $_dbHost = 'localhost';
private $_dbUsername = 'root';
private $_dbPassword = '';
public $_databaseName = 'fbchat';
//----- ----/
/**
* Create's the connection to the database and stores it in the dbConnection
*/
public function __construct() {
$this->dbConnection = new mysqli($this->_dbHost, $this->_dbUsername,
$this->_dbPassword, $this->_databaseName);
if ($this->dbConnection->connect_error) {
die('Connection error.');
}
}
/**
* Get the list of messages from the chat
*
* @return array
*/
public function getMessages() {
$messages = array();
$query = "
SELECT
`chat`.`message`,
`chat`.`sent_on`,
`users`.`id`,
`users`.`username`
FROM `users`
JOIN `chat`
ON `chat`.`user_id` = `users`.`id`
ORDER BY `sent_on`";
// Execute the query
$resultObj = $this->dbConnection->query($query);
// Fetch all the rows at once.
while ($row = $resultObj->fetch_assoc()) {
$messages[] = $row;
}
return $messages;
}
/**
* Add a new message to the chat table
*
* @param Integer $userId The user who sent the message
* @param String $message The Actual message
* @return bool|Integer The last inserted id of success and false on faileur
*/
public function addMessage($userId, $message) {
$addResult = false;
$cUserId = (int) $userId;
// Escape the message with mysqli real escape
$cMessage = $this->dbConnection->real_escape_string($message);
$query = "
INSERT INTO `chat`(`user_id`, `message`, `sent_on`)
VALUES ({$cUserId}, '{$cMessage}', UNIX_TIMESTAMP())";
$result = $this->dbConnection->query($query);
if ($result !== false) {
// Get the last inserted row id.
$addResult = $this->dbConnection->insert_id;
} else {
echo $this->dbConnection->error;
}
return $addResult;
}
}
Chat page
The chat.php page initially fetches the previous chat messages if there is one and displays it. This page is the main chat page. Here is where the user is stored in the session which is got from the query parameter.
If you are like to work with android domain, visit our tutorial for how working with android app development
chat.php
<?php
@session_start();
$_SESSION['user_id'] = isset($_GET['user_id']) ? (int) $_GET['user_id'] : 0;
if ($_SESSION['user_id'] === 0) {
echo '<h1>
Provide your user id</h1>
';
exit;
}
// Load the messages initially
require_once __DIR__ . '/../FbChatMock.php';
$chat = new FbChatMock();
$messages = $chat->getMessages();
?>
<div class="container" style="border: 1px solid lightgray;">
<div class="msg-wgt-header">
<a href="#">John</a>
</div>
<div class="msg-wgt-body">
<table>
<?php
if (!empty($messages)) {
foreach ($messages as $message) {
$msg = htmlentities($message['message'], ENT_NOQUOTES);
$user_name = ucfirst($message['username']);
$sent = date('F j, Y, g:i a', $message['sent_on']);
echo <<<MSG
<tr class="msg-row-container">
<td>
<div class="msg-row">
<div class="avatar"></div>
<div class="message">
<span class="user-label"><a href="#" style="color: #6D84B4;">{$user_name}</a> <span class="msg-time">{$sent}</span></span><br/>{$msg}
</div>
</div>
</td>
</tr>
MSG;
}
} else {
echo '<span style="margin-left: 25px;">No chat messages available!</span>';
}
?>
</table>
</div>
<div class="msg-wgt-footer">
<textarea id="chatMsg" placeholder="Type your message. Press Shift + Enter for newline"></textarea>
</div>
</div>
Ajax Components
There are two main ajax pages,
1. add_msg.php – Adds the messages entered by the user to the database.
2. get_messages.php – Retrieves the messages from the database.
add_msg.php
session_start();
if (isset($_POST['msg'])) {
require_once __DIR__ . '/../../core/FbChatMock.php';
$userId = (int) $_SESSION['user_id'];
// Escape the message string
$msg = htmlentities($_POST['msg'], ENT_NOQUOTES);
$chat = new FbChatMock();
$result = $chat->addMessage($userId, $msg);
}
get_message.php
require_once __DIR__ . '/../../core/FbChatMock.php';
$chat = new FbChatMock();
$messages = $chat->getMessages();
$chat_converstaion = array();
if (!empty($messages)) {
$chat_converstaion[] = '<table>';
foreach ($messages as $message) {
$msg = htmlentities($message['message'], ENT_NOQUOTES);
$user_name = ucfirst($message['username']);
$sent = date('F j, Y, g:i a', $message['sent_on']);
$chat_converstaion[] = <<<MSG
<tr class="msg-row-container">
<td>
<div class="msg-row">
<div class="avatar"></div>
<div class="message">
<span class="user-label"><a href="#" style="color: #6D84B4;">{$user_name}</a> <span class="msg-time">{$sent}</span></span><br/>{$msg}
</div>
</div>
</td>
</tr>
MSG;
}
$chat_converstaion[] = '</table>';
} else {
echo '<span style="margin-left: 25px;">No chat messages available!</span>';
}
echo implode('', $chat_converstaion);
JavaScript
This scripts helps in getting the messages with an interval of 20 seconds for each messages fetching. The binding of users keyboard event is also done in this script. jQuery is needed for this scripts to work properly.
chat.js
/**
* Add a new chat message
*
* @param {string} message
*/
function send_message(message) {
$.ajax({
url: '/ajax/add_msg.php',
method: 'post',
data: {msg: message},
success: function(data) {
$('#chatMsg').val('');
get_messages();
}
});
}
/**
* Get's the chat messages.
*/
function get_messages() {
$.ajax({
url: '/ajax/get_messages.php',
method: 'GET',
success: function(data) {
$('.msg-wgt-body').html(data);
}
});
}
/**
* Initializes the chat application
*/
function boot_chat() {
var chatArea = $('#chatMsg');
// Load the messages every 5 seconds
setInterval(get_messages, 20000);s
// Bind the keyboard event
chatArea.bind('keydown', function(event) {
// Check if enter is pressed without pressing the shiftKey
if (event.keyCode === 13 && event.shiftKey === false) {
var message = chatArea.val();
// Check if the message is not empty
if (message.length !== 0) {
send_message(message);
event.preventDefault();
} else {
alert('Provide a message to send!');
chatArea.val('');
}
}
});
}
// Initialize the chat
boot_chat();