CODEWITHSUNDEEP
reactjswebsocketreact-reduxchat
hitochan
hitochan

Reputation: 1068

Chat app: What to do on successful re-connection to the WebSocket server?

My friend and I are currently building a web-based chat app with WebSocket. I'm in charge of client side (React + Redux). Golang is used for the server side (I don't know whether this is a good combination, but I do this just for fun).

Basically my problem is that I don't know what to do after the successful re-connection to the WebSocket server.

More concretely:

The client side tries to reconnect to the server when the connection is lost. My questions are

  1. When the re-connection is successful, what should I do with the data that were supposed to be sent to the server, but actually weren't sent because of the lost connection? Is it better to have something like a buffer to store all the data that are not yet transmitted to the server?

  2. Currently, a React component do the initial fetch of all the necessary data ( rooms, friends, chat history, etc.) on componentDidMount. For the app to be in sync with the server on successful re-connection, the app should perform actions similar to the initial fetch. But calling componentDidMount deliberately does not seem to be a good idea, because it is not supposed to be called in this way. Is it good to perform initial fetching in componentDidMount in the first place?

Upvotes: 1

Views: 237

Answers (2)

Gene S
Gene S

Reputation: 553

Go is certainly a good choice for the chat server because of the way it handles concurrency. The other common option for chat servers is Erlang. React is a matter of personal preference.

  1. You probably don't want to buffer it all. You just want to buffer the messages but not, for instance, typing indicators because they make no sense if not sent immediately. Something as simple as an array with push() and shift() would do.

  2. Move data fetching to a separate function, then call it both from componentDidMount and from the callback or whatever place where you reconnect.

Using both HTTP and websocket in one app is a matter of design. It does seem to complicate things though.

Upvotes: 1

Sami Hult
Sami Hult

Reputation: 3082

Since this is is a general question, I will answer in general terms:

  1. You need some kind of buffer between the application and the unreliable stream. Since you're reactive, you can implement this using an observable. The service that is responsible for the actual communication over WebSocket will subscribe to this feed.

  2. Separate the initialization of the component from initialization of the data. If you're communicating over WebSocket, you can reinitialize data every time the socket connects.

Upvotes: 1

Related Questions