// chat.js "use strict"; var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build(); var chat = document.getElementById("chatInput").value; // Disable the send button until connection is established. document.getElementById("sendButton").disabled = true; //Display new message connection.on("ReceiveMessage", function (nickname, message) { var li = document.createElement("li"); document.getElementById("messagesList").appendChild(li); li.textContent = `${nickname} says ${message}`; }); //Start connection and enable send button connection.start().then(function () { document.getElementById("sendButton").disabled = false; connection.invoke("JoinChat", chat).catch(function (err) { return console.error(err.toString()); }); }).catch(function (err) { return console.error(err.toString()); }); //When sendButton clicked call SendMessage at hub document.getElementById("sendButton").addEventListener("click", function (event) { var message = document.getElementById("messageInput").value; connection.invoke("SendMessage", chat, message).catch(function (err) { return console.error(err.toString()); }); event.preventDefault(); }); ////////////////////////////////////////////////////////////////////////////////////////// //Fucntional View, messages are saved and displayed imediatly @using Microsoft.AspNetCore.Mvc.Localization; @using OnePrice.Domain.Entities.ChatEntities; @model Chat @inject IViewLocalizer _localizer; @{ ViewData["Title"] = "Conversations"; }

@Model.Title

@message.Author.Nickname: @message.Content @message.CreatedAt

Message

///////////////////////////////////////////////////////////////////////////////////////////////////// //View which is using ajax, not displaying messages @using OnePrice.Domain.Entities; @model AppUser

@foreach (var chat in Model.Chats) { Chat @chat.ChatId
}

@*Message input*@

////////////////////////////////////////////////////////////////////////////////////////// //ChatHub using Microsoft.AspNetCore.Authorization; using Microsoft.AspNetCore.Mvc; using Microsoft.AspNetCore.SignalR; using Microsoft.EntityFrameworkCore; using OnePrice.Application.Repository; using OnePrice.Domain.Entities.ChatEntities; using OnePrice.UI.Extensions; namespace OnePrice.UI.Hubs { [Authorize] [ServiceFilter(typeof(EnsureUserExistsAttribute))] public class ChatHub : Hub { private readonly IUnitOfWork _uow; public ChatHub(IUnitOfWork uow) { _uow = uow; } public async Task JoinChat(string chatId) { await Groups.AddToGroupAsync(Context.ConnectionId, chatId); await Clients.All.SendAsync("ReceiveMessage", "Hello", "Nuuger"); } public async Task SendMessage(string group, string message) { var email = Context.User.FindFirst("email").Value; var user = await _uow.Users.GetByEmailWithChatsAsync(email); int groupId = int.Parse(group); var chat = await _uow.Chats.GetFullByIdAsync(groupId); var newMessage = new Message() { Chat = chat, Author = user, Content = message, }; chat.Messages.Add(newMessage); await _uow.SaveChangesAsync(); await Clients.Groups(group).SendAsync("ReceiveMessage", user.Nickname, message); } } } //////////////////////////////////////////////////////////////////////////////////////////////////// //Chat controller using Microsoft.AspNetCore.Authorization; using Microsoft.AspNetCore.Mvc; using OnePrice.Application.Repository; using OnePrice.Domain.Entities.ChatEntities; using OnePrice.UI.Extensions; namespace OnePrice.UI.Controllers { [Authorize] [ServiceFilter(typeof(EnsureUserExistsAttribute))] public class ChatController : Controller { private readonly IUnitOfWork _uow; public ChatController(IUnitOfWork uow) { _uow = uow; } [HttpGet] public async Task Index() { var email = User.FindFirst("email").Value; var user = await _uow.Users.GetByEmailWithChatsAsync(email); return View(user); } [HttpGet] public async Task Private(int chatId) { var email = User.FindFirst("email").Value; var user = await _uow.Users.GetByEmailWithChatsAsync(email); if (!user.Chats.Any(c => c.ChatId == chatId)) return Ok("You dont have access to this chat"); var chat = await _uow.Chats.GetFullByIdAsync(chatId); if (chat == null) return BadRequest(); return View(chat); } [HttpPost] public async Task Create(int receiverId) { var email = User.FindFirst("email").Value; var user = await _uow.Users.GetByEmailAsync(email); if (user.Id == receiverId) return RedirectToAction(nameof(Index)); if (user == null) return BadRequest(); var chat = await _uow.Chats.GetByUserIdsAsync(user.Id, receiverId); if (chat == null) { chat = new Chat { Title = string.Join("_", chat.Members.Select(m => m.User.Nickname)) }; chat.Members = new List { new UserChat() { Chat = chat, UserId = user.Id }, new UserChat() { Chat = chat, UserId = receiverId }, }; await _uow.Chats.AddAsync(chat); await _uow.SaveChangesAsync(); } return RedirectToAction(nameof(Index), new { chatId = chat.Id }); } public async Task LoadChat(int chatId) { var chat = await _uow.Chats.GetFullByIdAsync(chatId); var messages = chat.Messages.ToList(); // Return a partial view or JSON containing the chat messages return PartialView("_ChatMessagesPartial", messages); } } }

ASP NET MVC/ AJAX + Signal R