Préparez d’abord la connexion et l’affectation du flow de chat.
Cet exemple de base complet charge le client SignalR depuis votre site.
Placez son fichier dans /js/signalr.min.js et remplacez l’adresse du hub,
la compétence et la langue.
<label>Nom <input id="customerName" maxlength="120" required></label>
<button id="startChat" type="button">Démarrer le chat</button>
<p id="chatStatus" role="status">Pas encore connecté</p>
<ul id="messages" aria-live="polite"></ul>
<label>Message <input id="message" maxlength="4000" disabled></label>
<button id="sendMessage" type="button" disabled>Envoyer</button>
<button id="endChat" type="button" disabled>Terminer le chat</button>
<script src="/js/signalr.min.js"></script>
<script type="module">
const status = document.getElementById("chatStatus");
const start = document.getElementById("startChat");
const send = document.getElementById("sendMessage");
const end = document.getElementById("endChat");
const message = document.getElementById("message");
const chat = new signalR.HubConnectionBuilder()
.withUrl("https://kontakt.example.org/chatHub")
.build();
function disableSending() {
message.disabled = true;
send.disabled = true;
}
chat.on("OnStateChangedAsync", (state) => {
status.textContent = `État du chat : ${state}`;
const active = [1, 2, 3, 14].includes(state);
message.disabled = !active;
send.disabled = !active;
});
chat.on("OnPositionChangedAsync", (position) => {
status.textContent = `Position dans la file : ${position}`;
});
chat.on("AddMessageAsync", (participant, htmlMessage) => {
const parsed = new DOMParser().parseFromString(htmlMessage, "text/html");
const item = document.createElement("li");
item.textContent = `${participant}: ${parsed.body.textContent ?? ""}`;
document.getElementById("messages").append(item);
});
chat.onclose(() => {
disableSending();
end.disabled = true;
status.textContent = "Connexion fermée. Démarrez explicitement un nouveau chat.";
});
start.addEventListener("click", async () => {
const name = document.getElementById("customerName").value.trim();
if (!name) return;
start.disabled = true;
try {
await chat.start();
status.textContent = "Chat demandé ; en attente de traitement.";
const accepted = await chat.invoke("Register", name, "Support", "de-DE");
if (!accepted) throw new Error("La demande de chat ne peut pas être transmise.");
end.disabled = false;
} catch (error) {
await chat.stop();
status.textContent = error.message;
start.disabled = false;
}
});
send.addEventListener("click", async () => {
const text = message.value.trim();
if (!text) return;
send.disabled = true;
try {
await chat.invoke("AddMessage", text);
message.value = "";
} catch (error) {
status.textContent = error.message;
} finally {
if (!message.disabled) send.disabled = false;
}
});
end.addEventListener("click", async () => {
disableSending();
await chat.stop();
});
</script>
Les limites de longueur du formulaire sont des exemples pour votre site, pas des limites produit garanties par le hub. L’exemple affiche les messages reçus sous forme de texte sans conserver la mise en forme HTML.
Le bouton reste désactivé après le démarrage pour éviter l’enregistrement multiple d’une même session. Pour un site en production, ajoutez une fonction explicite de démarrage d’une nouvelle session et des textes compréhensibles pour les états de votre flow. Voir la référence chatHub.