2
7 Comments

Need Guidance for Live Dashboard

Hello everyone!

I'm working on an application with React/Redux/Node/Socket.io.

I want to have a live dashboard that the user lands on upon login that displays information such as number of followers, views, and other things that could potentially change during the user's session.

I'm still an amateur developer, and I'm not sure how to go about building such a thing. I was looking at service workers and push notifications, which I will also need, but I don't think is applicable to this problem.

I came across stuff like Cube.js, but I want to build my own solution. This whole project is a learning experience.

Can someone point me in the right direction in terms of how to proceed? Do I need to re-write my whole backend to a microservices architecture? Can I use socket.io and emit events back and forth between the client and server as things change?

Any advice would be appreciated.

  1. 3

    Before deciding how to build things right now, I would consider what the actual rate of change for all of those items are. More often than not, "almost real time" can be just as good as actual real time data. Going with "almost real time" also makes your infrastructure a lot easier to build/work with because you're not dealing with persistent socket connections.

    My advice (from experience): go with an HTTP polling model rather than using Websockets. Websockets are tricky to scale and persistent connections are more expensive than stateless HTTP requests. Even if you polled your backend every second, Id bet most users would believe your service is realtime.

    Also one tip to make things easier: do as much calculation in your database/backend as you can. Then all you need to worry about on the frontend is displaying your data.

    1. 2

      I would concur with this. Unless you are doing something that truly demands real time changes, such as a video game or stock ticker, you are far better off polling on a timer. For most things, you don't even need to poll every second. Every 30 seconds or so is sufficient.

    2. 1

      Thank you for the information! I think "almost real time" is what I'm looking for. I'm trying to research how to do this with Node/Express.

  2. 1

    Hey dude. You don't need sockets, it unnecessary complexity. You just need an api (endpoint) where your client can grab the information from, something like /api/dashboard and this endpoint will return a json object like { followers: 10, views: 100 } and your client will parse it and display it. If you want the information to be "live" you can implement polling. It'll make a request to /api/dashboard every so often to check for new data

  3. 1

    Recent post from my linkblog 15/01/2021:

    An intro to server sent events (SSE) - Similar to web sockets, but less complicated, but unidirectional, good for real-time updates to a UI for instance like counts, article includes some clear example code iabhishek.dev

    Seems like it could be a lightweight way to implement a live updating dashboard as long as your updates are unidirectional.

    1. 1

      This is a great article! This is the first time I've heard about EventSource. I guess that's one of the tough things about being a new dev. I don't even know what to search for. But this should put me on the right track.

      The way that I'm thinking about this, if I wanted to implement this in my React app, I could set up an EventSource instance on my Dashboard component, and then emit different events for things like new views or likes. And I should be able to update my database as a result of events, and then push that information to the client. In any event, I have more research to do.

      1. 1

        Yep that’s how I parsed that article too. I hadn’t heard of these types of events either, and I’ve been writing javascript for 10. years.

        I’d be really interested in any writeup you do of your implementation (@ mention me in a comment), even if it’s just for a minimal prototype. I’d like to know how to hook these types of events into something like React.

        Good luck with your implementation.

Recommended Posts