Added logger functionality

Author: Gourav Dwivedi

Samples/AspDotCore/WebApp/WebApp/Hubs/OneHub.cs

@@ -37,15 +37,28 @@ public async Task NotifyAllClient(string data)
 			await Clients.All.SendAsync("ReceiveData", $"Data Received: {data}");
 		}
 
-		public async Task TestComplexData(string data)
+		public async Task TestComplexData(User data)
 		{
 			var connectionId = Context.ConnectionId;
-			await Clients.Client(connectionId).SendAsync("ReceiveData", $"Data Received: {data}");
+			await Clients.Client(connectionId).SendAsync("ComplexSample", new { Msg = "Data Received", User = data });
 		}
 
 		public override Task OnDisconnectedAsync(Exception exception)
 		{
 			return base.OnDisconnectedAsync(exception);
 		}
 	}
+
+	public class User
+	{
+		public int Id { get; set; }
+		public string Name { get; set; }
+		public Address Address { get; set; }
+	}
+
+	public class Address
+	{
+		public string Country { get; set; }
+		public int Pin { get; set; }
+	}
 }

src/css/main.css

@@ -99,3 +99,15 @@ ul.nav .nav-link.active:hover {
   border-color: white !important; 
 } 
 
+.logger-container {
+  padding: 5px;
+}
+
+.bg-gray {
+  background-color:#cccccc;
+  border-color: black;
+  border-width: 2px;
+  border-style: double;
+  padding: 10px;
+}
+

src/js/components/app.component.js

@@ -34,9 +34,7 @@ class AppComponent extends HTMLElement {
                     <div id="basicview" class="tab-pane active">
                         <h2>Basic</h2>
                         <sr-form></sr-form>
-                    </div>
-
-                   
+                    </div>                  
                 </div>
             </div>
         </div>

src/js/components/logic/lib/app.common.js

@@ -8,4 +8,43 @@ const ContentType = {
 
 const AppEvents = mitt();
 
-export { ContentType, AppEvents };
+function DisableElementByClassName(className) {
+    var el = document.getElementsByClassName(className);
+
+    for (var i = 0; i < el.length; i++) {
+        el[i].disabled = true;
+    }
+}
+
+function EnableElementByClassName(className) {
+    var el = document.getElementsByClassName(className);
+
+    for (var i = 0; i < el.length; i++) {
+        el[i].disabled = false;
+    }
+}
+
+function HideElementByClassName(className) {
+    var el = document.getElementsByClassName(className);
+
+    for (var i = 0; i < el.length; i++) {
+        el[i].style.display = "node";
+    }
+}
+
+function ShowElementByClassName(className) {
+    var el = document.getElementsByClassName(className);
+
+    for (var i = 0; i < el.length; i++) {
+        el[i].style.display = "block";
+    }
+}
+
+export { 
+    ContentType, 
+    AppEvents, 
+    EnableElementByClassName, 
+    DisableElementByClassName,
+    HideElementByClassName,
+    ShowElementByClassName
+ };

src/js/components/logic/lib/app.signalr.js

@@ -1,12 +1,12 @@
-import * as signalR from "@aspnet/signalr";
+import * as SignalR from "@aspnet/signalr";
 import { AppEvents } from './app.common';
 
-var storeFunc = null;
 class SignalRApp {
     constructor(url) {
         this.url = url;
         this.connection = null;
-        this.isConnected = false;        
+        this.isConnected = false;
+        this.processResponse = null;
     }
 
     Init(options) {
@@ -15,22 +15,23 @@ class SignalRApp {
             options.accessTokenFactory = () => options.getToken();
         }
 
-        this.connection = new signalR.HubConnectionBuilder()
+        this.connection = new SignalR.HubConnectionBuilder()
             .withUrl(options.url, options)
-            .configureLogging(signalR.LogLevel.Information)
+            .configureLogging(SignalR.LogLevel.Information)
             .build();
-    
 
         //Receive Data
         //Reading the raw response
         var self = this;
-        storeFunc = self.connection.processIncomingData;
+        self.processResponse = self.connection.processIncomingData;
+
         self.connection.processIncomingData = function (data) {
-            console.log('processIncomingData'+ data);
-            storeFunc.call(self.connection, data);
+            self.processResponse.call(self.connection, data);
+            self.HandleResponse(data);
         }
-        debugger;
+        
         AppEvents.emit('Init', options);
+        AppEvents.emit('Logger', "Init");
     }
 
 
@@ -41,6 +42,7 @@ class SignalRApp {
                 AppEvents.emit('OnConnect', { url: self.url });
             })
             .catch(function (err) {
+                AppEvents.emit('Logger', err.toString());
                 return console.error(err.toString());
             });
     }
@@ -50,28 +52,68 @@ class SignalRApp {
         methodArguments = options.methodArguments;
 
         AppEvents.emit('OnSend', options);
+        AppEvents.emit('Logger', "Calling... " + options.methodName);
         this.connection.invoke(options.methodName, ...methodArguments)
             .catch(function (err) {
+                AppEvents.emit('Logger', err.toString());
                 return console.log(err);
             });
     }
 
     OnReceive(callback) {
-        this.connection.on("ReceiveData", function (data) {
-            callback(data);
-        });
+        // this.connection.on("ReceiveData", function (data) {
+        //     callback(data);
+        // });
     }
 
     OnDisConnect() {
         this.connection.stop()
             .then(function () {
                 console.log('Disconnected');
+                AppEvents.emit('Logger', "Disconnected...");
                 AppEvents.emit('OnDisconnected');
             })
             .catch(function (err) {
+                AppEvents.emit('Logger', err.toString());
                 return console.error(err.toString());
             });
     }
+
+    HandleResponse(input) {
+        AppEvents.emit('Logger', input.toString());
+        var output = this.ParseRespose(input);
+        if(output !== null) {
+            
+            output.forEach((e) => {
+                var jsonObj = JSON.parse(e);
+
+                if(jsonObj !== null && jsonObj.hasOwnProperty('target')) {
+                    debugger;
+                    AppEvents.emit('ReceivedData', { "ClientMethod": jsonObj.target, "Data": jsonObj.arguments });
+                }
+            });
+        }
+    }
+
+    ParseRespose(input) {
+
+        if (typeof input !== "string") {
+            console.log("Invalid input for JSON hub protocol. Expected a string.");
+            return null; 
+            //throw new Error("Invalid input for JSON hub protocol. Expected a string.");
+        }
+
+        var separator = String.fromCharCode(0x1e);
+        if (input[input.length - 1] !== separator) {
+            console.log("Message is incomplete.");
+            //throw new Error("Message is incomplete.");
+            return null; 
+        }
+
+        var messages = input.split(separator);
+        messages.pop();
+        return messages;
+    }
 }
 
 export { SignalRApp }

src/js/components/srform.component.js

@@ -30,6 +30,13 @@ class SrFormComponent extends HTMLElement {
         this.innerHTML = ` 
                         <form>
                                 <fieldset>
+                                    <div class="form">
+                                        <div class="checkbox-container float-right">
+                                            <input type="checkbox" id="chk-loggerView"  value="Logger View" />
+                                            <label for="chk-loggerView" class="col-sm-2 col-form-label">Logging</label>
+                                        </div>
+                                    </div>
+                                    
                                     <div class="form-group row">
                                         <label for="inputUrl" class="col-sm-2 col-form-label">Service Endpoint</label>
                                         <div class="col-sm-10">
@@ -109,6 +116,15 @@ class SrFormComponent extends HTMLElement {
                                             <input type="button" class="btn btn-primary disconnectbtn" id="btn-disconnectbtn" value="Disconnect" />
                                         </div>
                                     </div>
+                                    <div class="form-group row logger-container" style="display:none" id="logger-container">
+                                        <fieldset class="bg-gray" id="loggerView">
+                                            <legend class="col-form-label">
+                                            <h3>Logs</h3>
+                                            </legend>
+                                        <div class="container" id="app-logs">
+                                            
+                                        <div>
+                                        </fieldset>
                                     </div>
                                 </fieldset>
                             </form>