Welcome to WebmasterWorld Guest from 54.163.168.15

Forum Moderators: open

Continually receiving data from server

data to come in without user event

   
7:37 pm on Mar 15, 2009 (gmt 0)

5+ Year Member



Not being "native JS speaker" I think I ran out of options and direction to solve my problem....
I am trying to
1. get data from server
2. display it in a page
3. do 1 and 2 without reloading /refreshing whole page
4. have 1-3 run continuously ,i.e over and over receiving new data while page is viewed without need for user to perform an event (like clicking a button or pressing a key). Something like "streaming" data if you will. I would like to receive data continuously or at least to be fetched once a second

I got 1-3 working using AJAX, but I have to initiate event, either button / mouse click (using onMouseDown for example), or I have to type a letter in a form field (onkeyup). Data is only sent for that event and if I want more data (which I do :) ) I have to keep clicking (which I don't want to do). One of the approaches I tried for solving #4 was to use a function that calls itself, effectively putting it in endless loop, but that didn't really work, perhaps due to my coding (browser hang-up).
Parts of the code I got is below. Note that script output on the server is not predicated to data i send it - it will return same thing if I send it different parameters in query string. Actually, sending nothing in query string is acceptable, I just want server script to run and return data

Server side - bash script echoing some values from serial port (this can be anything, it just needs to output data

control2.cgi :


#!/bin/sh

# serial port of the microcontroller
RPORT="/dev/usb/tts/0"

#I put this in but its not used
#just in case I do want to get value of query string
qs="$QUERY_STRING"

#this is the part that outputs data and date
echo head -1 $RPORT
echo -n "Date: "; date

web page


<html>
<head>
<script type="text/javascript">
var xmlHttpData

function getData(str)
{
if (str.length==0)
{
document.getElementById("dataResponse").innerHTML="";
// str="givemedata";
return;
}

xmlHttpData=GetxmlHttpDataObject();
if (xmlHttpData==null)
{
alert ("Your browser does not support AJAX!");
return;
}

var url="http://10.0.0.40/cgi-bin/control2.cgi";
url=url+"?"+str;
xmlHttpData.onreadystatechange=stateChanged;
xmlHttpData.open("GET",url,true);
xmlHttpData.send(null);
}

function stateChanged()
{
if (xmlHttpData.readyState==4)
{
document.getElementById("dataResponse").innerHTML=xmlHttpData.responseText;
}
}

function GetxmlHttpDataObject()
{
var xmlHttpData=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttpData=new XMLHttpRequest();
}
catch (e)
{

...FUNCTIONALITY FOR OTHER BROWSERS- DELETED HERE TO SAVE SPACE ON WebmasterWorld

return xmlHttpData;
}
</script>
</head>


<body>
<form>
<input type="text" id="ArduData" onkeyup="getData(this.value)">
</form>

<p>Data: <span id="dataResponse"></span></p>
</body>
</html>

so in above code if I type anything in the input box, upon releasing keyboard key I will get response back from the server. What I want is that data always keeps coming without key having to be pressed.
Any help or direction is greatly appreciated

11:00 pm on Mar 15, 2009 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



In your callback function for onreadystatechanged (your function stateChanged), after you set the innerHTML to the responseText value, fire off the send method again. I think that should do it.
2:45 am on Mar 16, 2009 (gmt 0)

5+ Year Member



@Fotiman - you rock! that did it, and data is contentiously coming in.

Although, I am now done with this part , and am not modifying it any more, I am wondering how easy (or hard) would it be to do something useful with incoming data rather then just displaying it on the page. What I mean is getting the incoming data into some kind of a variable and using it for other purposes....
For posterity and, hopefully if this is useful to somebody else this is how modified web page looks like. Note that i changed getData function (no need for argument in my case now - although it can be modified to accept say query string as an argument...)

web page


<html>
<head>
<script type="text/javascript">

var xmlHttpData

function getData()
{
xmlHttpData=GetxmlHttpDataObject();
if (xmlHttpData==null)
{
alert ("Your browser does not support AJAX!");
return;
}
var url="http://10.0.0.40/cgi-bin/control2.cgi";
// uncomment if changing function to send specific query string
// don't forget to modify function getData to accept argument, as in getData(str)
// url=url+"?"+str;
xmlHttpData.onreadystatechange=stateChanged;
xmlHttpData.open("GET",url,true);
xmlHttpData.send(null);
}

function stateChanged()
{
if (xmlHttpData.readyState==4)
{
document.getElementById("dataResponse").innerHTML=xmlHttpData.responseText;
//fire getData function here to continuously receive data, i.e "stream data"
getData();
}
}

function GetxmlHttpDataObject()
{
var xmlHttpData=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttpData=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttpData=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttpData=new ActiveXObject("Microsoft.XMLHTTP");
}
}

return xmlHttpData;
}

</script>
</head>

<body onload="getData();">
<p>Data: <span id="dataResponse"></span></p>

</body>
</html>

 

Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month