i'm building in php a reservation website with a schedule. I'm looking to have real time updates for my users in a efficient way. I found Ajax but I dont want the client to ask the server about updates but the server to send to the client the updated schedule when somebody edited the schedule.
I found that maybe the HTML5 Server Sent Events is what I need. So I tried a simple test page that retreive update via SSE.
demo.html
<!DOCTYPE html>
<html>
<body>
<h1>SSE Output</h1>
<div id="result"></div>
<h1>Debug Console</h1>
<div id="status"></div>
<script>
//SSE si compatible
if(typeof(EventSource)!=="undefined")
{
var i = 1;
var source=new EventSource("demo_sse.php?ver=2");
//Lorsque le serveur envoie un message
source.onmessage=function(event)
{
document.getElementById("result").innerHTML+=event.data + " #" + i + "<br />";
i++;
}
//EventListener
source.addEventListener('message', function(e)
{
console.log(e.data);
//document.getElementById("status").innerHTML+= "Message Recevied<br />";
}, false);
source.addEventListener('open', function(e)
{
// Connection was opened.
document.getElementById("status").innerHTML+= "Connection #" + i + " opened<br />";
}, false);
source.addEventListener('error', function(e)
{
if (e.readyState == EventSource.CLOSED)
{
// Connection was closed.
document.getElementById("status").innerHTML+= "Connection closed<br />";
}
}, false);
//Validation de l'origine du serveur
if (event.origin != 'https://mydomain.com')
{
alert('Looks like the Origin of the EventSource (the schedule\'s live update service) wasn\'t coming from our secure server!');
//return;
}
}
else
{
document.getElementById("result").innerHTML="Sorry, your browser does not support server-sent events...";
}
</script>
</body>
</html>
demo_see.php
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$ver = 2;
$time = date("H:i:s");
if ($ver != $_GET["ver"])
{
echo "data: Page updated at: {$time}\n\n";
flush();
}
?>
The problem is that each like 3 seconds there's a connection opened whatever if the version is matching or not so I think it's the client that ask the server and not the server asking the client. What I would like is to keep a open connection between the client and the server so the server can send changes when there's any update made on the schedule.
Any tips would be appreciated!
Thanks
The browser is reconnecting every 3 seconds because your server code isn't keeping the connection open. It sends the time once then ends. Try something more like this:
while (true) {
echo "data: Page updated at: {$time}\n\n";
flush();
sleep(1);
}
Related
I'm trying to make a Chat App using HTML, CSS, JS, PHP and Mysql.
I've completed all the functionalities that includes sending a message, receiving a message, displaying users... But the issue i'm facing is that i need to refresh the page every time i received a new message.
I'm looking for a way to auto update data with new data from mysql database.
Code:
<?php
if ($_GET['id']){
$id = $_GET['id'];
$id = preg_replace("/[^0-9]/", "", $id);
$fetching_messages = "SELECT * FROM users_messages WHERE from_user='$id' OR to_user='$id' ORDER BY id";
$check_fetching_messages = $db->prepare($fetching_messages);
$check_fetching_messages->execute();
$messages_all = $check_fetching_messages->fetchAll();
} else {
}
?>
<div id="autodata">
<?php foreach($to_users as $to_user) : ?>
<?php
$to_user_id = $to_user['to_user'];
$to_user_name = "SELECT * FROM users_accounts WHERE id='$to_user_id'";
$check_to_user_name = $db->query($to_user_name);
while ($row_to_user_name = $check_to_user_name->fetch()) {
$id_user = $row_to_user_name['id'];
$username = $row_to_user_name['username'];
$pdp = $row_to_user_name['profile_image'];
}
if ($id_user == $user_id){
} else {
echo '
<form style="height: fit-content;" name="goto'.$to_user_id.'" action="inbox.php">
<div onclick="window.location.replace('."'".'?id='.$to_user_id."'".')" class="inbox_chat_field_user">';
if (empty($pdp)){
echo "<img class='inbox_chat_field_user_img' src='uploads\profile\default.jpg'/>";
} else {
echo "<img class='inbox_chat_field_user_img' src='".$pdp."'/>";
}
echo '
<span class="inbox_chat_field_user_p">'.$username.'</span>
</div>
</form>
<hr class="inbox_separing_hr">';
}
?>
<?php endforeach;?>
</div>
Simply you can't do that, PHP is a server-side language, you can't tell the clients to refresh from PHP.
To accomplish that chat you should consider JavaScript in the browser.
The easiest way is by sending an AJAX request to your server and check if there are new messages every 5 or 10 seconds, and then do what you want with the messages in the response.
If you use jquery in your application you can send ajax request in this way:
$.get( "messages.php", function( data ) {
console.log( "Data Loaded: " + data );
});
and in messages.php script, you can fetch new messages from the database and return them with HTML or JSON format
You may also use FCM service offered by firebase to push your messages to the client directly, Check this package for PHP FCM.
There are other solutions like websockets etc...
It would have been easier for me to directly update your code had you separated business logic from presentation, so I am not going to attempt to do that. Instead I will describe a technique you can use and leave it to you to figure out the best way to use it. You might consider using server-sent events. See the JavaScript class EventSource.
The following "business logic" PHP program, sse_cgi.php, periodically has new output every 2 seconds (for a total of 5 times). In this case the output is just the current date and time as a string. But it could be, for example, a JSON record. Note the special header that it outputs:
<?php
header("Content-Type: text/event-stream");
$firstTime = True;
for ($i = 0; $i < 5; $i++) {
if (connection_aborted()) {
break;
}
$curDate = date(DATE_ISO8601);
echo 'data: This is a message at time ' . $curDate, "\n\n";
// flush the output buffer and send echoed messages to the browser
while (ob_get_level() > 0) {
ob_end_flush();
}
flush();
if ($i < 4) {
sleep(2); # Sleep for 2 seconds
}
}
And this is the presentation HTML that would be outputted. JavaScript code in this case is just replacing the old date with the updated value. It could just as well append new <li> elements to an existing <ul> tag or <tr> elements to an existing <table>.
<html>
<head>
<meta charset="UTF-8">
<title>Server-sent events demo</title>
</head>
<body>
<div id='date'></div>
<script>
var evtSource = new EventSource('sse_cgi.php');
var date = document.getElementById('date');
evtSource.onmessage = function(e) {
// replace old content
date.innerHTML = e.data;
};
evtSource.onerror = function() {
// occurs when script terminates:
evtSource.close();
console.log('Done!');
};
</script>
</body>
</html>
Note that this presentation references the "business logic" scripts that returns the successive dates.
Important Note
It is important to realize that this technique keeps the connection to the server open for the duration until all the data has been ultimately sent and the business logic script ultimately terminates (or the presentation running in the browser issues a call to evtSource.close() to close the connection). So if you have a lot of simultaneous users, this could be an issue.
If your application does not have a limited number of messages to return then the previously described problem can be overcome by having the business logic script return immediately after having sent one message. This will break the connection with the browser, which if it is still there, will automatically attempt to re-connect with the business logic script (note that this reconnection can take a while):
Updated Business Logic
<?php
header("Content-Type: text/event-stream");
# Simulate waiting for next message:
sleep(2);
$curDate = date(DATE_ISO8601);
echo 'data: This is a message at time ' . $curDate, "\n\n";
// flush the output buffer and send echoed messages to the browser
while (ob_get_level() > 0) {
ob_end_flush();
}
flush();
Updated Presentation
<html>
<head>
<meta charset="UTF-8">
<title>Server-sent events demo</title>
</head>
<body>
<div id='date'></div>
<script>
var evtSource = new EventSource('sse_cgi.php');
var date = document.getElementById('date');
evtSource.onmessage = function(e) {
// replace old content
date.innerHTML = e.data;
};
</script>
</body>
</html>
I'm working on a one-way messaging system using server-sent events. I have a file (server.html) which sends the contents of a textarea to a PHP file (handler.php).
function sendSubtitle(val) {
var xhr = new XMLHttpRequest();
var url = "handler.php";
var postdata = "s=" + val;
xhr.open('POST', url, true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(postdata);
//alert(val);
}
This works (alert(val) displays the text in the textarea).
My handler.php code looks like this:
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$stringData = $_POST['s'];
echo "data: Data is {$stringData}\n\n";
flush();
And the relevant part of my SSE receiver file (client.html) is as follows:
if(typeof(EventSource) !== "undefined") {
var source = new EventSource("handler.php");
source.onmessage = function(event) {
var textarea = document.getElementById('subtitles');
textarea.value += event.data + "<br>";
textarea.scrollTop = textarea.scrollHeight;
};
} else {
document.getElementById("subtitles").value = "Server-sent events not supported.";
}
The problem is that client.html only displays "data: Data is", so the text from server.html is getting lost somewhere along the way. I imagine it's the PHP code that's falling over, but I can't work out what's wrong. If anyone can help, I'd appreciate it.
EDIT
I chose to use SSE as opposed to websockets as I only need one-way communication: server.html should push the contents of its textarea to client.html whenever it changes. All the examples of SSE that I've looked at (and I've looked at a lot!) send "automatic" time-based data. I haven't seen any that use real-time user input. So perhaps I should clarify my original question and ask, "How can I use SSE to update a DIV (or whatever) in web page B whenever the user types in a textarea in web page A?"
UPDATE
I've narrowed the issue down to the while loop in the PHP file and have therefore asked a new question: Server-side PHP event page not loading when using while loop
Assuming you want to send a value from server.html and a value at client.html will be automatically updated...
You will need to store the new value somewhere because multiple instances of a script do not share variables just like that. This new value can be stored in a file, database or as a session variable, etc.
Steps:
Send new value to phpScript1 with clientScript1.
Store new value with phpScript1.
Connect clientScript2 to phpScript2.
Send stored value to clientScript2 if it is changed.
Getting the new value 'on the fly' means phpScript2 must loop execution and send a message to clientScript2 whenever the value has been changed by clientScript1.
Of course there are more and different approaches to achieve the same results.
Below there's some code from a scratchpad I've used in previous project.
Most parts come from a class (which is in development) so I had to adopt quite a lot of code. Also I've tried to fit it into your existing code.
Hopefully I didn't introduce any errors.
Do note I did not take any validation of your value into account! Also the code isn't debugged or optimized, so it's not ready for production.
Client side (send new value, e.g. your code):
function sendSubtitle(val) {
var xhr = new XMLHttpRequest();
var url = "handler.php";
var postdata = "s=" + val;
xhr.open('POST', url, true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(postdata);
//alert(val);
}
Server side (store new value):
<?php
session_start();
$_SESSION['s'] = $_POST['s'];
Client side (get new value):
//Check for SSE support at client side.
if (!!window.EventSource) {
var es = new EventSource("SSE_server.php");
} else {
console.log("SSE is not supported by your client");
//You could fallback on XHR requests.
}
//Define eventhandler for opening connection.
es.addEventListener('open', function(e) {
console.log("Connection opened!");
}, false);
//Define evenhandler for failing SSE request.
es.addEventListener('error', function(event) {
/*
* readyState defines the connection status:
* 0 = CONNECTING: Connecting
* 1 = OPEN: Open
* 2 = CLOSED: Closed
*/
if (es.readyState == EventSource.CLOSED) {
// Connection was closed.
} else {
es.close(); //Close to prevent a reconnection.
console.log("EventSource failed.");
}
});
//Define evenhandler for any response recieved.
es.addEventListener('message', function(event) {
console.log('Response recieved: ' + event.data);
}, false);
// Or define a listener for named event: event1
es.addEventListener('event1', function(event) {
var response = JSON.parse(event.data);
var textarea = document.getElementById("subtitles");
textarea.value += response + "<br>";
textarea.scrollTop = textarea.scrollHeight;
});
Server side (send new value):
<?php
$id = 0;
$event = 'event1';
$oldValue = null;
session_start();
//Validate the clients request headers.
if (headers_sent($file, $line)) {
header("HTTP/1.1 400 Bad Request");
exit('Headers already sent in %s at line %d, cannot send data to client correctly.');
}
if (isset($_SERVER['HTTP_ACCEPT']) && $_SERVER['HTTP_ACCEPT'] != 'text/event-stream') {
header("HTTP/1.1 400 Bad Request");
exit('The client does not accept the correct response format.');
}
//Disable time limit
#set_time_limit(0);
//Initialize the output buffer
if(function_exists('apache_setenv')){
#apache_setenv('no-gzip', 1);
}
#ini_set('zlib.output_compression', 0);
#ini_set('implicit_flush', 1);
while (ob_get_level() != 0) {
ob_end_flush();
}
ob_implicit_flush(1);
ob_start();
//Send the proper headers
header('Content-Type: text/event-stream; charset=UTF-8');
header('Cache-Control: no-cache');
header('X-Accel-Buffering: no'); // Disables FastCGI Buffering on Nginx
//Record start time
$start = time();
//Keep the script running
while(true){
if((time() - $start) % 300 == 0){
//Send a random message every 300ms to keep the connection alive.
echo ': ' . sha1( mt_rand() ) . "\n\n";
}
//If a new value hasn't been sent yet, set it to default.
session_start();
if (!array_key_exists('s', $_SESSION)) {
$_SESSION['s'] = null;
}
//Check if value has been changed.
if ($oldValue !== $_SESSION['s']) {
//Value is changed
$oldValue = $_SESSION['s'];
echo 'id: ' . $id++ . PHP_EOL; //Id of message
echo 'event: ' . $event . PHP_EOL; //Event Name to trigger the client side eventhandler
echo 'retry: 5000' . PHP_EOL; //Define custom reconnection time. (Default to 3000ms when not specified)
echo 'data: ' . json_encode($_SESSION['s']) . PHP_EOL; //Data to send to client side eventhandler
//Note: When sending html, you might need to encode with flags: JSON_HEX_QUOT | JSON_HEX_TAG
echo PHP_EOL;
//Send Data in the output buffer buffer to client.
#ob_flush();
#flush();
}
//Close session to release the lock
session_write_close();
if ( connection_aborted() ) {
//Connection is aborted at client side.
break;
}
if((time() - $start) > 600) {
//break if the time exceeds the limit of 600ms.
//Client will retry to open the connection and start this script again.
//The limit should be larger than the time needed by the script for a single loop.
break;
}
//Sleep for reducing processor load.
usleep(500000);
}
You called handler.php first time in the server.html and again in client.html. Both are different processes. The variable state won't be retained in the web server. You need to store it somewhere if you want that value in another PHP process. May be you can use sessions or database.
While using sessions you can store the values in two files like:
<?php
//server.php
session_start();
$_SESSION['s'] = $_POST['s'];
And in client.php
<?php
//client.php
session_start();
echo "data: Data is ".$_SESSION['s']."\n\n";
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>SSE</title>
<script type="text/javascript">
if (!!window.EventSource) {
var source = new EventSource("sse.php");
} else {
alert("Your browser does not support Server-sent events! Please upgrade it!");
}
source.addEventListener("message", function(e) {
console.log(e.data);
if(e.data){
x = document.getElementById("timer");
x.innerHTML=e.data;
console.log(e.data);
}else{
console.log(e.data);
e.close();
}
}, false);
source.addEventListener("open", function(e) {
console.log("Connection was opened.");
}, false);
source.addEventListener("error", function(e) {
console.log("Error - connection was lost."+e);
}, false);
</script>
</head>
<body>
<div id="timer"></div>
</body>
</html>
My Server Side Code
<?php
header("Content-Type: text/event-stream");
header("Cache-Control: no-cache");
header("Connection: keep-alive");
$lastId = 0;
while (true) {
$data =10;
if ($data) {
sendMessage($lastId, $data);
$lastId++;
$data--;
}else{
exit;
}
}
function sendMessage($id, $data) {
//echo "id: $id\n";
echo "$data\n\n";
ob_flush();
flush();
}
?>
What is wrong with my code? Please let me know.
SERVER-SIDE: normally this kind of demo has a sleep between sending each message. What it will do, as it stands, is send 10 packets out in the space of 10ms (or something).
So, the client will get them all at almost the same time, and you will see just the "1" in your timer <div>.
CLIENT-SIDE: It looks okay. It'd be useful to have seen what is being logged to console though. (Probably 10, 10, 9, 9, .., 1, 1, 10, 10, 9, 9, ... repeating forever - see next bit.)
BOTH: I think what will happen when you exit is that the socket will close, the browser will detect that and reconnect. Giving you the same sequence again!
Putting that altogether, change your server-side code main loop to something like:
while (true) {
$data =10;
if ($data) {
sendMessage($lastId, $data);
$lastId++;
$data--;
}else{
sendMessage($lastId, "0");
sleep(1); //Give client time to deal with it.
break;
}
sleep(1); //1 sec between messages
}
I.e. send an explicit "0" to tell the client to disconnect.
Then on the client-side, look out for that explicit close code. (Actually I'd go with "END" or something, as "0" is too easy to evaluated as boolean false!)
source.addEventListener("message", function(e) {
console.log(e.data);
if(e.data==="0")e.close();
else if(e.data){
x = document.getElementById("timer");
x.innerHTML=e.data;
}
//else do nothing
}, false);
I'm building a person to person chat, and want person A's page to refresh, loading new messages from Person B when Person B sends them. How would I send a message/data to Person A when Person B sends a message via PHP? I know I can check on Person A's page via Ajax, but constantly running a MySQL query would drastically bring down the server's speed. Any ideas?
EDIT: Using Server Sent Events, here's my script code:
if(typeof(EventSource) !== "undefined") {
var source = new EventSource("update.php?user=<? echo $recip ?>");
source.onmessage = function(event) {
document.write(event.data);
if (event.data=="yes"){
window.location.href="/chat?with=<? echo $recip ?>";
}
};
} else {
document.getElementById('info-text').innerHTML="Hmm... looks like your browser doesn't support auto updating. Please refresh the page to check for new messages." //'
}
And here's my PHP code:
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$user=$_GET['user'];
$sql=mysql_query("SELECT * FROM chatmsg WHERE sender='$myusername' AND receiver='$recip' OR sender='$recip' AND receiver='$myusername'");
$newrows=mysql_num_rows($sql);
if ($newrows!=$_SESSION['chat'.$user]) {
echo "data: yes";
flush();
}
else {
echo "data: no";
flush();
The problem is, nothing is happening when there's a new row in MySQL.
I found the solution, everyone. I still used the Server Sent Events, but made some changes and found the error. Here's the final working code:
PHP:
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
header("Access-Control-Allow-Origin: *");
$user=$_GET['user'];
$sql=mysql_query("SELECT * FROM chatmsg WHERE sender='$myusername' AND receiver='$user' OR sender='$user' AND receiver='$myusername'");
$newrows=mysql_num_rows($sql);
if ($newrows!==$_SESSION['chat'.$user]) {
$msg="yes";
}
else {
$msg="no";
}
echo "data: {$msg}\n\n";
flush();
sleep(10);
(sleep is to save server resources).
JS:
var source = new EventSource('update.php?user=<? echo $recip ?>');
source.onmessage = function(e) {
if (e.data=="yes") {
window.location.href="viewchat.php?viewer=<? echo $viewer ?>&recip=<? echo $recip ?>";
}
}
I want to design central control timer with php and any other client side script.
the basically things that need to keep in mind is that : timer will be visible on my website,so may be hundred of user are currently logged in to my website. Now whenever admin reset the timer on the same point it should reflect to all the client machine. so basic is need to keep synchronous timing all the machine.
What I did
I have used client side countdown timer (http://keith-wood.name/countdown.html)
and in background I am calling ajax on every second to check reset is pressed or not.
but the problem is its not keeping synchronous in all the client machine.
some time time gape between two machine is marked.so how to implement it?
code:
$('#shortly').countdown({until: shortly,
onExpiry: liftOff, onTick: watchCountdown});
$('#shortlyStart').click(function() {
shortly = new Date();
shortly.setSeconds(shortly.getSeconds() + 5.5);
$('#shortly').countdown('option', {until: shortly});
});
function liftOff() {
alert('We have lift off!');
}
function watchCountdown(periods) {
$('#monitor').text('Just ' + periods[5] + ' minutes and ' +
periods[6] + ' seconds to go');
}
timerset.php. This file creates the file for the server side to push the finish time.
<?php
$year=htmlspecialchars($_GET['year']);
$month=htmlspecialchars($_GET['month']);
$day=htmlspecialchars($_GET['day']);
$hour=htmlspecialchars($_GET['hour']+2);//NBNBNB the +2 changes according to YOUR timezone.
$minute=htmlspecialchars($_GET['minute']);
$second=htmlspecialchars($_GET['second']);
$timestring=$year.":".$month.":".$day.":".$hour.":".$minute.":".$second;
echo $timestring."<br/>";
$filename = 'timerserver.php';
$file = fopen($filename, 'w');
rewind($file);
fwrite($file,"<?php\n");
fwrite($file, "header('Content-Type: text/event-stream');\n");
fwrite($file, "header('Cache-Control: no-cache');\n");
fwrite($file, "header('connection:keep-alive');\n");
fwrite($file, "\$starttime=\"$timestring\";\n");
fwrite($file, "echo \"data:{\$starttime}\\n\\n\";\n");
fwrite($file, "ob_flush();");
fwrite($file,"flush();");
fwrite($file,"sleep(3);");
fwrite($file,"?>\n");
fflush($file);
ftruncate($file, ftell($file));
fclose($file);
flush();
?>
timer.php. This file receives the finish time and updates the displayed time.
<html>
<header>
</header>
<body>
<script>
var source = new EventSource("timerserver.php");
var mystarttime="00:00";
source.onmessage = function(event)
{
mystarttime=event.data;
};
setInterval(function () {test(mystarttime)}, 1000);
function test(intime)
{
var timestring=intime;
var split = timestring.split(':');
var currentdate=new Date();
var finishtime=new Date(split[0],split[1]-1,split[2],split[3],split[4],split[5],0);
var timediff=new Date(finishtime-currentdate);
var year=timediff.getUTCFullYear();
var minutes=timediff.getUTCMinutes();
var seconds=timediff.getUTCSeconds();
var currentMinutes = ("0" + minutes).slice(-2);
var currentSeconds = ("0" + seconds).slice(-2);
if (year<1970)
{
document.getElementById("result").innerHTML="Time is up"
}
else
document.getElementById("result").innerHTML = currentMinutes+":"+currentSeconds;
}
</script>
<div id="result">Fetching time...</div>
</body>
</html>
timerform.php . One method of updating the time.
<?php
echo "<b>NB : Time is in UTC Timezone</b><br/><hr/>";
date_default_timezone_set("UTC");
$currentdatetime=date("Y-m-d H:i:s");
$year=date("Y");
$month=date("m");
$day=date("j");
$hour=date("H");
$minute=date("i");
$second=0;
echo $currentdatetime."<hr/>";
?>
<form action="timerreset.php" method="GET">
Year <input name="year" value="<?php echo $year;?>"/><br/>
Month <input name="month" value="<?php echo $month;?>"/><br/>
Day <input name="day" value="<?php echo $day;?>"/><br/><br/>
Hour <input name="hour" value="<?php echo $hour;?>"/><br/>
Minute <input name="minute" value="<?php echo $minute+1;?>"/><br/>
Second <input name="second" value="<?php echo $second;?>"/><br/>
<input type="submit"/>
</form>
<?php
flush();
?>
NB, Use UTC time to cater for different clients in different timezones.
I have the above code working on both my localhost (Windows) and at SouthCoastHosting (Linux), so let me know if you have any problems.
To use it open a tab to southcoasthosting.com/timer/timerform.php and another tab to southcoasthosting.com/timer/timer.php. Use the timer form to change the finish time and you will see the time chage in timer.php. Due to the nature of EventSource there will always be at best a 3 second delay before updating the timer. Depending on your clients connection speed to the server there may be further delays. I chose to send a finish time so that the client will not lag due to these delays.
I hope that all makes sense. Let me know otherwise.
Try this instead, using HTML5's server-side-events.
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$reset = "true";
echo "data: reset: {$reset}\n\n";
flush();
?>
on the server, and
<script>
var source = new EventSource("gsim_server.php");
source.onmessage = function(event)
{
document.getElementById("result").innerHTML = event.data;
};
</script>
<div id="result">test</div>
on the client (asuming the server file is in the same folder and is called 'gsim_server.php'. This is just a basic example, but you could use the value passed to decide wether to reset or not. Hope that helps.