Update script.js

Author: zorginkopen

script.js

@@ -1,62 +1,36 @@
-function appendMessage(sender, message) {
-  const chat = document.getElementById("chat");
-  const msg = document.createElement("div");
-
-  msg.classList.add("message");
-  msg.classList.add(sender === "user" ? "user-message" : "agent-message");
-  msg.textContent = message;
-
-  chat.appendChild(msg);
-  chat.scrollTop = chat.scrollHeight;
-}
-
 async function startSignalR() {
-  try {
-    const response = await fetch("https://chatproxy.azurewebsites.net/api/negotiate", {
-      method: "POST"
-    });
-
-    if (!response.ok) {
-      throw new Error(`Negotiate failed: ${response.status}`);
+    try {
+        // Ophalen van connectionInfo vanaf jouw negotiate endpoint
+        const response = await fetch("https://chatproxy.azurewebsites.net/api/negotiate", {
+            method: "POST"
+        });
+
+        if (!response.ok) {
+            throw new Error(`Negotiate failed: ${response.status}`);
+        }
+
+        const connectionInfo = await response.json();
+
+        // Bouw de echte SignalR verbinding naar Azure SignalR
+        const connection = new signalR.HubConnectionBuilder()
+            .withUrl("https://chatproxysignalr.service.signalr.net/client/?hub=chat", {
+                accessTokenFactory: () => connectionInfo.accessToken
+            })
+            .configureLogging(signalR.LogLevel.Information)
+            .build();
+
+        // Eventhandler
+        connection.on("newMessage", message => {
+            appendMessage("assistant", message);
+        });
+
+        // Start verbinding
+        await connection.start();
+        console.log("✅ Verbonden met SignalR hub");
+    } catch (err) {
+        console.error("❌ SignalR fout:", err);
+        appendMessage("assistant", "⚠️ Verbinden met SignalR is mislukt.");
     }
-
-    const connectionInfo = await response.json();
-
-    console.log("🔗 Verbinding URL:", connectionInfo.url);
-    console.log("🔑 Token start:", connectionInfo.accessToken?.slice(0, 30) + "...");
-
-    const connection = new signalR.HubConnectionBuilder()
-      .withUrl(connectionInfo.url, {
-        accessTokenFactory: () => connectionInfo.accessToken,
-        skipNegotiation: true,
-        transport: signalR.HttpTransportType.LongPolling
-      })
-      .configureLogging(signalR.LogLevel.Information)
-      .build();
-
-    connection.on("newMessage", message => {
-      appendMessage("assistant", message);
-    });
-
-    await connection.start();
-    console.log("✅ Verbonden met SignalR hub");
-
-  } catch (err) {
-    console.error("❌ SignalR fout:", err);
-    appendMessage("assistant", "⚠️ Verbinden met SignalR is mislukt.");
-  }
 }
 
-document.getElementById("input-form").addEventListener("submit", async event => {
-  event.preventDefault();
-  const inputField = document.getElementById("user-input");
-  const message = inputField.value.trim();
-  if (message === "") return;
-
-  appendMessage("user", message);
-  inputField.value = "";
-
-  // Hier kun je optioneel het bericht doorsturen naar je backend met fetch()
-});
-
 startSignalR();