---
# System prepended metadata

title: РГЗ

---

[TOC]
# РГЗ
## Task Overview
Створити мульти-клієнт-серверний додаток з візуалізацією поточної топології мережі та стану з'єднань, що використовує хостинг replit.com
з реалізацією функціоналу за допомогою API Socket.IO

Додаток має забезпечувати

1) передачу повідомлень від вашого клієнта будь-якому іншому ([unicasting](https://en.wikipedia.org/wiki/Unicast))
2) передачу повідомлень від вашого клієнта всім іншим ([broadcasting](https://en.wikipedia.org/wiki/Broadcast,_unknown-unicast_and_multicast_traffic))
 Повідомлення мають бути двох типів
  * текстові повідомлення
  * зображення

Під час передачі даних додаток повинен контролювати поточну  [затримку поширення (propagation delay)](https://hackmd.io/y40T210qQ5-2pqQYJ6j09A#:~:text=%D0%97%D0%B0%D1%82%D1%80%D0%B8%D0%BC%D0%BA%D0%B0%20%D0%BF%D0%BE%D1%88%D0%B8%D1%80%D0%B5%D0%BD%D0%BD%D1%8F%20%E2%80%93,)) від клієнта $\delta_{i}$ і пропускну здатність $B_{i}$ канала клієнта (де $i$ - номер клієнта, що бере участь у поточній комунікації) та візуалізувати їх на діаграмі товщиною ребер графа діаграми та розміром вузлів.

## General Information

**Bandwidth:** Bandwidth refers to the maximum rate of data transfer across a network or communication channel. It is typically measured in bits per second (bps). Higher bandwidth allows for faster data transmission and can support more simultaneous connections or higher data volumes.

**Propagation Delay:** Propagation delay is the time it takes for a signal to travel from the sender to the receiver in a communication channel. It includes the time for the signal to propagate through the medium (e.g., cables, fiber optics) as well as any processing delays in routers or switches along the path. Propagation delay is influenced by the physical distance between sender and receiver, the speed of light in the medium, and the processing capabilities of intermediate devices.


## Multi-Client-Server Application for Network Topology Visualization


### Testing Environment:

For testing the application, multiple browsers with VPNs were employed to simulate different network conditions and geographic locations.

### Application Overview


![image](https://hackmd.io/_uploads/B1WPM8bWR.png)
*Initial page with several users joined, a new unique id is assigned to each user*

![image](https://hackmd.io/_uploads/Hk3BM8--0.png)
*Closer view to the diagram of the server and clients*


We can send a broadcast message to all clients using the following input form:
![image](https://hackmd.io/_uploads/H1SKGLWbC.png)

The diagram will be updated, bandwidth and delay values will be shown for the user who sends the massage and all users will see a new message:
![image](https://hackmd.io/_uploads/HkjsG8WbR.png)


It is possible to send a private message to the chosen user:
![image](https://hackmd.io/_uploads/H1oAMI-bC.png)

and only the recipient will see it:
![image](https://hackmd.io/_uploads/HkNl78-ZA.png)

while others will see only broadcast messages:
![image](https://hackmd.io/_uploads/SkoHQLZb0.png)

It is also possible to send pictures:
![image](https://hackmd.io/_uploads/BkLsXUb-C.png)

Hovering over a node on the diagram reveals the client's IP address:
![image](https://hackmd.io/_uploads/HJ0MELW-A.png)
![image](https://hackmd.io/_uploads/H1-XNLWb0.png)

Additionally, displaying the IPs of all clients in the server's logs provides useful information for monitoring and managing network activity: 
![image](https://hackmd.io/_uploads/ryLPSIWbR.png)


#### [**Link to the full code on replit**](https://replit.com/@Natan-Lieonidov/RGZClient-Server) --  you can test it yourself!

### Implementation Details

- **Propagation Delay Control:** The application actively monitored the propagation delay ($\delta_i$) from each client and their channel's bandwidth ($B_i$). These metrics were visualized on the network diagram.
  
- **Visualization:**
   - **Edge Scaling:** The thickness of communication edges (representing channels) was computed using the formula:
     $$ edges.scaling_i = \ln(B_{i}+\sqrt{B_{i}^2+1})= \text{arsinh}(B_{i}) $$
    
        ```javascript
        function arcsinh(x) {
          return Math.log(x + Math.sqrt(x * x + 1));
        }
        ```
    - **Node Scaling:** The size of communication nodes (representing clients) was computed using the formula:
     $$ node.scaling_i = \frac {200}{10+\delta_i/5} $$
    
        ```javascript
        function node_scale(d) {
          200 / (10 + d / 5);
        }
        ```
     
  
- **Client IP Differentiation:** Clients with different IP addresses were represented with nodes of different colors, while clients with the same IP address were assigned identical node colors.


### Used Libraries

The project utilized the following Node.js libraries:

- **express (^4.19.2):** Express is a fast, unopinionated, minimalist web framework for Node.js. It provides a robust set of features for web and mobile applications.
  
- **socket.io (^4.7.5):** Socket.IO enables real-time bidirectional event-based communication between web clients and servers. It simplifies the development of interactive web applications that require real-time updates or messaging functionality.





## Conclusion

The development of the multi-client server application with network visualization proved successful, meeting the project requirements effectively. The integration of Socket.IO API facilitated real-time communication and data transfer among clients, enhancing the application's overall functionality and user experience. Additionally, the visualization of network topology and connection statuses provided valuable insights into the network's performance and facilitated better management and troubleshooting.
