ConnectorName and ConnectionId Browsers support

Author: gedem

src/NetCoreStack.WebSockets/ConnectionManager.cs

@@ -37,7 +37,7 @@ public ConnectionManager(IStreamCompressor compressor,
             _initState = initState;
             _loggerFactory = loggerFactory;
             _compressor = compressor;
-            Connections = new ConcurrentDictionary<string, WebSocketTransport>();
+            Connections = new ConcurrentDictionary<string, WebSocketTransport>(StringComparer.OrdinalIgnoreCase);
         }
 
         private async Task<byte[]> PrepareBytesAsync(byte[] body, IDictionary<string, object> properties)

src/NetCoreStack.WebSockets/Extensions/WebSocketExtensions.cs

@@ -4,7 +4,6 @@
 using System;
 using System.Collections.Generic;
 using System.IO;
-using System.Linq;
 using System.Net.WebSockets;
 using System.Text;
 using System.Threading.Tasks;
@@ -32,7 +31,7 @@ public static WebSocketMessageContext ToContext(this WebSocketReceiveResult resu
                 webSocketContext.Value = content;
                 webSocketContext.MessageType = result.MessageType;
             }
-            
+
             webSocketContext.Length = result.Count;
             return webSocketContext;
         }

src/NetCoreStack.WebSockets/Internal/WebSocketMiddleware.cs

@@ -33,6 +33,13 @@ public async Task Invoke(HttpContext httpContext,
                 {
                     connectorName = headerValue.ToString();
                 }
+                if (string.IsNullOrEmpty(connectorName))
+                {
+                    if (httpContext.Request.Query.ContainsKey(SocketsConstants.ConnectorName))
+                    {
+                        connectorName = httpContext.Request.Query[SocketsConstants.ConnectorName];
+                    }
+                }
 
                 var webSocket = await httpContext.WebSockets.AcceptWebSocketAsync();
                 await manager.ConnectAsync(webSocket, connectorName);

src/NetCoreStack.WebSockets/WebSocketMessageContext.cs

@@ -1,4 +1,5 @@
-using System.Collections.Generic;
+using System;
+using System.Collections.Generic;
 using System.Net.WebSockets;
 
 namespace NetCoreStack.WebSockets
@@ -30,7 +31,8 @@ public string CommandText
 
         public WebSocketMessageContext()
         {
-            Header = new Dictionary<string, object>();
+            Command = WebSocketCommands.DataSend;
+            Header = new Dictionary<string, object>(StringComparer.OrdinalIgnoreCase);
         }
     }
 }

test/WebClientTestApp/Constants.cs

@@ -0,0 +1,7 @@
+namespace WebClientTestApp
+{
+    public static class Constants
+    {
+        public const string ConnectorName = "WebClientSPA";
+    }
+}

test/WebClientTestApp/Views/Home/Index.cshtml

@@ -24,6 +24,13 @@
 
 <br />
 <div id="connectionContainer">
+    <div class="row" data-bind="visible: typeof(connectionId()) != 'undefined'">
+        <div class="col-sm-12 col-md-12 col-lg-12">
+            <div class="alert alert-success">
+                ConnectionId: <span data-bind="text: connectionId"></span>
+            </div>
+        </div>
+    </div>
     <div class="row">
         <div class="col-sm-12 col-md-12 col-lg-12">
             <div class="alert alert-warning" data-bind="html: logInfo">
@@ -36,8 +43,7 @@
                 <div class="input-group">
                     <input type="text" class="form-control" disabled="disabled" data-bind="value: connectionUrl">
                     <div class="input-group-btn">
-                        <button type="button" data-bind="click: connect, text: connectionState, css: connectionStatus">
-                        </button>
+                        <button type="button" data-bind="click: connect, text: connectionState, css: connectionStatus"></button>
                     </div>
                 </div>
                 <br />
@@ -80,11 +86,19 @@
         $(function () {
             'use strict';
 
+            var connectorName = "@Constants.ConnectorName"
             var containerId = "connectionContainer";
             var scheme = document.location.protocol == "https:" ? "wss" : "ws";
             var port = document.location.port ? (":" + document.location.port) : "";
             var socket;
 
+            var WebSocketCommands = {
+                Connect: 1,
+                DataSend: 2,
+                Handshake: 4,
+                All: 7
+            }
+
             var state = {
                 connect: "Connect",
                 connecting: "Connecting...",
@@ -93,9 +107,10 @@
 
             var ViewModel = function () {
                 var that = this;
+                this.connectionId = ko.observable();
                 this.data = ko.observable();
                 this.dataRows = ko.observableArray([]);
-                this.connectionUrl = ko.observable(scheme + "://" + document.location.hostname + port);
+                this.connectionUrl = ko.observable(scheme + "://" + document.location.hostname + port + "?connectorName=" + connectorName);
                 this.logInfo = ko.observable("Waiting for connection. To connect click the Connect button");
                 this.connectionState = ko.observable(state.connect);
                 this.connectionStatus = ko.pureComputed(function () {
@@ -139,14 +154,25 @@
                         }
                     };
                     socket.onmessage = function (event) {
-                        var row = {
-                            dataFrom: "Server",
-                            dataTo: "Client",
-                            colorFrom: "row-server",
-                            colorTo: "row-client",
-                            context: event.data
-                        };
-                        vm.dataRows.push(row);
+
+                        if (event.data) {
+
+                            var context = JSON.parse(event.data);
+
+                            console.log(vm.connectionId());
+                            if (context && context.Command == WebSocketCommands.Handshake) {
+                                vm.connectionId(context.Value);
+                            }
+
+                            var row = {
+                                dataFrom: "Server",
+                                dataTo: "Client",
+                                colorFrom: "row-server",
+                                colorTo: "row-client",
+                                context: event.data
+                            };
+                            vm.dataRows.push(row);
+                        }
                     };
                 };
 
@@ -162,7 +188,7 @@
                     if (!socket || socket.readyState != WebSocket.OPEN) {
                         vm.logInfo("Not connected!");
                     }
-                    var data = vm.data();
+                    var data = JSON.stringify({ header: { "connectorName": connectorName, "connectionId": vm.connectionId(), }, value: vm.data() });
                     socket.send(data);
                     var row = {
                         dataFrom: "Client",

test/WebClientTestApp/Views/Shared/_Layout.cshtml

@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>@ViewData["Title"] - Test App 1</title>
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
+    <link rel="stylesheet" href="~/css/bootstrap.min.css" />
 </head>
 <body>
     <div class="navbar navbar-inverse">
@@ -28,9 +28,9 @@
     <div class="container">
         @RenderBody()
     </div>
-    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"></script>
-    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.1/knockout-min.js"></script>
+    <script src="~/js/jquery-2.2.0.min.js"></script>
+    <script src="~/js/bootstrap.min.js"></script>
+    <script src="~/js/knockout-min.js"></script>
 
     @RenderSection("scripts", required: false)
 </body>

test/WebClientTestApp/wwwroot/_references.js

@@ -0,0 +1,4 @@
+/// <autosync enabled="true" />
+/// <reference path="js/bootstrap.min.js" />
+/// <reference path="js/jquery-2.2.0.min.js" />
+/// <reference path="js/knockout-min.js" />