Web Page update without polling

I'm developing a web app where a user can request a service and a provider will be available to respond to him. So, When a user requests for some sort of service, our application will send a notification to the provider (asking him to respond to the user). What I'm trying to do is: when a user requests a service, the provider gets the notification instantly (something like facebook does).

One way to get this is using AJAX to send requests to the server every 5-10 secs; what we call is polling (so far i know). But, this method has some defects, i see:-

  • Since, the request will be sent every 5-10 secs, it will be a load to the server to manipulate requests and return empty data(very frequently).
  • Also its useless to send requests to the server even when there are not any updates.
  • Imagine someone request a service just after the server has responded to a request. So, providers must have to wait another 5-10 secs to get a notification that someone has requested something.

So, I wanted to know if there is some technique where we can update our web page instantly when a change occurs in our system without polling requests using AJAX.

Answers:

Answer

here is a simple Server Sent Event Script using php.

support

https://developer.mozilla.org/en-US/docs/Web/API/EventSource

js

var sse=new EventSource("sse.php");
sse.onmessage=function(e){
 document.body.innerHTML=e.data;
};

sse.php

header('Content-Type: text/event-stream'); // specific sse mimetype
header('Cache-Control: no-cache'); // no cache
while(true) {
 if(/*something changes*/){
  echo "id: ".time().PHP_EOL;
  echo "data: ".$data.PHP_EOL;
  echo PHP_EOL;
 }
  ob_flush(); // clear memory
  flush(); // clear memory
  sleep(10);// seconds 
}

this keeps the connection open with the client,

then it checks if something is changed ... db/file whatever

outputs the data if changed

and then clears the php cache

waits 10 seconds and does it again.


As you can see the client recieves the data only if something changes on the server

but i totally don't know how the server could handle 1000's of people.


node.js would be a better way. but it depends what languages you are using and/or if you can actually use node.js.

websockets is both ways.

server sent event is oneway.(you need this)

EDIT

more data inside the sse response:

js

var sse=new EventSource("sse.php");
sse.onmessage=function(e){
 console.log(JSON.parse(e.data))
};

sse.php

header('Content-Type: text/event-stream'); // specific sse mimetype
header('Cache-Control: no-cache'); // no cache
while(true) {
 if(/*something changes*/){
  echo "id: ".time().PHP_EOL;

  $dataArray=array('id'=>$id,'name'=>$name,'more'=>$more);
  echo "data: ".json_encode($dataArray).PHP_EOL;

  echo PHP_EOL;

 }
  ob_flush(); // clear memory
  flush(); // clear memory
  sleep(10);// seconds 
}

if you need some more info just ask

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.