In this post, we are going to build a simple PHP and Mysql Chat Application using PHP Web Socket Ratchet. If you are looking for How to create Live or Real time chat Application in PHP then you have come on the right place, because in this post we have share you how to create Live Chat Application PHP with WebSockets. In this post, we will create Chat Application in which multiple user can chat with other users.
This is very interesting post on How to create chat App in PHP without using Ajax. In one of our previous post, we have already published tutorial on Chat application in PHP using ajax. But As we have know in Chat system, Ajax based Chat application in PHP is not best solution, this is because Ajax will increases the load on the server. So for this here we have use Ratchet PHP WebSockets for build real-time live chat application in PHP and in this chat app we will store chat data in Mysql database when one user has post chat under this system.
What is WebSockets?
WebSockets is a bi-directional and full-duplex which has provide persistent connection from a web browser to our server. So when WebSocket connection has been established in our browser, then it will open connection until client or server has decides to close this connection. So by with this open connection, the user or our server can send or receive chat data at any given time to the each other and it will makes our web programming completely on event driven and not just user started off. The other benefits of this websockets is that, at the same time on single running server, it will connect all connection and it will allowing us to communicate with any number of live connection at the any given time. So this are all benefits of this WebSockets in this Web programming.
Based on this benefits, we have use PHP WebSockets like Ratchet for build Chat Application in PHP and Mysql. Under this post, we will learn you step by step how to build Chat Application in PHP using WebSocket from scratch. Under this PHP Web Development tutorial, you can learn how can we quickly build at Chat App with RatChet using PHP script and Mysql Database.
Database of Chat Application
Before learning chat application, first you need to make tables for store chat application data in Mysql database. So first you need to create tables by run following Sql script you can create chat application tables in you mysql database.
--
-- Database: `chat`
--
-- --------------------------------------------------------
--
-- Table structure for table `chat_user_table`
--
CREATE TABLE `chat_user_table` (
`user_id` int(11) NOT NULL,
`user_name` varchar(250) NOT NULL,
`user_email` varchar(250) NOT NULL,
`user_password` varchar(100) NOT NULL,
`user_profile` varchar(100) NOT NULL,
`user_status` enum('Disabled','Enable') NOT NULL,
`user_created_on` datetime NOT NULL,
`user_verification_code` varchar(100) NOT NULL,
`user_login_status` enum('Logout','Login') NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
--
-- Indexes for dumped tables
--
--
-- Indexes for table `chat_user_table`
--
ALTER TABLE `chat_user_table`
ADD PRIMARY KEY (`user_id`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `chat_user_table`
--
ALTER TABLE `chat_user_table`
MODIFY `user_id` int(11) NOT NULL AUTO_INCREMENT;
Source Code of PHP Chat Application
Below you can find PHP Chat Application Source code file.
database/Database_connection.php
This file we will use for make database connection under this chat application.
<?php
//Database_connection.php
class Database_connection
{
function connect()
{
$connect = new PDO("mysql:host=localhost; dbname=chat", "root", "");
return $connect;
}
}
?>
database/ChatUser.php
This ChatUser.php class file we have use for process user data at server side. Under this class file we have make set and get method for user data and after this we have make method for check user already register or not and lastly we have make insert user data in mysql table.
<?php
//ChatUser.php
class ChatUser
{
private $user_id;
private $user_name;
private $user_email;
private $user_password;
private $user_profile;
private $user_status;
private $user_created_on;
private $user_verification_code;
private $user_login_status;
public $connect;
public function __construct()
{
require_once('Database_connection.php');
$database_object = new Database_connection;
$this->connect = $database_object->connect();
}
function setUserId($user_id)
{
$this->user_id = $user_id;
}
function getUserId()
{
return $this->user_id;
}
function setUserName($user_name)
{
$this->user_name = $user_name;
}
function getUserName()
{
return $this->user_name;
}
function setUserEmail($user_email)
{
$this->user_email = $user_email;
}
function getUserEmail()
{
return $this->user_email;
}
function setUserPassword($user_password)
{
$this->user_password = $user_password;
}
function getUserPassword()
{
return $this->user_password;
}
function setUserProfile($user_profile)
{
$this->user_profile = $user_profile;
}
function getUserProfile()
{
return $this->user_profile;
}
function setUserStatus($user_status)
{
$this->user_status = $user_status;
}
function getUserStatus()
{
return $this->user_status;
}
function setUserCreatedOn($user_created_on)
{
$this->user_created_on = $user_created_on;
}
function getUserCreatedOn()
{
return $this->user_created_on;
}
function setUserVerificationCode($user_verification_code)
{
$this->user_verification_code = $user_verification_code;
}
function getUserVerificationCode()
{
return $this->user_verification_code;
}
function setUserLoginStatus($user_login_status)
{
$this->user_login_status = $user_login_status;
}
function getUserLoginStatus()
{
return $this->user_login_status;
}
function make_avatar($character)
{
$path = "images/". time() . ".png";
$image = imagecreate(200, 200);
$red = rand(0, 255);
$green = rand(0, 255);
$blue = rand(0, 255);
imagecolorallocate($image, $red, $green, $blue);
$textcolor = imagecolorallocate($image, 255,255,255);
$font = dirname(__FILE__) . '/font/arial.ttf';
imagettftext($image, 100, 0, 55, 150, $textcolor, $font, $character);
imagepng($image, $path);
imagedestroy($image);
return $path;
}
function get_user_data_by_email()
{
$query = "
SELECT * FROM chat_user_table
WHERE user_email = :user_email
";
$statement = $this->connect->prepare($query);
$statement->bindParam(':user_email', $this->user_email);
if($statement->execute())
{
$user_data = $statement->fetch(PDO::FETCH_ASSOC);
}
return $user_data;
}
function save_data()
{
$query = "
INSERT INTO chat_user_table (user_name, user_email, user_password, user_profile, user_status, user_created_on, user_verification_code)
VALUES (:user_name, :user_email, :user_password, :user_profile, :user_status, :user_created_on, :user_verification_code)
";
$statement = $this->connect->prepare($query);
$statement->bindParam(':user_name', $this->user_name);
$statement->bindParam(':user_email', $this->user_email);
$statement->bindParam(':user_password', $this->user_password);
$statement->bindParam(':user_profile', $this->user_profile);
$statement->bindParam(':user_status', $this->user_status);
$statement->bindParam(':user_created_on', $this->user_created_on);
$statement->bindParam(':user_verification_code', $this->user_verification_code);
if($statement->execute())
{
return true;
}
else
{
return false;
}
}
function is_valid_email_verification_code()
{
$query = "
SELECT * FROM chat_user_table
WHERE user_verification_code = :user_verification_code
";
$statement = $this->connect->prepare($query);
$statement->bindParam(':user_verification_code', $this->user_verification_code);
$statement->execute();
if($statement->rowCount() > 0)
{
return true;
}
else
{
return false;
}
}
function enable_user_account()
{
$query = "
UPDATE chat_user_table
SET user_status = :user_status
WHERE user_verification_code = :user_verification_code
";
$statement = $this->connect->prepare($query);
$statement->bindParam(':user_status', $this->user_status);
$statement->bindParam(':user_verification_code', $this->user_verification_code);
if($statement->execute())
{
return true;
}
else
{
return false;
}
}
function update_user_login_data()
{
$query = "
UPDATE chat_user_table
SET user_login_status = :user_login_status
WHERE user_id = :user_id
";
$statement = $this->connect->prepare($query);
$statement->bindParam(':user_login_status', $this->user_login_status);
$statement->bindParam(':user_id', $this->user_id);
if($statement->execute())
{
return true;
}
else
{
return false;
}
}
}
?>
register.php
This file we have use for get Chat application user registration. User can register from this web page.
<?php
use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\SMTP;
use PHPMailer\PHPMailer\Exception;
require 'vendor/autoload.php';
$error = '';
$success_message = '';
if(isset($_POST["register"]))
{
session_start();
if(isset($_SESSION['user_data']))
{
header('location:chatroom.php');
}
require_once('database/ChatUser.php');
$user_object = new ChatUser;
$user_object->setUserName($_POST['user_name']);
$user_object->setUserEmail($_POST['user_email']);
$user_object->setUserPassword($_POST['user_password']);
$user_object->setUserProfile($user_object->make_avatar(strtoupper($_POST['user_name'][0])));
$user_object->setUserStatus('Disabled');
$user_object->setUserCreatedOn(date('Y-m-d H:i:s'));
$user_object->setUserVerificationCode(md5(uniqid()));
$user_data = $user_object->get_user_data_by_email();
if(is_array($user_data) && count($user_data) > 0)
{
$error = 'This Email Already Register';
}
else
{
if($user_object->save_data())
{
$mail = new PHPMailer(true);
$mail->isSMTP();
$mail->Host = 'smtpout.secureserver.net';
$mail->SMTPAuth = true;
$mail->Username = 'xxxxx'; // SMTP username
$mail->Password = 'xxxxxx';
$mail->SMTPSecure = PHPMailer::ENCRYPTION_STARTTLS;
$mail->Port = 80;
$mail->setFrom('tutorial@webslesson.info', 'Webslesson');
$mail->addAddress($user_object->getUserEmail());
$mail->isHTML(true);
$mail->Subject = 'Registration Verification for Chat Application Demo';
$mail->Body = '
<p>Thank you for registering for Chat Application Demo.</p>
<p>This is a verification email, please click the link to verify your email address.</p>
<p><a href="http://localhost/tutorial/chat_application/verify.php?code='.$user_object->getUserVerificationCode().'">Click to Verify</a></p>
<p>Thank you...</p>
';
$mail->send();
$success_message = 'Verification Email sent to ' . $user_object->getUserEmail() . ', so before login first verify your email';
}
else
{
$error = 'Something went wrong try again';
}
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Register | PHP Chat Application using Websocket</title>
<!-- Bootstrap core CSS -->
<link href="vendor-front/bootstrap/bootstrap.min.css" rel="stylesheet">
<link href="vendor-front/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="vendor-front/parsley/parsley.css"/>
<!-- Bootstrap core JavaScript -->
<script src="vendor-front/jquery/jquery.min.js"></script>
<script src="vendor-front/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Core plugin JavaScript-->
<script src="vendor-front/jquery-easing/jquery.easing.min.js"></script>
<script type="text/javascript" src="vendor-front/parsley/dist/parsley.min.js"></script>
</head>
<body>
<div class="containter">
<br />
<br />
<h1 class="text-center">Chat Application in PHP & MySql using WebSocket - Email Verification</h1>
<div class="row justify-content-md-center">
<div class="col col-md-4 mt-5">
<?php
if($error != '')
{
echo '
<div class="alert alert-warning alert-dismissible fade show" role="alert">
'.$error.'
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
';
}
if($success_message != '')
{
echo '
<div class="alert alert-success">
'.$success_message.'
</div>
';
}
?>
<div class="card">
<div class="card-header">Register</div>
<div class="card-body">
<form method="post" id="register_form">
<div class="form-group">
<label>Enter Your Name</label>
<input type="text" name="user_name" id="user_name" class="form-control" data-parsley-pattern="/^[a-zA-Z\s]+$/" required />
</div>
<div class="form-group">
<label>Enter Your Email</label>
<input type="text" name="user_email" id="user_email" class="form-control" data-parsley-type="email" required />
</div>
<div class="form-group">
<label>Enter Your Password</label>
<input type="password" name="user_password" id="user_password" class="form-control" data-parsley-minlength="6" data-parsley-maxlength="12" data-parsley-pattern="^[a-zA-Z]+$" required />
</div>
<div class="form-group text-center">
<input type="submit" name="register" class="btn btn-success" value="Register" />
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$('#register_form').parsley();
});
</script>
index.php
Under this file we will make login page for this chat application.
<?php
session_start();
$error = '';
if(isset($_SESSION['user_data']))
{
header('location:chatroom.php');
}
if(isset($_POST['login']))
{
require_once('database/ChatUser.php');
$user_object = new ChatUser;
$user_object->setUserEmail($_POST['user_email']);
$user_data = $user_object->get_user_data_by_email();
if(is_array($user_data) && count($user_data) > 0)
{
if($user_data['user_status'] == 'Enable')
{
if($user_data['user_password'] == $_POST['user_password'])
{
$user_object->setUserId($user_data['user_id']);
$user_object->setUserLoginStatus('Login');
if($user_object->update_user_login_data())
{
$_SESSION['user_data'][$user_data['user_id']] = [
'id' => $user_data['user_id'],
'name' => $user_data['user_name'],
'profile' => $user_data['user_profile']
];
header('location:chatroom.php');
}
}
else
{
$error = 'Wrong Password';
}
}
else
{
$error = 'Please Verify Your Email Address';
}
}
else
{
$error = 'Wrong Email Address';
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Login | PHP Chat Application using Websocket</title>
<!-- Bootstrap core CSS -->
<link href="vendor-front/bootstrap/bootstrap.min.css" rel="stylesheet">
<link href="vendor-front/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="vendor-front/parsley/parsley.css"/>
<!-- Bootstrap core JavaScript -->
<script src="vendor-front/jquery/jquery.min.js"></script>
<script src="vendor-front/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Core plugin JavaScript-->
<script src="vendor-front/jquery-easing/jquery.easing.min.js"></script>
<script type="text/javascript" src="vendor-front/parsley/dist/parsley.min.js"></script>
</head>
<body>
<div class="containter">
<br />
<br />
<h1 class="text-center">Chat Application in PHP & MySql using WebSocket - Login</h1>
<div class="row justify-content-md-center mt-5">
<div class="col-md-4">
<?php
if(isset($_SESSION['success_message']))
{
echo '
<div class="alert alert-success">
'.$_SESSION["success_message"] .'
</div>
';
unset($_SESSION['success_message']);
}
if($error != '')
{
echo '
<div class="alert alert-danger">
'.$error.'
</div>
';
}
?>
<div class="card">
<div class="card-header">Login</div>
<div class="card-body">
<form method="post" id="login_form">
<div class="form-group">
<label>Enter Your Email Address</label>
<input type="text" name="user_email" id="user_email" class="form-control" data-parsley-type="email" required />
</div>
<div class="form-group">
<label>Enter Your Password</label>
<input type="password" name="user_password" id="user_password" class="form-control" required />
</div>
<div class="form-group text-center">
<input type="submit" name="login" id="login" class="btn btn-primary" value="Login" />
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$('#login_form').parsley();
});
</script>
verify.php
This file source code will verify user email address and it will enable user account for login into chat system.
<?php
//verify.php
$error = '';
session_start();
if(isset($_GET['code']))
{
require_once('database/ChatUser.php');
$user_object = new ChatUser;
$user_object->setUserVerificationCode($_GET['code']);
if($user_object->is_valid_email_verification_code())
{
$user_object->setUserStatus('Enable');
if($user_object->enable_user_account())
{
$_SESSION['success_message'] = 'Your Email Successfully verify, now you can login into this chat Application';
header('location:index.php');
}
else
{
$error = 'Something went wrong try again....';
}
}
else
{
$error = 'Something went wrong try again....';
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Email Verify | PHP Chat Application using Websocket</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Bootstrap core JavaScript -->
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
<div class="containter">
<br />
<br />
<h1 class="text-center">PHP Chat Application using Websocket</h1>
<div class="row justify-content-md-center">
<div class="col col-md-4 mt-5">
<div class="alert alert-danger">
<h2><?php echo $error; ?></h2>
</div>
</div>
</div>
</div>
</body>
</html>
chatroom.php
This chatroom.php will be only access by login user, so once user has been login into this chat application, then system will redirect page to this chatroom.php file and under this file we will make chat room, so each user can chat with each other.
<?php
?>
<!DOCTYPE html>
<html>
<head>
<title>Chat application in php using web scocket programming</title>
<!-- Bootstrap core CSS -->
<link href="vendor-front/bootstrap/bootstrap.min.css" rel="stylesheet">
<link href="vendor-front/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="vendor-front/parsley/parsley.css"/>
<!-- Bootstrap core JavaScript -->
<script src="vendor-front/jquery/jquery.min.js"></script>
<script src="vendor-front/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Core plugin JavaScript-->
<script src="vendor-front/jquery-easing/jquery.easing.min.js"></script>
<script type="text/javascript" src="vendor-front/parsley/dist/parsley.min.js"></script>
<style type="text/css">
html,
body {
height: 100%;
width: 100%;
margin: 0;
}
#wrapper
{
display: flex;
flex-flow: column;
height: 100%;
}
#remaining
{
flex-grow : 1;
}
#messages {
height: 200px;
background: whitesmoke;
overflow: auto;
}
#chat-room-frm {
margin-top: 10px;
}
#user_list
{
height:450px;
overflow-y: auto;
}
#messages_area
{
height: 650px;
overflow-y: auto;
background-color:#e6e6e6;
}
</style>
</head>
<body>
<div class="container">
<br />
<h3 class="text-center">Welcome to Chatroom</h3>
<br />
<div class="row">
<div class="col-lg-8">
</div>
<div class="col-lg-4">
</div>
</div>
</div>
</body>
<script type="text/javascript">
$(document).ready(function(){
});
</script>
</html>
This Incomplete post, On every published of this post video tutorial, we will add source code of that video part under this post.
