-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.php
159 lines (128 loc) · 7.44 KB
/
index.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
<?php
// Login Page
session_start();
$error = '';
if (isset($_SESSION['user_data'])) // If the user is already authenticated/logged-in, redirect them to group_chat.php
{
header('location:group_chat.php');
}
if (isset($_POST['login'])) // If the login HTML Form has been submitted
{
require_once('database/ChatUserModel.php');
$user_object = new ChatUserModel;
$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') // Check if the user trying to login is enabled in the database
{
if ($user_data['user_password'] == $_POST['user_password']) // Verify password (of the user who is logging in)
{
$user_object->setUserId($user_data['user_id']);
$user_object->setUserLoginStatus('Login'); // logged-in (authenticated) or logged-out (unauthenticated)
// Note: With every client (user) connected to a WebSocket Connection (Ratchet library), WebSocket Connection generates and assigns every client (user) a unique connection ID (N.B. You can check that unique WebSocket identifier using $conn->resourceId ). And the idea of the 'One-to-One' or 'Private' Chat is based on it plus the `user_token` that we generate by ourselves with every user Login process in index.php. We can store those unique Connection IDs plust the `user_token` for every client in the database, and later we can depend on them to implement One-to-One or Private Chat. To implement the 'One-to-One' or 'Private' Chat, We use TWO table columns of the `chat_application_users`, firstly, the `user_token` column, where with every user login process we generate a unique random string using md5(uniqid()) and then we pass this unique string as a Query String Parameter in the URL used in the client side JavaScript WebSocket constructor to start the WebSocket connection (i.e. var conn = new WebSocket('ws://localhost:8080?token=<?php echo $token; >'); ). N.B. You can check this unique string (token) by connecting to a WebSocket Connection, then use 'Inspect' in your browser console, click on the 'Network' tab, then under 'Name' you'll find something like 'ws://localhost:8080/?token=014c3972efce8dc679b25d45a2ce2bd6', you can click on it and check the 'Headers', 'Payload', 'Initiators', ... tabs), secondly, the `user_connection_id` column which is randomly generated by WebSocket for every client connected to the WebSocket Connection (AKA WebSocket Session ID). N.B. You can access this unique identifier using $conn->resourceId
$user_token = md5(uniqid()); // A random unique string we generate with every login to be used in conjunction with `user_connection_id` to implement One-to-One Private Chat
$user_object->setUserToken($user_token);
if ($user_object->update_user_login_data())
{
// Plant the authenticated/logged-in user's Session (to be used for checking for authentication throughout/across the whole application)
$_SESSION['user_data'][$user_data['user_id']] = [
'id' => $user_data['user_id'],
'name' => $user_data['user_name'],
'profile' => $user_data['user_profile'],
'token' => $user_token
];
header('location:group_chat.php');
}
}
else
{
$error = 'Wrong Password!';
}
}
else
{
$error = 'Please Verify Your Email Address (User is disabled)';
}
}
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>Real-time One-to-One & Group 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"/>
<link rel="icon" type="image/x-icon" href="vendor-front/bubble-chat.png"> <!-- HTML Favicon -->
<!-- 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="container">
<br />
<br />
<h1 class="text-center">Real-time One-to-One & Group Chat Application using Ratchet WebSocket with PHP MySQL - Online/Offline Status</h1>
<div class="row justify-content-md-center mt-5">
<div class="col-md-4">
<?php
if (isset($_SESSION['success_message'])) // If the user successfuly verified their email (Check verify.php)
{
echo '
<div class="alert alert-success">
' . $_SESSION["success_message"] . '
</div>
';
// Remove $_SESSION['success_message'] from the Session after it has been displayed
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>