107 lines
4.1 KiB
JavaScript
107 lines
4.1 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function () {
|
|
// Create connection to the hub
|
|
const connection = new signalR.HubConnectionBuilder()
|
|
.withUrl("/notificationHub")
|
|
.configureLogging(signalR.LogLevel.Error)
|
|
.withAutomaticReconnect()
|
|
.build();
|
|
|
|
// Get DOM elements
|
|
const sendButton = document.getElementById("sendButton");
|
|
const joinGroupButton = document.getElementById("joinGroupButton");
|
|
const sendToGroupButton = document.getElementById("sendToGroupButton");
|
|
const userInput = document.getElementById("userInput");
|
|
const messageInput = document.getElementById("messageInput");
|
|
const groupInput = document.getElementById("groupInput");
|
|
const messagesList = document.getElementById("messagesList");
|
|
|
|
// Handle receiving messages
|
|
connection.on("ReceiveMessage", function (user, message) {
|
|
const li = document.createElement("li");
|
|
li.className = "message";
|
|
|
|
const userSpan = document.createElement("span");
|
|
userSpan.className = "user";
|
|
userSpan.textContent = user + ": ";
|
|
|
|
const messageText = document.createTextNode(message);
|
|
|
|
li.appendChild(userSpan);
|
|
li.appendChild(messageText);
|
|
messagesList.insertBefore(li, messagesList.firstChild);
|
|
});
|
|
|
|
// Handle user connection events
|
|
connection.on("UserConnected", function (connectionId) {
|
|
const li = document.createElement("li");
|
|
li.className = "message";
|
|
li.textContent = `User connected: ${connectionId}`;
|
|
messagesList.insertBefore(li, messagesList.firstChild);
|
|
});
|
|
|
|
connection.on("UserDisconnected", function (connectionId) {
|
|
const li = document.createElement("li");
|
|
li.className = "message";
|
|
li.textContent = `User disconnected: ${connectionId}`;
|
|
messagesList.insertBefore(li, messagesList.firstChild);
|
|
});
|
|
|
|
// Start the connection
|
|
connection.start()
|
|
.then(function () {
|
|
// console.log("SignalR Connected!");
|
|
|
|
// Add send message functionality
|
|
sendButton.addEventListener("click", function (event) {
|
|
const user = userInput.value || "Anonymous";
|
|
const message = messageInput.value;
|
|
|
|
if (message) {
|
|
connection.invoke("SendMessage", user, message)
|
|
.catch(function (err) {
|
|
console.error(err.toString());
|
|
});
|
|
messageInput.value = "";
|
|
}
|
|
event.preventDefault();
|
|
});
|
|
|
|
// Add join group functionality
|
|
joinGroupButton.addEventListener("click", function (event) {
|
|
const groupName = groupInput.value;
|
|
|
|
if (groupName) {
|
|
connection.invoke("JoinGroup", groupName)
|
|
.then(function () {
|
|
const li = document.createElement("li");
|
|
li.className = "message";
|
|
li.textContent = `Joined group: ${groupName}`;
|
|
messagesList.insertBefore(li, messagesList.firstChild);
|
|
})
|
|
.catch(function (err) {
|
|
console.error(err.toString());
|
|
});
|
|
}
|
|
event.preventDefault();
|
|
});
|
|
|
|
// Add send to group functionality
|
|
sendToGroupButton.addEventListener("click", function (event) {
|
|
const user = userInput.value || "Anonymous";
|
|
const message = messageInput.value;
|
|
const groupName = groupInput.value;
|
|
|
|
if (message && groupName) {
|
|
connection.invoke("SendMessageToGroup", groupName, user, message)
|
|
.catch(function (err) {
|
|
console.error(err.toString());
|
|
});
|
|
messageInput.value = "";
|
|
}
|
|
event.preventDefault();
|
|
});
|
|
})
|
|
.catch(function (err) {
|
|
console.error(err.toString());
|
|
});
|
|
}); |