jpe-controle/FencerJudgeBack/src/main/kotlin/fr/teamflash/fencerjudgeback/websocket

WebSocket Implementation for FencerJudge

This document explains how to use the WebSocket functionality in the FencerJudge application for real-time match updates.

Overview

The WebSocket implementation allows for real-time updates of match information, including:

• Match creation
• Score updates
• Match completion
• Match cancellation

WebSocket Endpoints

Connection Endpoint

ws://localhost:8080/ws

The WebSocket endpoint supports SockJS for fallback in browsers that don't support WebSockets natively.

Message Topics

Subscribe to Match Updates

To receive real-time match updates, subscribe to:

/topic/match.updates

Send Match Updates

To send match updates from the client to the server:

/app/match.update

Message Format

Match update messages use the following JSON format:

{
  "matchId": 1,
  "player1Id": 101,
  "player2Id": 102,
  "refereeId": 201,
  "score1": 5,
  "score2": 3,
  "date": "2023-06-01",
  "type": "SCORE_UPDATE"
}

The type field can have the following values:

• SCORE_UPDATE: When a match score is updated
• MATCH_START: When a new match is created
• MATCH_END: When a match is completed
• MATCH_CANCEL: When a match is cancelled

Integration with REST API

The WebSocket functionality is integrated with the REST API. Any changes made through the REST endpoints will automatically trigger WebSocket messages to all connected clients.

REST endpoints:

• GET /api/matches: Get all matches
• GET /api/matches/{id}: Get a match by ID
• POST /api/matches: Create a new match (triggers MATCH_START WebSocket message)
• PUT /api/matches/{id}: Update a match (triggers SCORE_UPDATE WebSocket message)
• PATCH /api/matches/{id}/score: Update just the score (triggers SCORE_UPDATE WebSocket message)
• DELETE /api/matches/{id}: Delete a match (triggers MATCH_CANCEL WebSocket message)

Client-Side Example (JavaScript)

// Using SockJS and STOMP client
import SockJS from 'sockjs-client';
import { Client } from '@stomp/stompjs';

// Create a new STOMP client
const socket = new SockJS('http://localhost:8080/ws');
const stompClient = new Client({
  webSocketFactory: () => socket,
  debug: (str) => console.log(str)
});

// Connect to the WebSocket server
stompClient.activate();

// Subscribe to match updates
stompClient.onConnect = (frame) => {
  console.log('Connected to WebSocket');
  
  // Subscribe to match updates
  stompClient.subscribe('/topic/match.updates', (message) => {
    const matchUpdate = JSON.parse(message.body);
    console.log('Received match update:', matchUpdate);
    
    // Handle the update in your application
    // e.g., update UI, play sound, etc.
  });
};

// Send a match update (e.g., when a referee updates a score)
function sendMatchUpdate(matchId, score1, score2) {
  if (stompClient.connected) {
    stompClient.publish({
      destination: '/app/match.update',
      body: JSON.stringify({
        matchId: matchId,
        score1: score1,
        score2: score2,
        type: 'SCORE_UPDATE'
      })
    });
  }
}

Security Considerations

The WebSocket endpoint is currently configured to allow connections from any origin (*). For production environments, this should be restricted to specific allowed origins.