Echtzeitmonitor ohne Flackern in Webanwendung entwickeln

[P_H_I_L]

Hallo Zusammen,
wollte mal nachfragen ob es möglich ist einen Echtzeitmonitor zu prorammieren in einer Webapplikation. Programmiere mit Java Studio Creator oder NetBeans Studio.

Ich stelle mir das so vor:
alle 2sekunden will ich den gleichen Text in den Monitor schreiben. Ne einfache Schleife...
Aber ich will kein froßes geflacker erzeugen. ist dies überhaupt möglich?

 

[Thomas Darimont]

Hallo,

sowas ist nicht einfach aber machbar...
Ich würde hier eine Kombination von Ajax fähigem Chart Widget und Server Push (beispielsweise via Comet) versuchen (sofern der Server bei neuen Events das Chart updaten soll). Ansonsten könnte der Client den Server auch regelmäßig pollen...

Gruß Tom

 

[P_H_I_L]

Verstehe gerade nur Bahnhof
Sorry *G*

also ich will eine Connection zu zwei externen Servern aufbauen.
Das mache ich mit Polling. Die Server schicken mir im 10 Sekunden Takt antworten zu, die ich in einem Monitor (Tabelle (*.jsp)) ausgeben will.
Aber wenn ich die Seite immer wieder neu lade, dann würde natürlich immer die Applikation flackern. Darum frage ich mich wie ich das anders lösen kann.

Gruß,
Philipp

 

[matdacat]

Thomas hat Dir bereits wichtige Stichwörter genannt, musst Dich nur etwas einlesen:

- AJAX für asynchrones Polling des Servers und Update der Website mittels JavaScript
- Comet, um ein Push von der Serverseite zu realisieren, wenn Du das Polling umgehen möchtest

Die Server schicken mir im 10 Sekunden Takt antworten zu

Welche Technologien werden denn momentan verwendet?

 

[Thomas Darimont]

Hallo,

hier mal ein kleines Beispiel für einen Echzeitmonitor (Darstellung einer Zeitreihe) mit dem (Google WebToolkit) GWT, dem GWT Chart API und dem GWTCanvas. (Hier mit beispielhaft Polling realisiert)

http://code.google.com/intl/de-DE/webtoolkit/
http://code.google.com/p/gchart/
http://code.google.com/p/google-web-toolkit-incubator/wiki/GWTCanvas

Application:

package de.tutorials.gwt.training.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
import com.google.gwt.user.client.Timer;
import com.google.gwt.user.client.rpc.AsyncCallback;
import com.google.gwt.user.client.ui.RootPanel;

import de.tutorials.gwt.training.client.charts.Chart;

/**
 * Entry point classes define <code>onModuleLoad()</code>.
 */
public class Application implements EntryPoint, AsyncCallback<Double> {

	final IDataFeedServiceAsync dataFeed = GWT.create(IDataFeedService.class);

	final Chart chart = new Chart();
	Timer timer = new Timer() {
		public void run() {
			dataFeed.getData(Application.this);
		}
	};

	/**
	 * This is the entry point method.
	 */
	public void onModuleLoad() {
		timer.schedule(2000);
		timer.scheduleRepeating(2000);
		RootPanel.get().add(chart);
	}

	public void onFailure(Throwable caught) {
		GWT.log("ERROR", caught);

	}

	public void onSuccess(Double result) {
		chart.getCurve().addPoint(chart.getDataPointCount(), result);
		chart.incrementDataPointCount();
		chart.update();
	}
}

Chat:

package de.tutorials.gwt.training.client.charts;

import com.googlecode.gchart.client.GChart;

public class Chart extends GChart {

	int dataPointCount;

	public Chart() {
		super(800, 300);
		setChartTitle("<b><i><big>TimeSeries</big></i></b>");
		setPadding("5px");

		getXAxis().setAxisLabel("<small><b><i>Time</i></b></small>");
		getXAxis().setHasGridlines(true);
		getXAxis().setTickCount(6);

		getYAxis().setAxisLabel("<small><b><i>Value</i></b></small>");
		getYAxis().setHasGridlines(true);
		getYAxis().setTickCount(11);
		getYAxis().setAxisMin(0);
		getYAxis().setAxisMax(16);

		addCurve();
		getCurve().getSymbol().setBorderColor("blue");
		getCurve().getSymbol().setBackgroundColor("blue");
		getCurve().getSymbol().setFillSpacing(10);
		getCurve().getSymbol().setFillThickness(3);

	}

	public int getDataPointCount() {
		return dataPointCount;
	}

//synchronized  not supported in gwt
	public synchronized void incrementDataPointCount(){
		dataPointCount++;
	}
}

Feed Service Interface:

package de.tutorials.gwt.training.client;

import com.google.gwt.user.client.rpc.RemoteService;
import com.google.gwt.user.client.rpc.RemoteServiceRelativePath;

@RemoteServiceRelativePath("rpc/datafeed")
public interface IDataFeedService extends RemoteService{
    Double getData();
}

package de.tutorials.gwt.training.client;

import com.google.gwt.user.client.rpc.AsyncCallback;

public interface IDataFeedServiceAsync {
    void getData(AsyncCallback<Double> callback);
}

Feed Service: (server)

package de.tutorials.gwt.training.server;

import java.util.Random;

import com.google.gwt.user.server.rpc.RemoteServiceServlet;

import de.tutorials.gwt.training.client.IDataFeedService;

public class DataFeedService extends RemoteServiceServlet implements
        IDataFeedService {

    double min;
    double max = 16;
    Random random = new Random();

    public Double getData() {
        return min + random.nextDouble() * max;
    }

}

Application.gwt.xml:

<module>
      <inherits name='com.google.gwt.user.User'/>
      <inherits name="com.google.gwt.i18n.I18N"/>
      <inherits name="com.googlecode.gchart.GChart"/>
      <inherits name='com.google.gwt.widgetideas.GWTCanvas' /> 
      <inherits name='com.google.gwt.user.theme.standard.Standard'/>
      <extend-property name="locale" values="de_DE"/>
      <entry-point class='de.tutorials.gwt.training.client.Application'/>
      <stylesheet src='Application.css' />
    <servlet path="/rpc/datafeed" class="de.tutorials.gwt.training.server.DataFeedService" />
</module>

Application.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="gwt:property" content="locale=de_DE">
   <title>Tutorials.de GWT Training</title>
   <script type="text/javascript" language="javascript" src="de.tutorials.gwt.training.Application.nocache.js"></script>
  </head>
<body>
   <iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>
  </body>
</html>

Ergebnis: Siehe Screenshot:

Gruß Tom