CODEWITHSUNDEEP
javascriptnode.jsreactjsreal-time
ShocKwav3_
ShocKwav3_

Reputation: 1760

How to get realtime data?

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?

Upvotes: 0

Views: 14953

Answers (5)

Joker38
Joker38

Reputation: 5

Use set interval method

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

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

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

Upvotes: 1

Krzysztof Safjanowski
Krzysztof Safjanowski

Reputation: 7438

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

part of source code with marked line

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.

Upvotes: 2

Shailendra Singh
Shailendra Singh

Reputation: 63

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

Upvotes: 1

marjes
marjes

Reputation: 172

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

Upvotes: 0

kunalkamble
kunalkamble

Reputation: 294

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/

Upvotes: 1

Related Questions