https://github.com/cacybernetic/socket_monitoring

Monitors and visualizes live socket connections and data flow. It provides instant updates on connection status, message traffic, and server performance using WebSockets. The dashboard offers connection logs and alerts to help developers track and debug socket activities efficiently.
https://github.com/cacybernetic/socket_monitoring

monitor monitoring socket socket-io socket-tester socket-testing sockets tester wbsocket web web-socket web-sockets

Last synced: 12 days ago
JSON representation

Monitors and visualizes live socket connections and data flow. It provides instant updates on connection status, message traffic, and server performance using WebSockets. The dashboard offers connection logs and alerts to help developers track and debug socket activities efficiently.

• Host: GitHub
• URL: https://github.com/cacybernetic/socket_monitoring
• Owner: cacybernetic
• License: mit
• Created: 2025-11-24T00:42:15.000Z (7 months ago)
• Default Branch: master
• Last Pushed: 2025-11-24T01:58:30.000Z (7 months ago)
• Last Synced: 2025-11-24T06:43:35.606Z (7 months ago)
• Topics: monitor, monitoring, socket, socket-io, socket-tester, socket-testing, sockets, tester, wbsocket, web, web-socket, web-sockets
• Language: TypeScript
• Homepage: https://cacybernetic.github.io/socket_monitoring/
• Size: 6.15 MB
• Stars: 1
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Socket Monitoring

![Monitoring](https://img.shields.io/badge/first%20tag-033546.svg?style=for-the-badge)

![WebSocket](https://img.shields.io/badge/second%20tag-B2D7E3?style=for-the-badge)

![Monitor](https://img.shields.io/badge/third%20tag-262626?style=for-the-badge)

![Tester](https://img.shields.io/badge/fourth%20tag-FCFCFC?style=for-the-badge)

Monitors and visualizes live socket connections and data flow. It provides

instant updates on connection status, message traffic, and server

performance using WebSockets. The dashboard offers connection logs

and alerts to help developers track and debug socket activities

efficiently.

## Table of contents

1. [Access link](#link)

2. [Final result](#result)

3. [Project installation](#install)

    1. [Nodejs installation](#node-install)

    2. [Yarn installation](#yarn-install)

    3. [Sources code cloning](#cloning)

    4. [Dependencies installation](#dev-install)

4. [Project execution](#running)

## Access link 

The project is already hosted on web and can be accessible through

the link below :

- https://cacybernetic.github.io/socket_monitoring/

## Final result 

This is the final result of the project :



![First render](./public/assets/render/render_1.webp)

![Second render](./public/assets/render/render_2.webp)

![Third render](./public/assets/render/render_3.webp)

![Fourth render](./public/assets/render/render_4.webp)

## Project installation 

This project uses Vite

bundle as javascript server + React

 with TypeScript and

Chakra UI. Before run the project,

you must install some dependencies before.

### Nodejs installation 

⚠️ The command line below will only work on Linux :

```sh

sudo apt install curl;\

curl https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash;\

source ~/.bashrc;\

nvm --version;\

nvm install --lts;\

node --version

```

To install NodeJs on Windows, you

can follow the video below :

[![NodeJs tutorial video](https://img.youtube.com/vi/4FAtFwKVhn0/maxresdefault.jpg)](https://youtu.be/4FAtFwKVhn0)

To install NodeJs on MacOS, you

can follow the video below :

[![NodeJs tutorial video](https://img.youtube.com/vi/l53HbzbSwxQ/maxresdefault.jpg)](https://youtu.be/l53HbzbSwxQ)

### Yarn installation 

Make sure to install the lastest stable version of

yarn.

To install yarn on linux, just

open your terminal (`CTRL + ALT + T`) and run the following command

line below :

```sh

npm install yarn --global

```

To install yarn on Windows you can

follow the video below :

[![Yarn tutorial video](https://img.youtube.com/vi/APyA8rax2Wk/maxresdefault.jpg)](https://youtu.be/APyA8rax2Wk)

To install yarn on MacOS you can

follow the video below :

[![Yarn tutorial video](https://img.youtube.com/vi/-4iEQKabTO4/maxresdefault.jpg)](https://youtu.be/-4iEQKabTO4)

You can install the latest stable version of 

yarn only at the project root folder by running the command

line below :

```sh

yarn set version stable

```

It's recommended to use 4.5.1 

yarn version to avoid any troubleshooting while installing project

dependencies.

NB : It's possible to install project dependencies using

npm or pnpm command. In this case, you must remove `yarn.lock`,

`.yarnrc.yml`, `.yarn` and clear your favorite package manager caches

before perform any dependencies installation.

### Sources code cloning 

```sh

git clone git@github.com:cacybernetic/socket_monitoring.git socket_monitoring/

```

### Dependencies installation 

Before start project dependencies installation, you must remove `yarn.lock`

file from the project root and clear 

yarn caches with `yarn cache clean` command. 
Go to the root

folder of the project sources and run :

```sh

yarn install

```

📔Note : Vite

and React will be installed

automatically after running the command line above.

## Project execution 

Go to the root folder of the project and run :

```sh

yarn run dev

```

Then, open your favorite browser and tap on the search bar, the following

link below :

```sh

http://localhost:5100

```

Enjoy :)