Add functionality to track online users

samples/ChatSample/Hubs/Chat.cs

@@ -3,6 +3,8 @@
 
 using System;
 using System.Threading.Tasks;
+using System.Collections.Generic;
+using System.Collections.Concurrent;
 using Microsoft.AspNetCore.Authorization;
 using Microsoft.AspNetCore.SignalR;
 
@@ -12,24 +14,30 @@ namespace ChatSample.Hubs
     [Authorize]
     public class Chat : Hub
     {
-        public override Task OnConnectedAsync()
+        private static readonly ConcurrentDictionary<string, string> usersOnline = new ConcurrentDictionary<string, string>();
+
+        public override async Task OnConnectedAsync()
         {
             if (!Context.User.Identity.IsAuthenticated)
             {
                 Context.Connection.Dispose();
             }
 
-            return Task.CompletedTask;
+            await Clients.Client(Context.ConnectionId).InvokeAsync("SetUsersOnline", usersOnline);
+            usersOnline.TryAdd(Context.ConnectionId, Context.User.Identity.Name);
+
+            await Clients.All.InvokeAsync("OnConnected", Context.ConnectionId, Context.User.Identity.Name);
         }
 
         public override Task OnDisconnectedAsync(Exception ex)
         {
-            return Task.CompletedTask;
+            usersOnline.TryRemove(Context.ConnectionId, out var value);
+            return Clients.All.InvokeAsync("OnDisconnected", Context.ConnectionId, Context.User.Identity.Name);
         }
 
         public async Task Send(string message)
         {
-            await Clients.All.InvokeAsync("Send", $"{Context.User.Identity.Name}: {message}");
+            await Clients.All.InvokeAsync("Send", Context.User.Identity.Name, message);
         }
     }
 }

samples/ChatSample/Views/Home/Index.cshtml

@@ -4,7 +4,9 @@
 
 <div id="chat-area">
     <ul id="messages"></ul>
-    <ul id="users"></ul>
+    <ul id="users">
+        <li><b>Users online</b></li>
+    </ul>
     <div class="clear">
     </div>
     <form id="sendmessage" action="#">
@@ -27,6 +29,35 @@ connection.onClosed = e => {
     }
 };
 
+connection.on('SetUsersOnline', function (usersOnline) {
+    for (var user in usersOnline) {
+        addUserOnline(user, usersOnline[user]);
+    }
+});
+
+connection.on('OnConnected', function (id, userName) {
+    addUserOnline(id, userName);
+    appendLine('User ' + userName + ' joined the chat');
+});
+
+connection.on('OnDisconnected', function (id, userName) {
+    appendLine('User ' + userName + ' left the chat');
+    document.getElementById(id).outerHTML = '';
+});
+
+connection.on('Send', function (userName, message) {
+    var nameElement = document.createElement('b');
+    nameElement.innerText = userName + ':';
+
+    var msgElement = document.createElement('span');
+    msgElement.innerText = ' ' + message;
+
+    var child = document.createElement('li');
+    child.appendChild(nameElement);
+    child.appendChild(msgElement);
+    document.getElementById('messages').appendChild(child);
+});
+
 connection.start(transportType).catch(err => appendLine(err, 'red'));
 
 document.getElementById('sendmessage').addEventListener('submit', event => {
@@ -44,6 +75,13 @@ function appendLine(line, color) {
     document.getElementById('messages').appendChild(child);
 }
 
+function addUserOnline(id, userName) {
+    var user = document.createElement('li');
+    user.innerText = userName;
+    user.id = id;
+    document.getElementById('users').appendChild(user);
+}
+
 function getParameterByName(name, url) {
     if (!url) {
         url = window.location.href;
@@ -54,5 +92,6 @@ function getParameterByName(name, url) {
     if (!results) return null;
     if (!results[2]) return '';
     return decodeURIComponent(results[2].replace(/\+/g, " "));
-}
-</script>
+});
+
+</script>