Saya membuat aplikasi chat di web api ASP-NET dengan C# di VS Code. Registrasi pengguna dan login berfungsi dengan database. Saya menambahkan kode contoh SignalR ke halaman Selamat Datang, tetapi saya ingin memodifikasi: Nama pengguna harus berupa nama pengguna yang dicatat, dan setelah itu ketika saya mengklik ''Kirim Pesan'', harus terlihat seperti ini: ''acc1 mengatakan halo dunia''.
SCREENSHOT TENTANG HALAMAN SAYA
Fungsi tombol ''Kirim Pesan'' ada di file ''chat.js'', dan saya tidak tahu, bagaimana cara mendapatkan string ''nama pengguna" disana HttpContext.Session.GetString("username") tidak berfungsi dalam 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);
}
}
}