Bereiten Sie zuerst die Verbindung und Chat-Flow-Zuordnung
vor. Dieses vollständige Grundbeispiel lädt den SignalR-Client von Ihrer
Website. Legen Sie dessen Datei unter /js/signalr.min.js ab und ersetzen
Sie Hub-Adresse, Wissensgebiet und Sprache.
<label>Name <input id="customerName" maxlength="120" required></label>
<button id="startChat" type="button">Chat starten</button>
<p id="chatStatus" role="status">Noch nicht verbunden</p>
<ul id="messages" aria-live="polite"></ul>
<label>Nachricht <input id="message" maxlength="4000" disabled></label>
<button id="sendMessage" type="button" disabled>Senden</button>
<button id="endChat" type="button" disabled>Chat beenden</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 = `Chat-Zustand: ${state}`;
const active = [1, 2, 3, 14].includes(state);
message.disabled = !active;
send.disabled = !active;
});
chat.on("OnPositionChangedAsync", (position) => {
status.textContent = `Position im Wartefeld: ${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 = "Verbindung beendet. Ein neuer Chat muss ausdrücklich gestartet werden.";
});
start.addEventListener("click", async () => {
const name = document.getElementById("customerName").value.trim();
if (!name) return;
start.disabled = true;
try {
await chat.start();
status.textContent = "Chat angefordert; auf die Verarbeitung warten.";
const accepted = await chat.invoke("Register", name, "Support", "de-DE");
if (!accepted) throw new Error("Chat-Anforderung konnte nicht übermittelt werden.");
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>
Die Längenbegrenzungen im Formular sind Beispiele für Ihre Website und keine vom Hub zugesicherten Produktgrenzen. Das Beispiel zeigt empfangene Nachrichten als Text und übernimmt keine HTML-Formatierung.
Der Button bleibt nach einem begonnenen Chat gesperrt, damit dieselbe Sitzung nicht mehrfach registriert wird. Für eine produktive Website ergänzen Sie eine ausdrückliche Funktion zum Start einer neuen Sitzung sowie verständliche Texte für die Zustände Ihres Flows. Siehe chatHub-Referenz.