📡 Chat en Tiempo Real con WebSockets y Spring Boot

📌 Descripción

Este es un chat en tiempo real implementado con Spring Boot y WebSockets, que permite la comunicación instantánea entre múltiples usuarios.

Cada usuario puede ingresar su nombre de usuario y enviar mensajes que se propagan a todos los clientes conectados en tiempo real.

El frontend está desarrollado en HTML + JavaScript, con el uso de SockJS y Stomp.js para gestionar las conexiones WebSocket.

---

🚀 Tecnologías Utilizadas

Este proyecto utiliza las siguientes tecnologías:

📌 Backend (Java + Spring Boot)

• Spring Boot 3+
• Spring WebSocket (STOMP)
• Maven
• Java 17+

🎨 Frontend (HTML + JavaScript)

• SockJS (para conexiones WebSocket)
• Stomp.js (para manejar mensajes en WebSockets)
• CSS (para estilizar el chat)

---

📡 ¿Qué son los WebSockets?

Los WebSockets son un protocolo de comunicación que permite una conexión persistente y bidireccional entre un cliente y un servidor.

A diferencia de HTTP (que sigue un modelo solicitud-respuesta), WebSockets permiten que el servidor envíe mensajes al cliente en cualquier momento, sin necesidad de que el cliente realice una nueva solicitud.

📌 ¿Cómo funcionan los WebSockets en este proyecto?

1. El cliente se conecta al servidor WebSocket de Spring Boot mediante SockJS.
2. El cliente se suscribe a un canal /topic/chat donde recibirá mensajes.
3. Cuando un usuario envía un mensaje, este se envía a /app/chat, donde el backend lo recibe y lo retransmite a todos los clientes conectados.
4. Todos los clientes reciben el mensaje en tiempo real y lo muestran en la interfaz.

---

🏗️ Estructura del Proyecto

📂 Proyecto
├── 📁 src/main/java/org/cexpositoce/websocketexample/
│ ├── 📁 config/
│ │ ├── WebSocketConfig.java (Configuración del WebSocket en Spring Boot)
│ ├── 📁 controller/
│ │ ├── ChatController.java (Maneja los mensajes entrantes y los retransmite)
│ ├── 📁 model/
│ │ ├── ChatMessage.java (Modelo de los mensajes enviados por WebSocket)
│ ├── WebsocketExampleApplication.java (Clase principal para ejecutar Spring Boot)
│
├── 📂 src/main/resources/static/
│ ├── chat.html (Interfaz del chat con JavaScript y CSS)
│
├── pom.xml (Dependencias de Maven)
├── README.md (Este archivo 😃)

---

📝 Explicación del Código

1️⃣ Configuración de WebSockets (📄 WebSocketConfig.java)

En este archivo habilitamos el soporte para WebSockets en Spring Boot.

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {

    @Override
    public void configureMessageBroker(MessageBrokerRegistry config) {
        config.enableSimpleBroker("/topic");  // Canal donde se enviarán mensajes
        config.setApplicationDestinationPrefixes("/app");  // Prefijo para los mensajes entrantes
    }

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/chat-websocket") // Endpoint WebSocket
                .setAllowedOriginPatterns("*")  // Permitir conexiones desde cualquier origen
                .withSockJS(); // Permitir compatibilidad con clientes sin WebSocket nativo
    }
}

📌 Explicación

• /chat-websocket → Es el endpoint al que los clientes se conectan.
• STOMP → Protocolo usado para enviar mensajes sobre WebSockets.
• /topic/chat → Canal donde se publican los mensajes para los clientes.

---

2️⃣ Controlador de Mensajes (📄 ChatController.java)

Este controlador recibe los mensajes enviados por los clientes y los retransmite a todos los usuarios conectados.

@Controller
public class ChatController {

    @MessageMapping("/chat") // Mensajes entrantes desde /app/chat
    @SendTo("/topic/chat") // Se envían a todos los clientes suscritos a /topic/chat
    public ChatMessage sendMessage(@Payload ChatMessage chatMessage) {
        System.out.println("Mensaje recibido de " + chatMessage.getUsername() + ": " + chatMessage.getMessage());
        return chatMessage;
    }
}

📌 Explicación

• @MessageMapping("/chat") → Captura los mensajes enviados a /app/chat.
• @SendTo("/topic/chat") → Retransmite el mensaje a todos los clientes conectados.

---

3️⃣ Cliente WebSocket (Frontend en chat.html)

var socket = new SockJS('http://localhost:8080/chat-websocket');
var stompClient = Stomp.over(socket);

stompClient.connect({}, function (frame) {
    console.log("Conectado: " + frame);

    stompClient.subscribe('/topic/chat', function (response) {
        var chatMessage = JSON.parse(response.body);
        displayMessage(chatMessage.username, chatMessage.message);
    });
});

function sendMessage() {
    if (username === "") {
        username = document.getElementById("username").value;
        if (username.trim() === "") {
            alert("Por favor, ingresa un nombre antes de enviar mensajes.");
            return;
        }
    }

    var message = document.getElementById("message").value;
    if (message.trim() === "") return;

    var chatMessage = { username: username, message: message };
    stompClient.send("/app/chat", {}, JSON.stringify(chatMessage));

    document.getElementById("message").value = "";
}

📌 Explicación

• SockJS se conecta a /chat-websocket.
• El usuario se suscribe a /topic/chat para recibir mensajes.
• Cuando un usuario envía un mensaje, este se envía al servidor y se retransmite a todos.

---

🚀 Cómo Ejecutar el Proyecto

1️⃣ Clonar el repositorio

git clone https://github.com/tuusuario/chat-websocket.git
cd chat-websocket

2️⃣ Compilar y ejecutar Spring Boot

mvn spring-boot:run

3️⃣ Abrir el cliente en el navegador

http://localhost:8080/chat.html

4️⃣ Probar el chat en varias pestañas con diferentes nombres de usuario.

---

👨‍💻 Autor

📌 Creador: Carlos Exposito (Frody)
📌 GitHub: FirstOnDie
📌 Contacto: LinkedIn