1
b2plane
241d

Following some new nextjs tutorial to learn how to efficiently build a web chat app, the guy built it very solid, but is it efficient?

Im having mixed feelings about this approach. The way he did it is, for example when you click on a user (imagine it as a list of users from your contacts), it actually calls a route, which stores that in database, and once its done Then the route triggers lets say socket.io event to notify the frontend to update the UI.

Not only that but each new message that gets sent it actually calls a route which stores that message in database and once that's successful Then it emits a socket.io event to the frontend to fetch that message.

As you can imagine constantly calling routes like this Does induce small delays. Creating conversations, navigating, opening someones profile and especially sending messages, is NOT instantaneous. When you do it theres a small delay, giving the impression as if the app is SO large that it lags

But it doesnt lag, it just needs a few ms to store that in db so it can return the socket.io bidirectional message event. Which does make sense because what if the internet broke and the user immediately gets sent a message, but the message fails to get stored in database? Or db storage gets fucked or something else fails but socket.io works while db doesnt? The data then may be inconsistent. This approach fulfulls the single source of truth principle

So thats why im having mixed feelings about this approach particularly because of small delays. It is not instantaneous like whatsapp discord telegram signal viber etc the input UI freezes until the message is successfully sent

---

Of course this can be a UI/UX decision and can be handled differently even if the backend works like that.

My concern is is this approach valid?

My question is... I had an idea what if i emit socket.io event to send the message while in the background also call the route to store that message in db? This way not only would it work asynchronously but the message gets sent instantaneously, and if the backend fucks up to store it in db then the UI gets updated with message failed to get delivered, switching the socket.io into polling state. Is this a good (proper, efficient, better) way to do it or not?

Comments
  • 0
    Yes it's called "optimistic ui", should generally use it
    Idk what you mean by switching to polling state? Just send a message from backend to frontend
  • 0
    @devRancid is it normal to call a route, which then emits a real time socket event so the user on frontend can receive the message in real time?

    Because arent bidrectional web sockets created so you dont have to use routes?

    Why is this better over just directly emitting socket event?
  • 0
    It's a replacement to polling and server sent events
    You probably meant HTTP/REST API vs websockets, and "routes" can be used with either one
    For a chat app it probably makes sense to do most things with ws
  • 0
    @devRancid

    1) ROUTE APPROACH

    - send [POST] /api/v1/messages
    - creates message in db
    - emits ws event of message

    2) WEBSOCKET APPROACH

    - emit ws event to send message
    - ws calls methods to store in db
    - emits back the created message

    Which approach is better?
  • 1
    2
    Don't have to reauthenticate or open new connections all the time
    But emitting back the same message you already have locally is a waste
  • 0
    @devRancid after processing the message on backend it might get new attributes filled such as last message sent. Date. Image. Users. Etc. So sending back that newly created message object could retrieve more information than what was on frontend

    2 also looks like a better approach. Why the Fuck that guy on youtube wrote the code to call routes if this can be done purely with websocket? Fucks sake
  • 2
    Idk maybe because YouTubers are mostly good at presenting themselves but suck at programming?
  • 0
    The way I did it for my kahoot clone is that a user submits an answer through the socket, and then the sockets broadcasts a message to all to update their state.

    The quiz master stars a game by calling a route and then connects oj a different route with the websocket
    No http communication occurs except for an authentication step.
Add Comment