I'm making a chat application in web api ASP-NET with C# in VS Code. The user registration and login is working with database. I added the SignalR sample code in to the Welcome page, but i want to modify: the User name need to be the logged username, and after when i click to ''Send Message'', need to look like this: ''acc1 says hello world''.
The ''Send Message'' button function is in the ''chat.js'' file, and i don't know, how can i get the ''username" string there. The HttpContext.Session.GetString("username")
is not working in javascript.
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(); });
Wilcome.cshtml
@page @model probagetrequest.Pages.WilcomeModel @using Microsoft.AspNetCore.Http <.DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Wilcome</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); } } }
You can use var user = '@HttpContext.Session.GetString("username")';
and use user object as your want.
If your script in separate file, you can set as window
object and use in your js file.
window.user = '@HttpContext.Session.GetString("username")';
<script>
var user = '@HttpContext.Session.GetString("username")'; //or window.user
console.log(user)
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.