@model YourNamespace.CorrespondenceViewModel
<!DOCTYPE html>
<html>
<head>
<title>Chat with @Model.OtherUserName</title>
</head>
<body>
<h1>Chat with @Model.OtherUserName</h1>
<div id="chat">
<ul id="messages">
@foreach (var message in Model.Messages)
{
<li>@message.SenderUserName: @message.Content</li>
}
</ul>
</div>
<input type="text" id="messageInput" />
<button id="sendButton">Send</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="/your-signalr-hub-url"></script>
<script>
var connection = new signalR.HubConnectionBuilder()
.withUrl("/your-signalr-hub-url")
.build();
connection.on("ReceiveMessage", function (sender, message) {
var messageList = document.getElementById("messages");
var li = document.createElement("li");
li.textContent = sender + ": " + message;
messageList.appendChild(li);
});
connection.start().catch(function (err) {
return console.error(err.toString());
});
document.getElementById("sendButton").addEventListener("click", function (event) {
var messageInput = document.getElementById("messageInput");
var message = messageInput.value;
connection.invoke("SendMessage", "@Model.OtherUserId", message).catch(function (err) {
return console.error(err.toString());
});
messageInput.value = "";
event.preventDefault();
});
</script>
</body>
</html>