I am currently developing a chat application using web API ASP.NET with C# in VS Code. The user registration and login functionalities are working seamlessly with the database. I have integrated the SignalR sample code into the Welcome page, but I have a specific requirement: the username displayed should be the logged-in user's username, and when I click on "Send Message", it should show as follows: "acc1 says hello world".
https://i.sstatic.net/DePtN.png The functionality of the "Send Message" button is defined in the "chat.js" file, and I'm facing an issue where I cannot retrieve the "username" string within the JavaScript code. Using
HttpContext.Session.GetString("username")chat.js
"use strict";
var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();
//Disable send button until connection is established
document.getElementById("sendButton").disabled = true;
connection.on("ReceiveMessage", function (user, message) {
var msg = message.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">");
var encodedMsg = user + " says " + msg;
var li = document.createElement("li");
li.textContent = encodedMsg;
document.getElementById("messagesList").appendChild(li);
});
connection.start().then(function () {
document.getElementById("sendButton").disabled = false;
}).catch(function (err) {
return console.error(err.toString());
});
document.getElementById("sendButton").addEventListener("click", function (event) {
var user = document.getElementById("userInput").value;
var message = document.getElementById("messageInput").value;
connection.invoke("SendMessage", user, message).catch(function (err) {
return console.error(err.toString());
});
event.preventDefault();
});Welcome.cshtml
@page
@model probagetrequest.Pages.WilcomeModel
@using Microsoft.AspNetCore.Http
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Welcome</title>
</head>
<body>
Welcome @HttpContext.Session.GetString("username")
<br>
<br>
<a asp-page="index" asp-page-handler="logout">Logout</a>
<a asp-page="profile">Change Profile</a>
<div class="container">
<div class="row"> </div>
<div class="row">
<div class="col-2">User</div>
<div class="col-4"><input type="text" id="userInput" /></div>
</div>
<div class="row">
<div class="col-2">Message</div>
<div class="col-4"><input type="text" id="messageInput" /></div>
</div>
<div class="row"> </div>
<div class="row">
<div class="col-6">
<input type="button" id="sendButton" value="Send Message" />
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<hr />
</div>
</div>
<div class="row">
<div class="col-6">
<ul id="messagesList"></ul>
</div>
</div>
<script src="~/js/signalr/dist/browser/signalr.js"></script>
<script src="~/js/chat.js"></script>
</body>
</html>ChatHub.cs
using Microsoft.AspNetCore.SignalR;
using System.Threading.Tasks;
using System;
namespace SignalRChat.Hubs
{
public class ChatHub : Hub
{
public async Task SendMessage(string user, string message)
{
Console.WriteLine($"user={user}, message={message}");
await Clients.All.SendAsync("ReceiveMessage", user, message);
}
}
}