Mise en place du backend

1. Importation des dépendances

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>

2. Configuraton du serveur WebSocket

Fichier de configuration WebSocketConfig

package com.example.websocketapp.configuration;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;

@Configuration
public class ConfigurationWebSocket {

    @Bean
    public ServerEndpointExporter exporter() {
        return new ServerEndpointExporter();
    }
}

Serveur WebSocket

package com.example.websocketapp.serveur;

import org.springframework.stereotype.Component;
import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.concurrent.CopyOnWriteArraySet;

@ServerEndpoint("/ws/point/{utilisateur}")
@Component
public class ServeurWebSocket {

    private static final CopyOnWriteArraySet<ServeurWebSocket> connexions = new CopyOnWriteArraySet<>();
    private Session session;
    private String identifiantUtilisateur = "";

    @OnOpen
    public void ouvrir(Session session, @PathParam("utilisateur") String utilisateur) {
        this.identifiantUtilisateur = utilisateur;
        this.session = session;
        connexions.add(this);
        envoyerMessage("Connexion établie");
    }

    @OnClose
    public void fermer() {
        connexions.remove(this);
    }

    @OnMessage
    public void recevoir(String message, Session session) {
        System.out.println("Message reçu de [" + message + "]");
    }

    @OnError
    public void erreur(Session session, Throwable erreur) {
        erreur.printStackTrace();
    }

    public void envoyerMessage(String message) {
        try {
            if (this.session != null) {
                this.session.getBasicRemote().sendText(message);
            }
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    public static void envoyerAUtilisateur(String utilisateur, String message) {
        for (ServeurWebSocket connexion : connexions) {
            if (connexion.identifiantUtilisateur.equals(utilisateur)) {
                connexion.envoyerMessage(message);
            }
        }
    }
}

Contrôleur pour tester l'envoi de messages

@GetMapping("/testenvoi")
public String envoyerMessage(String identifiant) {
    ServeurWebSocket.envoyerAUtilisateur(identifiant, "Message du serveur");
    return "succès";
}

Mise en place du frontend

Composant Vue.js

<template>
  <div class="websocket-container">
    <button @click="transmettreMessage('Test')">Envoyer</button>
    <div v-for="(msg, index) in listeMessages" :key="index">
      {{ msg }}
    </div>
  </div>
</template>
<script>
export default {
  name: 'ComposantWebSocket',
  data() {
    return {
      listeMessages: [],
      socket: null
    };
  },
  mounted() {
    this.établirConnexion();
  },
  beforeDestroy() {
    if (this.socket) {
      this.socket.close();
    }
  },
  methods: {
    établirConnexion() {
      const url = 'ws://localhost:8080/ws/point/utilisateur1';
      if (typeof WebSocket !== 'undefined') {
        this.socket = new WebSocket(url);
        this.socket.onopen = this.ouverture;
        this.socket.onmessage = this.receptionMessage;
        this.socket.onerror = this.erreur;
        this.socket.onclose = this.fermeture;
      }
    },
    ouverture() {
      this.transmettreMessage('Connexion réussie');
    },
    erreur() {
      console.log('Échec de la connexion');
    },
    fermeture() {
      console.log('Connexion fermée');
    },
    receptionMessage(event) {
      this.listeMessages.push(event.data);
    },
    transmettreMessage(texte) {
      if (this.socket) {
        this.socket.send(texte);
      }
    }
  }
};
</script>

Pour tester, appelez le point de terminaison du contrôleur avec un identifiant utilisateur pour envoyer un message au frontend via WebSocket.