[RESOLVED] JavaScript and I/O

**egawtry** · July 26th, 2009, 03:53 PM

I need to do a web page that has an updating display from an outside source. I have full control of the server file system.

1. Is this possible from JavaScript? Or do I need full Java?
2. If Java is needed, how do I do it? Anyone have a good example to adapt and a good recommendation on a book?

Thanks,
-Erik

**Teranoz** · July 27th, 2009, 06:03 AM

Dont know what you exact want, but my first guess would be to use Ajax.
Please provide some more details

**egawtry** · July 27th, 2009, 10:39 AM

I have to have a basic GUI that monitors a sensor. This must work from a web browser. I can easily create a socket on the server to feed the sensor data to an app.

**Xeel** · July 27th, 2009, 01:19 PM

Same here, use AJAX it would be faster. Write a server side service and consult the page using AJAX with certain frequency (if it's LAN - 5s for ex., if it's Internet - 20-40s). Then using the obtained text data update the html using javascript.

**egawtry** · July 28th, 2009, 09:11 AM

Sounds ideal. Could you point me at an example somewhere? Thanks.

**Xeel** · July 28th, 2009, 01:13 PM

1. http://www.xul.fr/en-xml-ajax.html (for generic approach, in case you need some XML input for ex.)
2. http://www.prototypejs.org/api/ajax/periodicalUpdater (a nice JS framework that sometimes can save hours of needless experiments and work)
3. http://www.novocode.com/doc/servlet-...2a.html#ch_2_1 (most basic Java servlet that could be used for service, just add the logic to display the data you need)
4. http://www.w3schools.com/JS/default.asp (a good JS basics)
5. http://www.howtocreate.co.uk/tutoria...ript/dombasics (more of JS, lots of useful methods lists here, etc.)

**egawtry** · July 29th, 2009, 10:29 AM

Xeel,
Some great links there, but I seem to have some sort of brain block. I still don't understand how to read a sensor and report it. Let me restate what I want to do:

I need to allow any joe blow to go to the site with ONLY a browser (nothing else installed except maybe standard java) and get a updating readout of a value determined by hardware. All these sample programs call funtions that don't exist to read things, it is very frustrating.

The furthest I have gotten so far is creating a cgi program that generates html pages, but then the screen needs a constant repaint and flickers like crazy.

NIST has a good example with their online atomic clock at http://www.time.gov/

-Erik

**Teranoz** · July 30th, 2009, 02:50 AM

Originally Posted by egawtry

and get a updating readout of a value determined by hardware.

hardware of the server or the client ?

**egawtry** · July 30th, 2009, 09:21 AM

Originally Posted by Teranoz

hardware of the server or the client ?

The server.

**Teranoz** · July 30th, 2009, 09:31 AM

And that server is also a webserver ? what OS / webserver ?
Because you need the webserver to read the data (could be through using a DLL) and pass it to the client (again might be best using ajax)

Also what runs on the server determines how you should read it, ofcourse using php needs a different approach than .NET or classical ASP.

**Xeel** · July 30th, 2009, 01:26 PM

1. Server-side.

Depending on your webserver (Apache, IIS) you need to write a service class. It can be:
- PHP class (Apache, PHP)
- JSP or Java Servlet (Apache, Tomcat/JBoss/Jetty)
- ASP/ASPX (IIS or Apache with Mod Mono)

This will be you class that reads the "updating readout of a value determined by hardware" and responds via HTTP with this data.

2. Client-side.

Write a simple web page. Now there are two ways to get the data updated without fully reloading the page: back-post method or AJAX.

How to request a web service with AJAX you should already know from the links I sent you.

The back-post method is more work, but sometimes it allows to do more things than AJAX in certain cases.

Back-Post Method
==================================

- create an invisible iframe inside your web page
- set a dummy source for it (you should call it every time before sending the real url, it's mandatory for correct functioning, otherwise some browsers use cached data instead of update)
- with javascript update the iframe's source with the url of your web service
- depending on service format type using javascript update the HTML on the main page

This way you can do almost anything.

Example (we'll forget about well formed htmls for now... =) ):

Client-side HTML:

HTML Code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body onload="getTimeS()">
<p>Server clock: <span id="clockTxt" style="color:#F00;"></span></p>
<br /><br />
<iframe id="ifbox" src="dummy.html" style="display:none;"></iframe>

<script type="text/javascript">
function getTimeS(){
    document.getElementById("ifbox").src = "dummy.html";
    
    //JSP solution, JS that updates the clockTxt is inside
    document.getElementById("ifbox").src = "http://localhost:8080/service/clock.jsp";    
    
    //Servlet solution
    document.getElementById("ifbox").src = "http://localhost:8080/service/clockservice";    
    var iframe = document.getElementById("ifbox");
    document.getElementById("clockTxt").innerHTML = iframe.contentWindow.document.body.innerHTML;
    
    //reloads the whole method in 5 secs
    setTimeout("getTimeS()",5000);
}
</script>
</body>
</html>

Server-side, Servlet service:

PHP Code:


package com.test;

import java.io.*;
import java.util.*;
import javax.servlet.*;
import javax.servlet.http.*;

public class ClockService extends HttpServlet{

    private static final long serialVersionUID = 1L;

    @Override
    public void doGet(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException{
        doPost(req, res);
    }
    
    @Override
    public void doPost(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException{
        PrintWriter out = res.getWriter();
        Calendar cal = Calendar.getInstance(Locale.US);
        out.println(cal.getTime());
    }
}

or an JSP based service:

HTML Code:

<&#37;@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<%
Calendar cal = Calendar.getInstance(Locale.US);
%>

<html>
  <head>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
  </head>
  
  <body>
      <script type="text/javascript">
      window.top.document.getElementById("clockTxt").innerHTML = "<%=cal.getTime()%>";
      </script>
  </body>
</html>

The only thing here is that both the web page and the service should reside on the same server. if not some data access permission problems may accur and the scheme won't work.

**egawtry** · July 31st, 2009, 10:28 AM

Originally Posted by Teranoz

And that server is also a webserver ? what OS / webserver ?
Because you need the webserver to read the data (could be through using a DLL) and pass it to the client (again might be best using ajax)

Also what runs on the server determines how you should read it, ofcourse using php needs a different approach than .NET or classical ASP.

I think I have it figured out, I am coding now.

I am running an embedded device. I am coding the web server.

**egawtry** · July 31st, 2009, 06:23 PM

Got it working with Ajax. Had to do some web searches to get around the IE local files and caching issues.

Thanks!

**Xeel** · July 31st, 2009, 06:33 PM

Congrats! =)

Thread: [RESOLVED] JavaScript and I/O

Thread Tools

Display

[RESOLVED] JavaScript and I/O

Re: JavaScript and I/O

Re: JavaScript and I/O

Re: JavaScript and I/O

Re: JavaScript and I/O

Re: JavaScript and I/O

Re: JavaScript and I/O

Re: JavaScript and I/O

Re: JavaScript and I/O

Re: JavaScript and I/O

Re: JavaScript and I/O

Re: JavaScript and I/O

Re: JavaScript and I/O

Re: [RESOLVED] JavaScript and I/O

Posting Permissions