Added recognition of the client and recording his action.

SignalR2/SignalR2/Content/Site.css

@@ -22,3 +22,38 @@ select,
 textarea {
     max-width: 280px;
 }
+
+        .logs table {
+            width: 100%;
+        }
+
+        .logs thead, tbody, tr, td, th { display: block; }
+
+        .logs tr:after {
+            content: ' ';
+            display: block;
+            visibility: hidden;
+            clear: both;
+        }
+
+        .logs thead th {
+            height: 50px;
+
+            /*text-align: left;*/
+        }
+
+        .logs tbody {
+            height:500px;
+            overflow-y: auto;
+        }
+
+        .logs thead {
+            /* fallback */
+        }
+
+
+        .logs tbody td, thead th {
+            width: 33%;
+            height: 50px;
+            float: left;
+        }

SignalR2/SignalR2/Extensions/ExtensionHttpContext.cs

@@ -0,0 +1,17 @@
+using Microsoft.AspNet.SignalR;
+
+namespace SignalR2.Extensions
+{
+    public static class ExtensionHttpContext
+    {
+        public static string GetRemoteIpAddress(this IRequest request)
+        {
+            object ipAddress;
+            if (request.Environment.TryGetValue("server.RemoteIpAddress", out ipAddress))
+            {
+                return ipAddress as string;
+            }
+            return "";
+        }
+    }
+}

SignalR2/SignalR2/Hubs/PunsHub.cs

@@ -1,34 +1,65 @@
 using System;
 using System.Collections.Generic;
+using System.Data;
 using System.Linq;
 using System.Threading.Tasks;
 using System.Web;
 using Microsoft.AspNet.SignalR;
 using Microsoft.AspNet.SignalR.Hubs;
+using SignalR2.Extensions;
 
 namespace SignalR2.Hubs
 {
     [HubName("puns")]
     public class PunsHub : Hub<IPunsClientHandler>
     {
-        static List<string> Image =new List<string>();
+        public static List<string> Images = new List<string>();
+        public static UsersHandler Users = new UsersHandler();
 
         public override Task OnConnected()
         {
-            Clients.Caller.LoadImage(Image);
+            AddClient(Context.ConnectionId,GetIpAddress());
+            Clients.Caller.LoadImage(Images);
             return base.OnConnected();
         }
 
+        public override Task OnDisconnected(bool stopCalled)
+        {
+            RemoveClient(Context.ConnectionId);
+            return base.OnDisconnected(stopCalled);
+        }
+
         public void SendPath(string path)
         {
-            Image.Add(path);
+            Images.Add(path);
             Clients.Others.DrawPath(path);
+            Clients.All.Action(DateTime.Now.TimeOfDay, ActionType.Drawing.ToString(), Context.ConnectionId);
         }
 
         public void Clear()
         {
-            Image.Clear();
+            Images.Clear();
             Clients.All.Clear();
+            Clients.All.Action(DateTime.Now.TimeOfDay, ActionType.Clearing.ToString(), Context.ConnectionId);
+        }
+
+        private void AddClient(string id, string ip)
+        {
+            Users.ConnectedClients.Add(id,ip);
+            Clients.All.NumberOfUsers(Users.Size());
+            Clients.All.Action(DateTime.Now.TimeOfDay,ActionType.Connecting.ToString(), id);
+            Clients.All.Users(Users.GetJson());
+        }
+        private void RemoveClient(string id)
+        {
+            Users.ConnectedClients.Remove(id);
+            Clients.All.NumberOfUsers(Users.Size());
+            Clients.All.Action(DateTime.Now.TimeOfDay, ActionType.Disconnecting.ToString(), id);
+            Clients.All.Users(Users.GetJson());
+        }
+        private string GetIpAddress()
+        {
+            return Context.Request.GetRemoteIpAddress();
         }
     }
 
@@ -37,5 +68,9 @@ public interface IPunsClientHandler
         void DrawPath(string path);
         void Clear();
         void LoadImage(List<string> image);
+        void NumberOfUsers(int volume);
+        void Users(string json);
+        void Action(TimeSpan data, string action, string user);
     }
+
 }

SignalR2/SignalR2/Hubs/User/UsersHandler.cs

@@ -0,0 +1,31 @@
+using System.Collections.Generic;
+using Newtonsoft.Json;
+
+namespace SignalR2.Hubs
+{
+    public class UsersHandler
+    {
+        public Dictionary<string, string> ConnectedClients;
+        public UsersHandler()
+        {
+            ConnectedClients = new Dictionary<string, string>();
+        }
+
+        public int Size()
+        {
+            return ConnectedClients.Count;
+        }
+
+        public string GetJson()
+        {
+            return JsonConvert.SerializeObject(ConnectedClients);
+        }
+    }
+    public enum ActionType
+    {
+        Connecting,
+        Disconnecting,
+        Drawing,
+        Clearing,
+    }
+}

SignalR2/SignalR2/SignalR2.csproj

@@ -188,11 +188,13 @@
     <Compile Include="Controllers\AccountController.cs" />
     <Compile Include="Controllers\HomeController.cs" />
     <Compile Include="Controllers\ManageController.cs" />
+    <Compile Include="Extensions\ExtensionHttpContext.cs" />
     <Compile Include="Global.asax.cs">
       <DependentUpon>Global.asax</DependentUpon>
     </Compile>
     <Compile Include="Hubs\ChatHub.cs" />
     <Compile Include="Hubs\PunsHub.cs" />
+    <Compile Include="Hubs\User\UsersHandler.cs" />
     <Compile Include="Models\AccountViewModels.cs" />
     <Compile Include="Models\IdentityModels.cs" />
     <Compile Include="Models\ManageViewModels.cs" />
@@ -369,7 +371,7 @@
     <VisualStudio>
       <FlavorProperties GUID="{349c5851-65df-11da-9384-00065b846f21}">
         <WebProjectProperties>
-          <UseIIS>True</UseIIS>
+          <UseIIS>False</UseIIS>
           <AutoAssignPort>True</AutoAssignPort>
           <DevelopmentServerPort>62562</DevelopmentServerPort>
           <DevelopmentServerVPath>/</DevelopmentServerVPath>

SignalR2/SignalR2/Views/Home/Contact.cshtml

@@ -3,65 +3,122 @@
 }
 <h2>@ViewBag.Title.</h2>
 <h3>@ViewBag.Message</h3>
-
-<canvas id="canvas" width="500" height="300"
-        style="border: 1px gainsboro dashed"></canvas>
-<input type="button" class="btn btn-danger "
-       id="clear-btn" value="Clear" />
-@section scripts
+<div class="col-md-6">
+    <canvas id="canvas" width="500" height="300"
+            style="border: 1px gainsboro dashed"></canvas>
+
+    <input type="button" class="btn btn-danger "
+           id="clear-btn" value="Clear" />
+</div>
+    <div class="col-md-6">
+        Number of connected clients:
+        <input type="button" class="btn btn-success" value="1" id="numberUsers"/>
+        <br/><br/>
+        Logs:
+        <table id="users" class="table table-striped logs">
+            <thead>
+                <tr>
+                    <th>
+                        Date
+                    </th>
+                    <th>
+                        Action
+                    </th>
+                    <th>
+                        IdConnection
+                    </th>
+                </tr>
+            </thead>
+            <tbody>
+
+            </tbody>
+        </table>
+    </div>
+
+    @section scripts
 {
 
-    <script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.6/fabric.min.js"></script>
+        <script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.6/fabric.min.js"></script>
+
+        <script>
+            var drawPath;
+            var hub = $.connection.puns;
 
-    <script>
-        var drawPath;
-        var initialiseCanvas = function () {
+            var initialiseCanvas = function () {
+                document.puneCanvas = new fabric.Canvas('canvas');
 
-            document.puneCanvas = new fabric.Canvas('canvas');
+                document.puneCanvas.isDrawingMode = true;
 
-            document.puneCanvas.isDrawingMode = true;
+                var pathCreated = function (e) {
+                    //console.log(e.path);
+                    hub.server
+                        .sendPath(JSON.stringify(e.path));
+                };
+                document.puneCanvas.loadPath = pathCreated;
+                document.puneCanvas.on({
+                    'path:created': pathCreated
+                });
 
-            var pathCreated = function (e) {
-                console.log(e.path);
-                $.connection.puns.server
-                    .sendPath(JSON.stringify(e.path));
-            };
-            document.puneCanvas.loadPath = pathCreated;
-            document.puneCanvas.on({
-                'path:created': pathCreated
-            });
+
+                $("#clear-btn").click(function () {
+                    hub.server.clear();
+                });
 
 
-            $("#clear-btn").click(function () {
-                $.connection.puns.server.clear();
-            });
+            }
 
+            addLog = function(data, action, id) {
 
-        }
+                var table = document.getElementById("users").getElementsByTagName('tbody')[0];
+                var row = table.insertRow(0);
+                var cell1 = row.insertCell(0);
+                var cell2 = row.insertCell(1);
+                var cell3 = row.insertCell(2);
+                cell1.innerHTML = data;
+                cell2.innerHTML = action;
+                cell3.innerHTML = id;
+            }
 
-        drawPath = function (pathString) {
-            var path = JSON.parse(pathString);
-            fabric.util.enlivenObjects([path], function (objects) {
-                objects.forEach(function (o) {
-                    document.puneCanvas.add(o);
+            drawPath = function (pathString) {
+                var path = JSON.parse(pathString);
+                fabric.util.enlivenObjects([path], function (objects) {
+                    objects.forEach(function (o) {
+                        document.puneCanvas.add(o);
+                    });
                 });
-            });
-        }
+            }
 
-        $.connection.puns.client.clear = function () {
-            document.puneCanvas.clear();
-        }
+            hub.client.ipclient = function (msg) {
+                console.log(msg);
+            }
 
-        $.connection.puns.client.loadImage = function (paths) {
-            initialiseCanvas();
-            for (var i = 0; i < paths.length; i++) {
-                drawPath(paths[i]);
+            hub.client.clear = function () {
+                document.puneCanvas.clear();
             }
-        }
 
-        $.connection.puns.client.drawPath = drawPath;
-        $.connection.hub.start();
+            hub.client.loadImage = function (paths) {
+                initialiseCanvas();
+                for (var i = 0; i < paths.length; i++) {
+                    drawPath(paths[i]);
+                }
+            }
 
+            hub.client.NumberOfUsers = function (amount) {
+                document.getElementById("numberUsers").value = amount;
+            }
 
-    </script>
-}
+            hub.client.users = function (users) {
+                console.log(users);
+            }
+
+            hub.client.action = function(data, type, user) {
+                addLog(data, type, user);
+            }
+
+            hub.client.drawPath = drawPath;
+            $.connection.hub.start();
+
+
+
+        </script>
+    }