real time online visitors counter

[web_master]

hi,

 

I need a real time online visitors counter, mean when came a visitor on site to change the nr of visitors without a refreshing the page.

 

thnsx.

 

T

[bluebutterflyofyourmind]

if you want someone to create this for you head over to the freelancing forum.  if you actually want some help, try it first yourself, post some code if you're having problems.

 

if you have tried already and can't get it working, post some code and i'm sure people will be happy to help you.

 

cheers.

 

 

[web_master]

if you want someone to create this for you head over to the freelancing forum.  if you actually want some help, try it first yourself, post some code if you're having problems.

 

if you have tried already and can't get it working, post some code and i'm sure people will be happy to help you.

 

cheers.

 

 

I know only the PHP coding, the Ajax dont know - only know that the ajax know to print in realtime the - for example online visitors. If the coding for my question is a mixed code with PHP than maybe I can give some ideas or help to build this code, but the problem is that I dont know where can I begin...

[Quadar]

AJAX is really just is using Javascript to access Database content and update the DOM on the fly.  That is the basic concept

 

The thing that was hard for me to get my mind around was the event driven nature of Ajax.

 

1.) To use Ajax you need to setup a request object. 

<script>

var XMLHttp = null;

if(window.XMLHttpRequest){

  XMLHttp = new XMLHttpRequest();

}

else if(window.ActiveXObject){

  XMLHttp = new ActiveXObject("Microsoft.XMLHTTP");

}

</script>

 

2.) Next one needs to setup an requestHandler to listen for results from the request.

<script>

function handleRequest( htmlElementID, ActionToTake, XMLHttp ){

 

}

</script>

 

 

I will work on this later, my free time at work is up sorry

 

 

 

[web_master]

AJAX is really just is using Javascript to access Database content and update the DOM on the fly.  That is the basic concept

 

So for your problem

 

#1 You will need a Javascript timer loop that keeps requesting the new Visistor value from the database.

So work on this first.

#2 You will a need a PHP page called in my examples something like mypageAjax.php that the Javascript timer loop calls

#3 You will need a Javascript handler in your mypage.php that waits for Ajax events.

 

So basically I usually use 3 pages for this.

myPage.php

myPageAjax.php

myPage.js

 

myPage.js

 

function createRequestObject() {

  var RequestObject = null;

  if ( window.XMLHttpRequest() ) {

     XMLHttp = new XMLHttpRequest();

  }

  else {

 

}

 

 

 

 

 

 

 

OK, great. I create this js.

 

so, at begin, I dont planing to be the registered users on site. Is posible to view online users without register?

[Quadar]

No it is not complete yet, I will explain fully later.

 

I was confused on it at first too.  I am now going into a meeting.  I will finish this comment at around 8:00 PM Central Standard Time (DST)

[web_master]

No it is not complete yet, I will explain fully later.

 

I was confused on it at first too.  I am now going into a meeting.  I will finish this comment at around 8:00 PM Central Standard Time (DST)

 

Im in Serbia, here is now 21:22, I go now to sleep, because tomorrow I work from 9AM to 00PM, but I wery interrested about this... so I wait about a posts.

 

 

[Quadar]

Ok ignore the previous post contents.

 

Here is an example that may help you

There are 3 files

I have tested this example and it works for me, all it does is update the time, but one could easily query the database for a pagecounter, or something simular.  The filenames / path only matter so much as where they are included in the code.  Also note there may be better techniques for doing this, but this will work to get you started.  Any problems, let me know.  Good Luck.

 

TimTAE/AjaxBasic/myFile.php

TimTAE/AjaxBasic/myFileAjax.php

TimTAE/AjaxBasic/myFile.js

 

 

----------------------TimTAE/AjaxBAsic/myFile.php----------------------------

<html>

<head>

<title>My First Ajax Page</title>

<script type="text/javascript" src="/TimTAE/AjaxBasic/myFile.js"></script>

</head>

<body onload='updateTime();' >

<h1>My First Ajax Page</h1>

The server time is -><div id='currentTime' >Time</div>

</body>

</html>

 

 

----------------------TimTAE/AjaxBAsic/myFileAjax.php----------------------------

<?

switch( $_POST['Action'] ) {

case 'ReturnTime':

//Returns a string representing the time back to the Request Object.

echo strftime( '%T' );

break;

default:

echo "No Action Defined";

}

?>

 

----------------------TimTAE/AjaxBAsic/myFileAjax.js----------------------------

 

//Creates the Network Object that allows Javascript to Request Data from the Web Server

function createRequestObject(){

var XMLHttp = null;

//For most Ajax capable browers

if(window.XMLHttpRequest){

XMLHttp = new XMLHttpRequest();

}

//For Microsoft Internet Explorer

else if (window.ActiveXObject){

XMLHttp = new ActiveXObject( "Microsoft.XMLHTTP");

}

return XMLHttp;

}

 

/*   

ajaxURL -> URL of PHP page being posted to for data  eg  /myPageAjax.php

ArgList -> the post arguments in format  lastname=Doe&firstname=Jane

XMLHttp -> the XML Request Object

HTMLElementID -> the ID of the HTML element to be updated  eg currentTime

*/

function sendRequestToServer(  ajaxURL, ArgList, XMLHttp, HTMLElementID ) {

XMLHttp.open( 'POST', ajaxURL, true );

XMLHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8" );

XMLHttp.setRequestHeader("Content-length", ArgList.length );

XMLHttp.onreadystatechange = function(){updateElementViaInnerHTML( XMLHttp, HTMLElementID)}

XMLHttp.send( ArgList );

}

 

//This is the function that is called when the browser detects that the server has reponded.

//NOTICE this function where it comes from, look at the previous function  XMLHttp.onreadystatechange =

function updateElementViaInnerHTML( XMLHttp, HTMLElementID ) {

//When the whole page ( echo statement ) is detected as sent back by the server, update the <div> with id=HTMLElementID ( currentTime )

if ( XMLHttp.readyState == 4 ) {

document.getElementById(HTMLElementID).innerHTML = XMLHttp.responseText;

}

}

 

function updateTime(){

var Time=1;  //Time in seconds to request updates from server

Time *= 1000; //Convert from milliseconds to seconds

setInterval( "sendRequestToServer( '/TimTAE/AjaxBasic/myFileAjax.php', 'Action=ReturnTime', createRequestObject(),'currentTime')" ,Time );

}

 

 

[CroNiX]

Just out of curiosity, do you really need to do this 'realtime'?  If you have 10 people on your site you will have a lot of requests to your server putting additional load on it.  If you have 100....1000....  What if they leave their computer and the browser is just sitting on your page?  Thats a lot of unneeded/unwanted requests to the server.  I would just update it on every page refresh personally.

[Quadar]

This is true, it will put alot of load on your server's connection.

[Ken2k7]

Well it can be a load of work on the server's behalf, but if you structure it correctly, it shouldn't be too much work. If you have database column that stores the number of visitors, you can just use AJAX to retrieve that number. I am aware that still requires a SQL statement, but that is a fairly easy one for the server to manage.

[web_master]

hi,

 

so, I read carefuly what You tell me, and I think the better way to use a simple PHP session counter for online visitors count.

 

Why? - If the page reload of each visitorsits give a request from server,  and that "overload" the server, then I think its a better way to made a "simple" sessions for each visitors, to write his sessions into dBase, and retrive it with  Ajax or with "<iframe>" or "<object>" periodically (once in minute).

 

The reason, why I want to be a realTime shown online visitors is simple: to owner of the site sit behind the comp. and can count his "money" on simple way,  to watch only the counter without pushing any button... and the other is that the visitors can see how many other visitors are on this site...

 

If Im wrong, please tell me.

 

 

[Quadar]

Hmm

 

I think if you could give more detailed requirements I could make a more informed descion.

 

If just one person is going to be watching the page counter, ( like the site owner etc ) or even a couple, calling Ajax every 5 seconds should not be a problem.  If you read the above example you can see where it has the delay timer.  In my example it is set to 1 second.  Ajax does take less power than refreshing the page constantly to get an update on the total page count. 

 

In my example I just got updates about the server time, I am assuming you know enough php to change the echo result from the time on the server, to the database request to get your current page count. 

 

As for the page count, why would you use session variables?  I would think one would just constantly update the DB with the page count

eg mysql_query( 'update tblPageCount set PageCount = PageCount + 1); or something of this nature.

 

Anyway good luck