I have to implement a chat service on an application I'm working on.
I wanted to have a brief overview/help on the architectural design of it.
The chat page should look like this.
So I would like to know how to implement a couple of features (I don't need the code, just some tips/directions)
Features :
- I would need to show the list of active users with which I have/had a conversation
- I would need to show a notification count ( a sum of all the messages I was sent ) on the navbar EVEN when I'm not on the chat page
- I would need to implement the actual 1 v 1 chat on the right side
- I would need to show the previous history of the chat every time the user clicks on a particular user to chat with him
- I would need to send images and pdf on the chat
Solutions that I thought of :
- A fetch call to get all the users that i have spoken with + a websocket that I connect to when the user navigates to this page with a custom event saying that the user is connecting. I would than match the connected user id with the user id returned by the fetch call to show online status
- Either a Server Sent Event open on the navbar that returns me whenever someone sends me a message and i'm not connected to the previous socket or a polling fetch or an open websocket (?)
- A classic 1 v 1 websocket connection to send messages to
- A fetch call to get all the history whenever the user click on a conversation and then append the new websocket messages to that
- ?
It would be the first time trying to build this product, are my ideas valid? am i on the right path?
Open questions :
Do i need multiple websocket connections like one connection for the active user, one connection for the actual 1 v 1 chat or i can use a single websocket with different events?
How can i ensure that the message is sent just to the user i'm talking to? should i open a new 1 v 1 connection each time i click on a user or i can just have one websocket connection with multiple "conversations" ?
How can i receive a message to conversation 1 if i'm on conversation 2 ?
For the sake of it i'm going to use React ( nextjs) and socket.io. The backend will be handled in python for be constraints.
Appreciate any help insight whatsoever :)