Simulador de Sistemas Distribuidos

Proyecto Final - Sistemas Operativos II

🚀 Ver Aplicación en Vivo

👥 Integrantes del Equipo

Desarrollado por Equipo 8 - BUAP|FCC

Nombre	Matrícula
Adolfo Huerta Martínez	202262175
Daniel Hernández Garcia	202261809
Hector Luis Sanchez Marín	202278487
José Fernando Vargas Tecualt	202269605
Jarni Didier González Ortega	202274229

Descripción del Proyecto

Este proyecto es una aplicación web interactiva que simula visualmente dos categorías fundamentales de algoritmos en sistemas distribuidos:

1. Algoritmos de Elección de Líder

Bully Algorithm: Algoritmo agresivo donde el nodo con mayor ID se convierte en líder
Ring Algorithm: Algoritmo basado en anillo donde los mensajes circulan recopilando información

2. Algoritmos de Sincronización de Relojes

Cristian Algorithm: Sincronización cliente-servidor utilizando RTT (Round-Trip Time)
Berkeley Algorithm: Sincronización por promediación coordinada de todos los relojes

La aplicación permite experimentar con diferentes configuraciones, observar el comportamiento paso a paso, y visualizar mensajes entre nodos en tiempo real.

✨ Características Principales

Interfaz de Usuario

✅ Diseño responsivo adaptado para móvil, tablet y desktop
✅ Animaciones fluidas de mensajes entre nodos
✅ Menú hamburguesa para dispositivos móviles
✅ Acordeones desplegables en controles (móvil)

Funcionalidades

✅ Generación de nodos con IDs aleatorios
✅ Simulación paso a paso con controles de reproducción
✅ Velocidad ajustable (0.5x, 1x, 2x)
✅ Logs detallados con timestamps
✅ Estados visuales claros (líder, caído, activo, iniciador)

Simulador de Elección

Selección de iniciador interactiva
Visualización de mensajes ELECTION, OK, RING1, RING2
Identificación clara del líder elegido
Logs con descripción de cada paso

Simulador de Relojes

Servidor/Coordinador visible (ID:0)
Display LED con efecto de brillo
Badges de roles (server, coordinator, client)
Colores de sincronización (verde, amarillo, rojo)
RTT visible en algoritmo Cristian
Valores before→after en logs

Tecnologías Utilizadas

Frontend Framework

React 18.3.1 - Librería de UI con hooks modernos
TypeScript 5.9.3 - Superset tipado de JavaScript
React Router DOM 6.28.0 - Enrutamiento SPA

Build Tools

Vite 7.2.2 - Build tool ultra-rápido con HMR
SWC - Compilador de JavaScript/TypeScript en Rust

Deployment

Netlify - Hosting con CI/CD automático

Algoritmos Implementados

🏆 Bully Algorithm (Elección de Líder)

Concepto: Algoritmo "agresivo" donde el nodo con mayor ID siempre gana la elección.

Pasos del Algoritmo:

Un nodo detecta que el líder ha fallado
El nodo envía mensajes de ELECTION a todos los nodos con ID superior
Si recibe respuestas OK, se detiene (hay nodos superiores activos)
Si no recibe respuestas, se proclama líder
El nuevo líder envía mensajes COORDINATOR a todos

Características:

Simple y eficiente
Requiere conocimiento de todos los IDs
El nodo con mayor ID siempre es el líder

🔄 Ring Algorithm (Elección de Líder)

Concepto: Los nodos están organizados en un anillo lógico, el mensaje circula recopilando información.

Fases del Algoritmo:

Fase 1 - ELECCIÓN:

Nodo iniciador detecta falla del líder
Crea mensaje con su ID y lo envía al siguiente nodo
Cada nodo agrega su ID al mensaje
El mensaje circula por todo el anillo
Cuando regresa al iniciador, contiene todos los IDs activos

Fase 2 - ANUNCIO:

El iniciador determina el líder (ID más alto)
Envía mensaje de anuncio con el ID del líder
El mensaje circula informando a todos
Cada nodo actualiza su conocimiento del líder

Características:

No requiere broadcast
Tolera múltiples iniciadores simultáneos
Requiere estructura de anillo

🕒 Cristian Algorithm (Sincronización de Relojes)

Concepto: Sincronización cliente-servidor basada en Round-Trip Time (RTT).

Pasos del Algoritmo:

Cliente registra tiempo local T1
Cliente envía REQUEST al servidor
Servidor responde con su hora Ts
Cliente recibe respuesta en tiempo T2
Cliente calcula RTT = T2 - T1
Cliente estima tiempo de transmisión = RTT / 2
Cliente ajusta su reloj: Ts + (RTT / 2)

Fórmula de Ajuste:

offsetCliente = (Ts + RTT/2) - horaLocal

Características:

Simple y eficiente
Asume latencias simétricas
Servidor no se ajusta (es la referencia)
Clientes realizan ajustes independientes

⚖️ Berkeley Algorithm (Sincronización de Relojes)

Concepto: Sincronización cooperativa por promediación coordinada.

Pasos del Algoritmo:

Fase 1 - POLL (Recopilación):

Coordinador solicita hora a cada nodo
Cada nodo responde con su hora local

Fase 2 - CÁLCULO:

Coordinador calcula promedio de todas las horas
Coordinador calcula ajuste para cada nodo:
```
ajuste = promedio - horaNodo
```

Fase 3 - DISTRIBUCIÓN:

Coordinador envía ajuste a cada nodo
Cada nodo aplica su ajuste específico

Fase 4 - APLICACIÓN:

Todos los nodos ajustan simultáneamente
Sistema queda sincronizado al promedio

Características:

Democrático (considera todos los relojes)
Coordinador también se ajusta
Elimina valores atípicos
Más robusto que Cristian

Instalación y Configuración

Prerrequisitos

Asegúrate de tener instalado:

Node.js >= 18.0.0
npm >= 9.0.0 o pnpm >= 8.0.0

Clonar el Repositorio

# Clonar el repositorio
git clone https://github.com/AdolfoHMtz/ProjectSO2-simulators.git

# Navegar al directorio
cd proyectoSO

Instalar Dependencias

# Con npm
npm install

# O con pnpm (más rápido)
pnpm install

Ejecutar en Desarrollo

# Iniciar servidor de desarrollo
npm run dev

# La aplicación estará disponible en:
# http://localhost:5173

Compilar para Producción

# Compilar proyecto
npm run build

# Vista previa de la build
npm run preview

📂 Estructura del Proyecto

proyectoSO/
├── public/
│   └── _redirects              # Configuración de Netlify
├── src/
│   ├── assets/                 # Recursos estáticos
│   ├── components/             # Componentes reutilizables
│   │   ├── Layout.tsx          # Header + navegación
│   │   ├── Nodo.tsx            # Nodo visual
│   │   └── Panel.tsx           # Contenedor de secciones
│   ├── pages/                  # Páginas principales
│   │   ├── HomePage.tsx        # Página inicial
│   │   ├── ElectionSimulator.tsx    # Simulador Bully/Ring
│   │   └── ClockSyncSimulator.tsx   # Simulador Cristian/Berkeley
│   ├── styles/                 # CSS modular
│   │   ├── base.css            # Variables y reset
│   │   ├── header.css          # Navegación
│   │   ├── buttons.css         # Botones
│   │   ├── panels.css          # Paneles y canvas
│   │   ├── forms.css           # Inputs y acordeones
│   │   ├── home.css            # Homepage
│   │   ├── canvas.css          # Área de simulación
│   │   ├── nodes.css           # Estilos de nodos
│   │   ├── clocks.css          # Relojes
│   │   ├── messages.css        # Líneas de mensajes
│   │   ├── logs.css            # Registro de eventos
│   │   └── helpers.css         # Utilidades
│   ├── App.tsx                 # Routing principal
│   ├── main.tsx                # Punto de entrada
│   └── index.css               # Importación de estilos
├── eslint.config.js            # Configuración ESLint
├── tsconfig.json               # Configuración TypeScript
├── vite.config.ts              # Configuración Vite
└── package.json                # Dependencias y scripts

Guía de Uso

Simulador de Elección de Líder

Seleccionar Algoritmo: Elige entre Bully o Ring
Generar Nodos: Especifica cantidad (3-12) y genera
Seleccionar Iniciador: Haz clic en "Seleccionar iniciador" y elige un nodo
Iniciar Elección: Presiona "Iniciar elección"
Controlar Simulación: Usa Play ▶️, Pause ⏸️, o Paso ⏭️
Ajustar Velocidad: Cambia entre 0.5x, 1x, 2x
Fallar Nodos: Haz clic en nodos activos para marcarlos como caídos

Simulador de Sincronización de Relojes

Seleccionar Algoritmo: Elige entre Cristian o Berkeley
Configurar Parámetros:
- Nodos: 2-12 (siempre incluye servidor/coordinador)
- Latencia: 10-1000 ms
Generar Relojes: Los nodos tendrán offsets aleatorios (-3000 a +3000 ms)
Iniciar Sincronización: Presiona "Iniciar sincronización"
Observar Proceso: Sigue los pasos en logs y animaciones
Verificar Sincronización: Colores indican estado (verde = sincronizado)

🎨 Paleta de Colores

Color	Uso	Hex
🔵 Azul Principal	Bordes, highlights	`#3c4fe0`
🟣 Morado	Gradientes, líder	`#8c4dff`
⚫ Fondo Oscuro	Background	`#050816`
⚪ Texto Claro	Texto principal	`#f6f7fb`
🟢 Verde	Sincronizado, OK	`#1aa34a`
🔴 Rojo	Desincronizado	`#e74c3c`
🟡 Amarillo	Iniciador, parcial	`#e1b12c`

🌐 Deployment

La aplicación está desplegada en Netlify con las siguientes configuraciones:

Configuración de Build

[build]
  command = "npm run build"
  publish = "dist"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

📚 Documentación del Código

Componentes Principales

`App.tsx`

Configuración de rutas con React Router
3 rutas: / (home), /election, /clocks
Layout común envuelve todas las rutas

`Layout.tsx`

Header con información del proyecto
Navegación con links activos
Menú hamburguesa responsivo (móvil)

`ElectionSimulator.tsx`

1202 líneas completamente documentadas
Implementa algoritmos Bully y Ring
Estados: nodos, acciones, pasoIndex, isPlaying, mensajeActual
Funciones clave: simularBully(), simularRingCompleto(), avanzarPaso()

`ClockSyncSimulator.tsx`

996 líneas completamente documentadas
Implementa algoritmos Cristian y Berkeley
Estados: nodos, acciones, pasoIndex, isPlaying, messageLineData
Funciones clave: simularCristian(), simularBerkeley(), generarRelojes()

`Nodo.tsx`

Componente visual de nodo
Props: id, isLeader, isFailed, isHighlighted, isInitiator
Estados visuales dinámicos
Iconos: 💀 (caído), 👑 (líder)

`Panel.tsx`

Contenedor reutilizable
Props: title, children, className
Renderizado condicional de título

Arquitectura CSS

El proyecto utiliza 13 archivos CSS modulares:

base.css: Variables, reset, responsive base
header.css: Navegación y menú hamburguesa
buttons.css: Estilos de botones con estados
panels.css: Paneles y canvas con scroll
forms.css: Inputs, selects, acordeones
home.css: Homepage y cards
canvas.css: Área de simulación
nodes.css: Nodos con animaciones
clocks.css: Display LED y badges de roles
messages.css: Líneas animadas de mensajes
logs.css: Registro de eventos
helpers.css: Utilidades varias

Name		Name	Last commit message	Last commit date
public		public
src		src
.gitignore		.gitignore
README.md		README.md
eslint.config.js		eslint.config.js
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
tsconfig.app.json		tsconfig.app.json
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
vite.config.ts		vite.config.ts

Latest commit

History

Folders and files

Repository files navigation

Simulador de Sistemas Distribuidos

Proyecto Final - Sistemas Operativos II

🚀 Ver Aplicación en Vivo

👥 Integrantes del Equipo

Descripción del Proyecto

1. Algoritmos de Elección de Líder

2. Algoritmos de Sincronización de Relojes

✨ Características Principales

Interfaz de Usuario

Funcionalidades

Simulador de Elección

Simulador de Relojes

Tecnologías Utilizadas

Frontend Framework

Build Tools

Deployment

Algoritmos Implementados

🏆 Bully Algorithm (Elección de Líder)

🔄 Ring Algorithm (Elección de Líder)

🕒 Cristian Algorithm (Sincronización de Relojes)

⚖️ Berkeley Algorithm (Sincronización de Relojes)

Instalación y Configuración

Prerrequisitos

Clonar el Repositorio

Instalar Dependencias

Ejecutar en Desarrollo

Compilar para Producción

📂 Estructura del Proyecto

Guía de Uso

Simulador de Elección de Líder

Simulador de Sincronización de Relojes

🎨 Paleta de Colores

🌐 Deployment

Configuración de Build

📚 Documentación del Código

Componentes Principales

App.tsx

Layout.tsx

ElectionSimulator.tsx

ClockSyncSimulator.tsx

Nodo.tsx

Panel.tsx

Arquitectura CSS

Gracias

About

Topics

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages

`App.tsx`

`Layout.tsx`

`ElectionSimulator.tsx`

`ClockSyncSimulator.tsx`

`Nodo.tsx`

`Panel.tsx`