87 lines
2.6 KiB
HTML
87 lines
2.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Test WebSocket Match</title>
|
|
<style>
|
|
#messageArea {
|
|
width: 100%;
|
|
height: 300px;
|
|
border: 1px solid #ddd;
|
|
overflow-y: auto;
|
|
padding: 10px;
|
|
margin-bottom: 10px;
|
|
font-family: monospace;
|
|
}
|
|
input, button {
|
|
padding: 8px;
|
|
margin: 4px;
|
|
}
|
|
.input-group {
|
|
margin-bottom: 10px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<h2>Test WebSocket Match</h2>
|
|
|
|
<div id="messageArea">Connexion...</div>
|
|
|
|
<div class="input-group">
|
|
<input type="number" id="matchId" placeholder="Match ID">
|
|
<input type="number" id="player1Id" placeholder="Joueur 1 ID">
|
|
<input type="number" id="player2Id" placeholder="Joueur 2 ID">
|
|
<input type="number" id="refereeId" placeholder="Arbitre ID">
|
|
</div>
|
|
|
|
<div class="input-group">
|
|
<input type="number" id="score1" placeholder="Score Joueur 1">
|
|
<input type="number" id="score2" placeholder="Score Joueur 2">
|
|
<input type="datetime-local" id="matchDate">
|
|
</div>
|
|
|
|
<button onclick="sendMatch()">Envoyer Match</button>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/sockjs-client/dist/sockjs.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.min.js"></script>
|
|
|
|
<script>
|
|
const stompClient = Stomp.over(new SockJS('/ws/players-app'));
|
|
const channel = "/ws/topic/player";
|
|
|
|
stompClient.connect({}, function () {
|
|
stompClient.subscribe(channel, function (message) {
|
|
const msg = JSON.parse(message.body);
|
|
console.log("Match reçu :", msg);
|
|
displayMessage(msg);
|
|
});
|
|
document.getElementById('messageArea').textContent = 'Connecté au WebSocket';
|
|
}, function (error) {
|
|
document.getElementById('messageArea').textContent = 'Erreur WebSocket : ' + error;
|
|
});
|
|
|
|
function sendMatch() {
|
|
const match = {
|
|
matchId: parseInt(document.getElementById("matchId").value),
|
|
player1Id: parseInt(document.getElementById("player1Id").value),
|
|
player2Id: parseInt(document.getElementById("player2Id").value),
|
|
refereeId: parseInt(document.getElementById("refereeId").value),
|
|
score1: parseInt(document.getElementById("score1").value),
|
|
score2: parseInt(document.getElementById("score2").value),
|
|
date: document.getElementById("matchDate").value
|
|
};
|
|
|
|
stompClient.send("/ws/matches/add", {}, JSON.stringify(match));
|
|
}
|
|
|
|
function displayMessage(match) {
|
|
const area = document.getElementById("messageArea");
|
|
const div = document.createElement("div");
|
|
div.textContent = `Match ${match.matchId}: ${match.player1Id} (${match.score1}) vs ${match.player2Id} (${match.score2})`;
|
|
area.appendChild(div);
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|