How do they make real time data live on a web page?

Question

How do they do this? I would like to have web pages with data fields that change in real time as a person views the web page. Here is an example.

How do they do this? JQuery? PHP?

I need to connect my field data to mySQL database.

Answer 1

There are two things needed to do this:

1. Code that runs on the browser to fetch the latest data. This could be Javascript or something running in a plugin such as Silverlight or Flash. This will need to periodically request updated content from the server.

Which leads to a need for...

1. Code that runs on the server to retrieve and return the latest data (from the database). This could be created with any server sided scripting language.

Answer 2

There are two approaches:

Polling

Client requests data on a regular basis. Uses network and server resources even when there is no data. Data is not quite 'live'. Extremely easy to implement, but not scalable.

Push

Server sends data to the client, so client can simply wait for it to arrive instead of checking regularly. This can be achieved with a socket connection (since you are talking about web pages, this doesn't really apply unless you are using Flash, since support for sockets in the browser in the browser is currently immature) - or by using the technique known as 'comet'.

Neither socket connections nor comet are particularly scalable if the server end is implemented naively.

- To do live data on a large scale (without buying a boat load of hardware) you will need server software that does not use a thread for each client.

Answer 3

I did it with JavaScript timer set execution in milliseconds, each time timer executed function that queried Server with Ajax and returned value(possibly JSON format), then you you update your field with the value. I did it each 5 sec and it works perfectly. In ASP.NET I think it called Ajax Timer Control.