Realtime data output via web interface

Question

HTML

Good afternoon, dear Habrausers. Recently, I was given the task of visualizing a constant stream of data in the form of a web page. These are a continuous stream of this type

A: 61.56 61.43 61.08 62.03 61.35 61.38 61.51 61.05 62.12 61.52 ...
B: 16.77 17.76 16.96 16.35 16.12 16.28 16.72 16.87 16.15 16.79 ...
C: 61.56 61.43 61.08 62.03 61.35 61.38 61.51 61.05 62.12 61.52 ...
D: 16.77 17.76 16.96 16.35 16.12 16.28 16.72 16.87 16.15 16.79…
…………………………………………………………………
Y: 61.56 61.43 61.08 62.03 61.35 61.38 61.51 61.05 62.12… 61.38 61.51 61.05 62.12…
67.12 16.96 16.35 16.12 16.28 16.72 16.87 16.15 16.79…

That is, at the beginning of the line, the element identifier (let's call it a sensor), and after the colon, through the space, I start going into the “sensor” state every second. So I need to show all the sensors on the web page (there may be tens or hundreds of them) and the current state value. The states themselves do not need to be saved, after the show they can be safely deleted (statistics is collected separately), which means that instead of a database, you can use memcash. if I'm not mistaken, its speed should be enough even if the intervals are not seconds, but for example 100ms. Although I doubt whether any kind of base is needed at all - the data is output to stdout, can it be taken and visualized right away? It is clear that the usual html4 / xhtml and ajax will not cope here, but using html5, judging by what I have seen, it is quite possible to organize this. but unfortunately I have not yet had time to thoroughly understand the new features and try everything myself, that's why I'm asking for advice. How would you implement such a task? (mandatory requirement to output to a web page, and not to a separate gui) What technologies would you use - webgl, websockets, etc.?

Answer 1

Take a look at comet , maybe that's what you need. On Habré there were several articles devoted to this technology.

Answer 2

It seems to me that the options are too complicated for you. I would buffer the incoming data through memcache and then serve the data out of the cache in response to every second http requests. Any scripting language on the server side (python, php, etc.) is enough for this.

Answer 3

You can use socket.io/

Answer 4

very simple. on the client side, continuously request new data with XmlHttpRequest, and on the server side, return them only when new data has arrived; until then just keep the connection open. this approach is called polling (it seems), and you can read about all this here

Answer 5

If you update data at a speed of 50-100ms, then the user will only have ripples in his eyes. It is logical that it is better to update no more than 1 time per second.
The browser should render these requests normally, because you will not update the entire page, but only blocks with numbers (by the way, do not forget to set position: absolute to them, otherwise the entire page will be updated). WebSockets are not yet reliable. They are either included in the standard, or excluded, i.e. there is no certainty that with a browser update their support will not be lost.
Therefore, polling remains. Or even do it on java/flash'e, where there is normal support for normal sockets.

Answer 6

If you control the user environment (roughly speaking, you can tell which browser the user should use), then WebSockets is a completely normal solution for this, you generally forget about polling the server, it sends information to the browser when it changes (ideally). The trouble is that now only Chrome supports WebSockets from popular browsers. FF4 seems to be released without support, although it was in early beta :(