I wish to create a chat function for a private streaming server. The video streaming works fine, I wanted to add a simple chat with PHP. To that end I have 2 pages. The main page index.php, where the video player is and chat.php which is included in that page and should handle everything related to the chat functionality.
First I wish to check if the user has selected a username yet, and if not offer them an input to set their name. The issue is that upon a page refresh their username they have set is empty again.
I want to use asynchronous post and get requests with javascript xmlhttprequests so that the users do not have to reload the entire page (and video player).
The session path is writable and I checked with an intercepting proxy that the PHPSESSID cookie is sent as well and it is.
index.php
<?php
if (session_id() == '')
{
session_start();
$_SESSION['id'] = session_id(); // for testing
}
?>
<html>
<head>
<!-- video player and bootstrap here -->
</head>
<body>
<div class="col-sm-12 col-md-8">
<!-- video player here -->
</div>
<div class="col-sm-12 col-md-4">
<div id="chat">
<script>
function postToChat(body) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200)
{
document.getElementById("chat").innerHTML = this.responseText;
}
};
xmlhttp.open("POST", "chat.php", true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send(body);
}
function login() {
var name = document.getElementById("username").value;
postToChat("username=" + name);
return false;
}
function logout() {
postToChat("logout=true");
return false;
}
</script>
<?php include "chat.php"; ?>
</div>
</div>
</body>
</html>
chat.php
<?php
echo date('Ymd - H:i:s'); // for debugging
// display login form
function loginForm() {
echo '
<div id="loginform">
<p>Please enter your name to continue:</p>
<label for="username">Name:</label>
<input type="text" name="username" id="username" onsubmit="return login();" />
<input type="submit" name="enter" id="enter" value="Enter" onclick="return login();" />
</div>
';
}
// check post
if (isset ($_POST['username']) and $_POST['username']) {
$_SESSION['username'] = stripslashes(htmlspecialchars($_POST['username']));
}
// check logout
if (isset ($_POST['logout']) and $_POST['logout'] == 'true')
{
// session_destroy(): Trying to destroy uninitialized session in /var/www/web/stream/chat.php on line 24, referer: https://<mydomain>/stream/index.php
session_destroy();
}
// on refresh it shows _SESSION['id'], after POST with username=<name> it doesn't show id but username only
echo 'SESSION: ' . var_dump($_SESSION);
// if not selected username, display username select
// otherwise, display chat form
if (! isset($_SESSION['username']) OR $_SESSION['username'] == '') {
// this is always displayed after a page refresh.
loginForm();
} else {
// this displays immediately after clicking the enter button, but after a page refresh it is gone.
echo '<div class="col-sm-9">Hello <b>' . $_SESSION['username'] . '</b></div><div class="col-sm-3"><a href="#" onclick="return logout();">Logout</a></div>';
}
?>
