Chat App Documentation

# Chat App Documentation ## Models ### 1. Users ```javascript=1 const UserSchema = new Schema({ name: { type: String, required: true, }, username: { type: String, required: true, }, password: { type: String, required: true, }, date: { type: String, default: Date.now, }, }) ``` ### 2. Messages ```javascript=19 const MessageSchema = new Schema({ body: { type: String, required: true, }, media: { type: String, }, date: { type: Date, default: Date.now(), }, sender: { type: Schema.Types.ObjectId, ref: 'Users', required:true, }, receiver: { type: Schema.Types.ObjectId, ref: 'Users', required:true, }, type: { type: String, required: true, }, }) ``` ### 3. Chats ```javascript=48 const ChatSchema = new Schema({ users: [{type:Schema.Types.ObjectId, ref: 'Users' }] messages: [{type:Schema.Types.ObjectId, ref: 'Messages' }] }) ``` ## End points ### **1.Users** #### 1.1 | Name | Type | Request | Response | | --------- |:---- | --- | --- | | /register | post | email, name, password | jwt token | | Status Codes | Message | | ----------------- |:----------------------- | | 200 | Success | | 400 | Email Already Exists | 500 | Internal Server Error| :bulb: **what it does:** help register a new user by adding the details in the user table #### 1.2 | Name | Type | Request | Response | | --------- |:---- | --- | --- | | /login | post | email, password | jwt token | | Status Codes | Message | | ------------ |:--------------------------- | | 200 | Success | | 404 | Email Does not Exist | | 401 |Invalid Credentials | | 500 | Internal Server Error| :bulb: **what it does:** helps login a registered user by matching the password ### **2.Chats** #### 2.1 | Name | Type | Request | Response | | --------- |:---- | --- | --- | | /chats| get | user id of logged in user | list of conversations | | Status Codes | Message | | ------------ |:----------------- | | 200 | Success | | 401 |Authorization Error | | 500 | Internal Server Error| :bulb: **what it does:** Gets all the pre-existing chats of he user if there are any in chats database #### 2.2 | Name | Type | Request | Response | | --------- |:---- | --- | --- | | /chat| post | [users] | chat-id| | Status Codes | Message | | ------------ |:----------------- | | 200 | Success | | 401 | Authorization Error | | 500 | Internal Server Error| :bulb: **what it does:** it will add a new chat into the existing chats of the user #### 2.3 | Name | Type | Request | Response | | --------- |:---- | --- | --- | | /message| post |MessageData,Sender_id,Chat_id,type | string | | Status Codes | Message | | ------------ |:----------------- | | 200 | Success | |401| Authorization Error | 500 | Internal Server Error| :bulb: **what it does:** it will add a new transaction if the type is create,delete,edit with the data. #### 2.4 | Name | Type | Request | Response | | --------- |:---- | --- | --- | | /messages| get |Chat id,lastTransaction_id | messages of a chat | | Status Codes | Message | | ------------ |:----------------- | | 200 | Success | |401| Authorization Error | 500 | Internal Server Error| :bulb: **what it does:** it will get all the messages from the table if lastTransaction_id is null and if not then from (lastTransaction_id till the end) which will give me only newer messages.    ## Socket.io events ### 1) Create/Edit/Delete Message: - If the user writes anything a component,in the listener of the component we need to emit a event from client to the server. - in the on connect function whenever a client connects to the server push into a global array ,pair of [{user_name,socket.id}] and whenever the user disconnects pop that out. - Event name and data(message_id,user_name,type) will be sent to the server where type is edit or delete or create message - call post message route and make changes in chat route on the client side - the server will catch the event and send that to receivers's socket id(extracted from that array of pairs). - there will be listener to the event at the client side which will display the message on the front end and notify the user about it. ### 2) Typing: - A typing event will be triggered when the user is typing in message box in the client side.Event name and the data(user_name) will be sent to the server. - on the server side we will catch that event and it will be sent to the receiver's socket id. - In front end listener, we will display the "user_name( extracted from the data) is typing" on the screen. ### 3) Message Delivered: - Whenever the client is connected to the server and gets a message from the server , a event should be triggered which will take the data message_id and sender's user_name - on the back end side it will emitt a message to the sender socket that message with message has been delivered to receiver. ### 3) Message Seen: - whenever the client opens up any message a event should be triggered which takes the data message_id and sender'suser_name. - on the server side it will emitt a message to the sender that message with message_id has been read by receiver. ### 4)Online: - whenever the client connectes to the server it will trigger a event "online" to the server along with user_name of the client. - on the server it will listen to the event and emit a message "user_name" is online to all the connected sockets - and listener at the client side will show the message on the front end. ### 5)Last seen: - whenever the client disconnects to the server,it should trigger a event along with the data user_name and the timeStamp from the client side. - on the server it will listen and emit a message "user_name" Last seen at timeSTamp to all the connected sockets. - and listener at the client side will show this on the interface. :bulb: **About the Edge Cases** : - Whenever user calls api getMessages,it will keep a react state lastTransaction_id which will be the index of the record which was the last fetched. - If the internet goes away and there is a change in event,when the internet comes back,it will fetch only the newer messages. - All the users are notifed when an older message is deleted. ### FLOW CHART ![](https://i.imgur.com/tHKAALR.png)