How to get realtime data?

Question

I am trying to build a bus application which shall behave exactly like this (http://pdxlivebus.com/) one.

Now I simply can not get the idea out that how can i constantly feed data to the UI from my backend? I don't want to send ajax requests after some intervals. I have done chat application with react and node.js but they are realtime in a sense that one user does something(send message or disconnect) and for that the server sends out a socket event and the client listens and updates.

But application like this one http://pdxlivebus.com/ where the user does not do anything but to watch the buses how does the UI gets updated with the latest data?

They're using websockets, with the [socket.io](https://socket.io/) library — kombucha, May 29 '17 at 18:57
Possible duplicate of [How to get realtime updates?](https://stackoverflow.com/q/6304937/218196) — Felix Kling, May 29 '17 at 18:57
I know they are using websockets i have seen it in network traffic but my question is how they managed to emit the data and receive the data with out any action from client? — ShocKwav3_, May 29 '17 at 19:05
*"with out any action from client?"* Well, they don't. The client has to establish the websocket connection. But that can be done without *user interaction*. — Felix Kling, May 29 '17 at 19:09
you have a pushing server script run every 15 seconds or so, there's no need to be ultra-precise. — dandavis, May 29 '17 at 19:12
@FelixKling yes after establishing how do i get the data without calling some function like setinterval from client — ShocKwav3_, May 29 '17 at 19:28

score 2 · Accepted Answer · answered May 29 '17 at 19:53

2

Internally http://pdxlivebus.com/ is using socket.io – check line no. 23178 of http://pdxlivebus.com/dist/bundle.js

Emitted event vehicle_update returns data like:

{
  "routeNumber": 100,
  "delay": -37,
  "inCongestion": null,
  "latitude": 45.5231087,
  "longitude": -122.959265,
  "type": "rail",
  "vehicleID": 104
}

With information like that you can build animations for each element (vehicleID is uniq, it is easy to track) that is in move.

answered May 29 '17 at 19:53

Krzysztof Safjanowski

7,292
3
35
47

Thanks for the detailed answer. I understood this app uses websockets. There is a event that the server emits and the client receives. My question is how can I ensure there is always an event going on so that the client can keep listening and updating the data? – ShocKwav3_ May 29 '17 at 22:17
1

You want to have that knowledge on back or front-end side? Backand can track all connected clients - if response from client is missing - it means lack of connection with it. Some kind of heartbeat - after each (or less, e.g after 100 ticks) send response to backend that client is still connected. – Krzysztof Safjanowski May 30 '17 at 07:59

score 1 · Answer 2 · answered May 29 '17 at 19:05

1

I believe you need to integrate real-time database. You can use Firebase database https://firebase.google.com/docs/database/

Here is sample code on how to integrate it. https://moquet.net/blog/realtime-geolocation-tracking-firebase/

answered May 29 '17 at 19:05

kunalkamble

294
2
3

but I will be getting the data from an api! – ShocKwav3_ May 29 '17 at 19:06
You have two options now. 1. Use [Firebase Functions](https://firebase.google.com/docs/functions/) fetch data from API and update your Firebase real time data. 2. Use [MEAN stack](http://meanjs.org/), you can skip angularjs but use other with [Socketio](https://socket.io/) Keep some interval to fetch latest location data after every 5 sec or so and update your vehicle tracking table which subscribed by each client using [Socketio](https://socket.io/). – kunalkamble Jun 09 '17 at 19:07

score 1 · Answer 3 · answered May 29 '17 at 19:36

1

You can use webrtc which is a enables the real time comunication between browser.

Or

You can go with socket.io which enables the realtime, bi-directional communication between web clients and server

answered May 29 '17 at 19:36

Shailendra Singh

63
3

score 1 · Answer 4 · edited Jul 23 '22 at 00:31

1

Use set interval method

const [time, setTime] = React.useState("Time");

  function currentTime() {
    let Time = new Date().toLocaleTimeString();

    setTime(Time);
    setInterval(currentTime, 1000);

edited Jul 23 '22 at 00:31

Liki Crus

1,901
5
16
27

answered Jul 21 '22 at 03:40

Joker38

7
5

score 0 · Answer 5 · answered May 29 '17 at 19:17

You need to work with sockets, maybe you can work with socket.io other great library is SuperWebSocket is compatible with .net and html5.

And for the client i think the best option is Angularjs, is a powerful tool for work with real time data, for example this web use Angularjs for show real time data

How to get realtime data?

5 Answers5