chat-room-typescript's Introduction

Chat-Room

Introduction

This project is built to study SSE (Server-Sent Events). To do so, I generated a chat room that allows users to log in with their names, see who is connected, and send messages.

React Usage

In this project, I have done major usage in react. Every element in the page is built by components of react. I also use React to route between the login page to my chat page. This reduces the number of requests that the front needs to send to the back and also makes the running time much faster.

SSE

The server side is working on EventEmmitter, a class in JavaScript that lets me create events and a way to sign that the event happened. In this way, I can sign every time that user logged in or logged out and in any message the users send. What help me to update the data in the front and refresh the page to show me the new data.

How to run

For now, the chat room has no deployment so to use it you need to do The following orders:

Download this repo
Open 2 terminals on your IDE
npm i on the server folder
Add .env file inside the server folder that includes this config:
- MONGO_URI=<Database connection>
- JWT_SECRET=<Secret key (choose whatever you like)>
- ACCESS_TIME=<12h>
- REFRESH_TIME=<36h>
npm start to run the server
On the second terminal cd client
npm i on this folder
npm run start on this chat-Room-typescript/client root to run the client side of the project