Purpose of this project was to implement fully functional chat system with group chats and file upload possibility using only web sockets.
Since there is no database, as soon as you reload the page your user will disapear
Since this is most probably run localy, if you want to see multiple users you just need to open multiple browser tabs which are targeting the url on which the app is run.
Project is consisted of two main parts:
- client
- server
Client is Typescript app made with React framework and it's main purpose is to manage client communication and to display some kind of UI so we can actually use the chat
Server is Typescript app made with express framework. It's basically a very simple server which listens to socket events sent from clients and handles them accordingly
Core of this project is the socket.io library for Typescript, which is just a nicer interface for native Javascript websocket interface. It's used both on the client and the server.
Since both client and server are seperate npm projects you need to run npm install
in both of them. If you are in the root of the repo, commands are:
cd client
npm install
and
cd server
npm install
After you've installed the dependencies you need to run the projects, which can be done with npm run start
. Command is the same for both projects.
Client is started on port 3000, and server is started on 4000. You should make sure that those ports are available before starting the projects. If you want different ports, just change the .env
files
For local setup, just rename .env.example
to .env
and you are good to go.
- npm version: 7.0.3
- node version: v15.0.1
It should work fine with everything that is relatively newer, if that's no the case, you can use nvm to use these specific versions.
If you run into some TS related problems during build, please make sure that you are using TS installed in the project, not TS installed globally on your computer