https://github.com/mamaly1000/socket.io

in this project i created two sides of the project(backend and frontend) to have a better and deeper understanding in web-sockets woth socket.io. also i need to mention that i used other tools which hepls me to develop this project better ,such as webpack and my beloved typescript .
https://github.com/mamaly1000/socket.io

date-fns socket socketioclient tailwindcss typescript webpack

Last synced: about 1 month ago
JSON representation

in this project i created two sides of the project(backend and frontend) to have a better and deeper understanding in web-sockets woth socket.io. also i need to mention that i used other tools which hepls me to develop this project better ,such as webpack and my beloved typescript .

• Host: GitHub
• URL: https://github.com/mamaly1000/socket.io
• Owner: Mamaly1000
• Created: 2024-07-17T02:15:27.000Z (6 months ago)
• Default Branch: master
• Last Pushed: 2024-07-17T03:07:19.000Z (6 months ago)
• Last Synced: 2024-07-17T05:57:00.547Z (6 months ago)
• Topics: date-fns, socket, socketioclient, tailwindcss, typescript, webpack
• Language: CSS
• Homepage:
• Size: 127 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# socket.io

in this project i created two sides of the project(backend and frontend) to have a better and deeper understanding in web-sockets woth socket.io. also i need to mention that i used other tools which hepls me to develop this project better ,such as webpack and my beloved typescript .

## Features

- able to send messages in a public chat 

- able to send messages to private chats or private users

- able to join a room or create a room for private conversation

- able to reply others while chating inside a room 

Getting Started

## Installation 

for starting both client and server you need to go to each file and install all required dependencies :

for client:

```bash

cd client

npm install -y

npm run dev

```

for server:

```bash

cd server

npm install -y

tsc // compile all typescript files to a javascript file to

    // run it in server

npm run dev

```

and at the end you can open the index.html file and run a live server .

and yes ,you did it .

## Tech Stack

**Client:** React, Redux, TailwindCSS

**Server:** Node, Express

## Appendix

some of the important files are elaborated down below:

## `Client/dist/main.ts`  

A real-time chat application built using Socket.IO, allowing users to send messages to each other in public or private rooms.

#### Features

- Real-time messaging using Socket.IO

- Public and private messaging

- Room support for private conversations

- Error handling for connection errors and disconnections

- Automatic scrolling to the bottom of the chat container 

#### Components

- ChatInputComponent: Handles user input and sends messages to the server

- MessageComponent: Displays individual messages in the chat container

- Header: Displays the chat header with the user's ID and connection status

#### Socket Events

- `connect` : Establishes a connection to the server

- `recieve-message`: Receives messages from the server and displays them in the chat container

- `chat-header`: Updates the chat header with the current room and connection status

- `error`: Handles error messages from the server

- `disconnect`: Handles disconnections from the server

- `offline`: Handles offline events from the server

- `connect_error`: Handles connection errors from the server

#### Functions

- `displayMessage`: Displays a message in the chat container and sends it to the server if necessary

- `displayChatHeader`: Displays the chat header with the user's ID and connection status

 

## `Server/dist/server.ts`

A real-time chat server built using Socket.IO, allowing users to send messages to each other in public or private rooms.

#### Features

- Real-time messaging using Socket.IO

- Public and private messaging

- Room support for private conversations

- Error handling for connection errors and disconnections

#### Socket Events

- `public-message`: Sends a message to all connected clients

- `join-room`: Joins a client to a specific room

- `leave-room`: Leaves a client from a specific room

- `room-message`: Sends a message to all clients in a specific room

- `private-message`: Sends a private message to a specific client

Functions

- `displayMessage`: Displays a message in the chat container and sends it to the server if necessary

- `displayChatHeader`: Displays the chat header with the user's ID and connection status

## Contributing 

 

Contributions are welcome! Please open a pull request to contribute to the project.

## Issues

If you encounter any issues, please open an issue on GitHub.