InvokeAsync(StateHasChanged) from StateHasChanged()

samples/BlazorChat/BlazorChatSampleHub.cs

@@ -1,4 +1,7 @@
 using System;
+using System.Collections.Concurrent;
+using System.Collections.Generic;
+using System.Linq;
 using System.Threading.Tasks;
 
 using Microsoft.AspNetCore.SignalR;
@@ -8,22 +11,42 @@ namespace BlazorChat
     public class BlazorChatSampleHub : Hub
     {
         public const string HubUrl = "/chat";
+        private static ConcurrentDictionary<string, string> _connectedUsers = new ConcurrentDictionary<string, string>();
 
         public async Task Broadcast(string username, string message)
         {
             await Clients.All.SendAsync("Broadcast", username, message);
         }
+        public async Task SendUserToUser(string senderUsername, string recipientUsername, string message)
+        {
+            var recipientConnectionId = _connectedUsers.FirstOrDefault(u => u.Value == recipientUsername).Key;
+            if (!string.IsNullOrEmpty(recipientConnectionId))
+            {
+                await Clients.Client(recipientConnectionId).SendAsync("SendUserToUser", senderUsername, recipientUsername, message);
+            }
+        }
 
         public override Task OnConnectedAsync()
         {
-            Console.WriteLine($"{Context.ConnectionId} connected");
+            var username = Context.GetHttpContext().Request.Query["username"];
+            _connectedUsers.TryAdd(Context.ConnectionId, username);
+            Console.WriteLine($"{Context.ConnectionId}:${username} connected");
+
+            var userList = GetConnectedUsers();
+            Clients.Client(Context.ConnectionId).SendAsync("ReceiveConnectedUsers", userList);
             return base.OnConnectedAsync();
         }
 
         public override async Task OnDisconnectedAsync(Exception e)
         {
-            Console.WriteLine($"Disconnected {e?.Message} {Context.ConnectionId}");
+            string username;
+            _connectedUsers.TryRemove(Context.ConnectionId, out username);
+            Console.WriteLine($"Disconnected {e?.Message} {Context.ConnectionId}:${username}");
             await base.OnDisconnectedAsync(e);
         }
+        public IEnumerable<string> GetConnectedUsers()
+        {
+            return _connectedUsers.Values.Distinct();
+        }
     }
 }

samples/BlazorChat/Pages/ChatRoom.razor

@@ -29,6 +29,15 @@ else
         <span>You are connected as <b>@_username</b></span>
         <button class="btn btn-sm btn-warning ml-md-auto" @onclick="@DisconnectAsync">Disconnect</button>
     </div>
+
+    <h2>Connected users:</h2>
+    <ul>
+        @foreach (var user in _connectedUsers)
+        {
+            <li>@user</li>
+        }
+    </ul>
+
     // display messages
     <div id="scrollbox">
         @foreach (var item in _messages)
@@ -40,12 +49,18 @@ else
             else
             {
                 <div class="@item.CSS">
+                    @if (!string.IsNullOrWhiteSpace(item.RecieverUsername))
+                    {
+                        <div class="user">@item.RecieverUsername</div>
+                    }
                     <div class="user">@item.Username</div>
                     <div class="msg">@item.Body</div>
                 </div>
             }
         }
         <hr />
+        <label for="recipientUsername">Send message to:</label>
+        <input type="text" id="recipientUsername" @bind="_recipientUsername" />
         <textarea class="input-lg" placeholder="enter your comment" @bind="@_newMessage"></textarea>
         <button class="btn btn-default" @onclick="@(() => SendAsync(_newMessage))">Send</button>
     </div>
@@ -61,12 +76,18 @@ else
     // on-screen message
     private string _message;
 
+    // on-screen recipientUsername
+    private string _recipientUsername;
+
     // new message input
     private string _newMessage;
 
     // list of messages in chat
     private List<Message> _messages = new List<Message>();
 
+    // list of messages in chat
+    private List<string> _connectedUsers = new List<string>();
+
     private string _hubUrl;
     private HubConnection _hubConnection;
 
@@ -94,10 +115,17 @@ else
             _hubUrl = baseUrl.TrimEnd('/') + BlazorChatSampleHub.HubUrl;
 
             _hubConnection = new HubConnectionBuilder()
-                .WithUrl(_hubUrl)
+                .WithUrl($"{_hubUrl}?username={_username}")
                 .Build();
 
+            _hubConnection.On<IEnumerable<string>>("ReceiveConnectedUsers", (userList) =>
+            {
+                _connectedUsers = userList.ToList();
+                InvokeAsync(StateHasChanged);
+                //StateHasChanged();
+            });
             _hubConnection.On<string, string>("Broadcast", BroadcastMessage);
+            _hubConnection.On<string, string, string>("SendUserToUser", SendUserToUser);
 
             await _hubConnection.StartAsync();
 
@@ -110,14 +138,25 @@ else
         }
     }
 
+    private void SendUserToUser(string senderUsername, string recieverUsername, string message)
+    {
+        bool isMine = senderUsername.Equals(_username, StringComparison.OrdinalIgnoreCase);
+        var messageObj = new Message(senderUsername, message, isMine);
+        messageObj.RecieverUsername = recieverUsername;
+        _messages.Add(messageObj);
+
+        // Inform blazor the UI needs updating
+        InvokeAsync(StateHasChanged);
+    }
+
     private void BroadcastMessage(string name, string message)
     {
         bool isMine = name.Equals(_username, StringComparison.OrdinalIgnoreCase);
 
         _messages.Add(new Message(name, message, isMine));
 
         // Inform blazor the UI needs updating
-        StateHasChanged();
+        InvokeAsync(StateHasChanged);
     }
 
     private async Task DisconnectAsync()
@@ -138,8 +177,14 @@ else
     {
         if (_isChatting && !string.IsNullOrWhiteSpace(message))
         {
-            await _hubConnection.SendAsync("Broadcast", _username, message);
-
+            if (string.IsNullOrWhiteSpace(_recipientUsername))
+            {
+                await _hubConnection.SendAsync("Broadcast", _username, message);
+            }
+            else
+            {
+                await _hubConnection.SendAsync("SendUserToUser",_username, _recipientUsername, message);
+            }
             _newMessage = string.Empty;
         }
     }
@@ -154,6 +199,7 @@ else
         }
 
         public string Username { get; set; }
+        public string RecieverUsername { get; set; }
         public string Body { get; set; }
         public bool Mine { get; set; }