Introducing modules for the ts client

aspnet · Nov 29, 2016 · 2039a18 · 2039a18
1 parent 1b59fc6
commit 2039a18
Show file tree

Hide file tree

Showing 19 changed files with 404 additions and 350 deletions.
diff --git a/.gitignore b/.gitignore
@@ -35,7 +35,7 @@ node_modules/
 *.nuget.props
 *.nuget.targets
 autobahnreports/
-signalr-client.js
 site.min.css
 .idea/
 .vscode/
+signalr-client/
diff --git a/package.json b/package.json
@@ -6,19 +6,27 @@
   "directories": {
     "test": "test"
   },
-  "scripts": {},
+  "scripts": {
+    "gulp": "gulp"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/aspnet/SignalR.git"
   },
   "author": "Microsoft",
-  "license": "MIT",
+  "license": "Apache-2.0",
   "bugs": {
     "url": "https://github.com/aspnet/SignalR/issues"
   },
   "homepage": "https://github.com/aspnet/SignalR#readme",
   "devDependencies": {
+    "browserify": "^13.1.1",
+    "del": "^2.2.2",
     "gulp": "^3.9.1",
-    "jasmine": "^2.5.2"
+    "gulp-typescript": "^3.1.3",
+    "jasmine": "^2.5.2",
+    "typescript": "^2.0.10",
+    "vinyl-source-stream": "^1.1.0",
+    "yargs": "^6.4.0"
   }
 }
diff --git a/samples/ChatSample/Views/Home/Index.cshtml b/samples/ChatSample/Views/Home/Index.cshtml
@@ -2,34 +2,6 @@
     ViewData["Title"] = "Chat";
 }
 
-<script src="~/js/signalr-client.js"></script>
-<script>
-        document.addEventListener('DOMContentLoaded', () => {
-            let connection = new RpcConnection(`http://${document.location.host}/chat`, 'formatType=json&format=text');
-
-            connection.on('Send', function (message) {
-                var child = document.createElement('li');
-                child.innerText = message;
-                document.getElementById('messages').appendChild(child);
-            });
-
-            connection.start();
-
-            document.getElementById('sendmessage').addEventListener('submit', event => {
-                let data = document.getElementById('new-message').value;
-
-                connection.invoke('ChatSample.Hubs.Chat.Send', data, 'json').catch(err => {
-                    var child = document.createElement('li');
-                    child.style.color = 'red';
-                    child.innerText = err;
-                    document.getElementById('messages').appendChild(child);
-                });
-
-                event.preventDefault();
-            });
-        });
-</script>
-
 <div id="chat-area">
     <ul id="messages"></ul>
     <ul id="users"></ul>
@@ -39,4 +11,29 @@
         <input type="text" id="new-message" />
         <input type="submit" id="send" value="Send" class="send" />
     </form>
-</div>
+</div>
+<script src="lib/signalr-client/signalr-client.js"></script>
+<script>
+let connection = new signalR.RpcConnection(`http://${document.location.host}/chat`, 'formatType=json&format=text');
+
+connection.on('Send', function (message) {
+    var child = document.createElement('li');
+    child.innerText = message;
+    document.getElementById('messages').appendChild(child);
+});
+
+connection.start();
+
+document.getElementById('sendmessage').addEventListener('submit', event => {
+    let data = document.getElementById('new-message').value;
+
+    connection.invoke('ChatSample.Hubs.Chat.Send', data, 'json').catch(err => {
+        var child = document.createElement('li');
+        child.style.color = 'red';
+        child.innerText = err;
+        document.getElementById('messages').appendChild(child);
+    });
+
+    event.preventDefault();
+});
+</script>
diff --git a/samples/ChatSample/project.json b/samples/ChatSample/project.json
@@ -91,7 +91,9 @@
   },
 
   "scripts": {
-    "precompile": [ "dotnet bundle", "tsc --project ../../src/Microsoft.AspNetCore.SignalR.Client.TS/ --out wwwroot/js/signalr-client.js" ],
+    "precompile": [ "dotnet bundle",
+      "npm install",
+      "npm run gulp -- --gulpfile %project:Directory%/../../src/Microsoft.AspNetCore.SignalR.Client.TS/gulpfile.js bundle-client --bundleOutDir %project:Directory%/wwwroot/lib/signalr-client/" ],
     "prepublish": [ "bower install" ],
     "postpublish": [ "dotnet publish-iis --publish-folder %publish:OutputPath% --framework %publish:FullTargetFramework%" ]
   }

diff --git a/samples/ChatSample/wwwroot/_references.js b/samples/ChatSample/wwwroot/_references.js
@@ -1,5 +1,4 @@
 /// <autosync enabled="true" />
-/// <reference path="js/signalr-client.js" />
 /// <reference path="js/site.js" />
 /// <reference path="lib/bootstrap/dist/js/bootstrap.js" />
 /// <reference path="lib/jquery/dist/jquery.js" />

diff --git a/samples/SocketsSample/project.json b/samples/SocketsSample/project.json
@@ -44,7 +44,9 @@
   },
 
   "scripts": {
-    "precompile": [ "tsc --project ../../src/Microsoft.AspNetCore.SignalR.Client.TS/ --out wwwroot/js/signalr-client.js" ],
+    "precompile": [
+      "npm install",
+      "npm run gulp -- --gulpfile %project:Directory%/../../src/Microsoft.AspNetCore.SignalR.Client.TS/gulpfile.js bundle-client --bundleOutDir %project:Directory%/wwwroot/lib/signalr-client/" ],
     "postpublish": [ "dotnet publish-iis --publish-folder %publish:OutputPath% --framework %publish:FullTargetFramework%" ]
   }
 }
diff --git a/samples/SocketsSample/wwwroot/.gitignore b/samples/SocketsSample/wwwroot/.gitignore
diff --git a/samples/SocketsSample/wwwroot/hubs.html b/samples/SocketsSample/wwwroot/hubs.html
@@ -3,116 +3,6 @@
 <head>
     <meta charset="utf-8" />
     <title></title>
-    <script src="js/signalr-client.js"></script>
-    <script>
-        var isConnected = false;
-        function getParameterByName(name, url) {
-            if (!url) {
-                url = window.location.href;
-            }
-            name = name.replace(/[\[\]]/g, "\\$&");
-            var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
-                results = regex.exec(url);
-            if (!results) return null;
-            if (!results[2]) return '';
-            return decodeURIComponent(results[2].replace(/\+/g, " "));
-        }
-
-        function click(id, callback) {
-            document.getElementById(id).addEventListener('click', event => {
-                callback(event);
-                event.preventDefault();
-            });
-        }
-
-        function invoke(connection, method, ...args) {
-            if (!isConnected) {
-                return;
-            }
-            var argsArray = Array.prototype.slice.call(arguments);
-            connection.invoke.apply(connection, argsArray.slice(1))
-                    .then(result => {
-                        console.log("invocation completed successfully: " + (result === null ? '(null)' : result));
-
-                        if (result) {
-                            addLine(result);
-                        }
-                    })
-                    .catch(err => {
-                        addLine(err, 'red');
-                    });
-        }
-
-        function getText(id) {
-            return document.getElementById(id).value;
-        }
-
-        document.addEventListener('DOMContentLoaded', () => {
-            let transport = getParameterByName('transport') || 'webSockets';
-
-            document.getElementById('head1').innerHTML = transport;
-
-            let connection = new RpcConnection(`http://${document.location.host}/hubs`, 'formatType=json&format=text');
-            connection.on('Send', msg => {
-                addLine(msg);
-            });
-
-            connection.connectionClosed = e => {
-                if (e) {
-                    addLine('Connection closed with error: ' + e, 'red');
-                }
-                else {
-                    addLine('Disconnected', 'green');
-                }
-            }
-
-            click('connect', event => {
-                connection.start(transport)
-                    .then(() => {
-                        isConnected = true;
-                        addLine('Connected successfully', 'green');
-                    })
-                .catch(err => {
-                    addLine(err, 'red');
-                });
-            });
-
-            click('disconnect', event => {
-                connection.stop();
-                isConnected = false;
-            });
-
-            click('broadcast', event => {
-                let data = getText('msg');
-                invoke(connection, 'SocketsSample.Hubs.Chat.Send', data);
-            });
-
-            click('join-group', event => {
-                let groupName = getText('msg');
-                invoke(connection, 'SocketsSample.Hubs.Chat.JoinGroup', groupName);
-            });
-
-            click('leave-group', event => {
-                let groupName = getText('msg');
-                invoke(connection, 'SocketsSample.Hubs.Chat.LeaveGroup', groupName);
-            });
-
-            click('groupmsg', event => {
-                let groupName = getText('target');
-                let message = getText('message');
-                invoke(connection, 'SocketsSample.Hubs.Chat.SendToGroup', groupName, message);
-            });
-        });
-
-        function addLine(line, color) {
-            var child = document.createElement('li');
-            if (color) {
-                child.style.color = color;
-            }
-            child.innerText = line;
-            document.getElementById('messages').appendChild(child);
-        }
-    </script>
 </head>
 <body>
     <h1 id="head1"></h1>
@@ -160,4 +50,113 @@ <h4>Private Message</h4>
 
     <ul id="messages"></ul>
 </body>
-</html>
+</html>
+<script src="lib/signalr-client/signalr-client.js"></script>
+<script>
+var isConnected = false;
+function getParameterByName(name, url) {
+    if (!url) {
+        url = window.location.href;
+    }
+    name = name.replace(/[\[\]]/g, "\\$&");
+    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
+        results = regex.exec(url);
+    if (!results) return null;
+    if (!results[2]) return '';
+    return decodeURIComponent(results[2].replace(/\+/g, " "));
+}
+
+function click(id, callback) {
+    document.getElementById(id).addEventListener('click', event => {
+        callback(event);
+        event.preventDefault();
+    });
+}
+
+function invoke(connection, method, ...args) {
+    if (!isConnected) {
+        return;
+    }
+    var argsArray = Array.prototype.slice.call(arguments);
+    connection.invoke.apply(connection, argsArray.slice(1))
+            .then(result => {
+                console.log("invocation completed successfully: " + (result === null ? '(null)' : result));
+
+                if (result) {
+                    addLine(result);
+                }
+            })
+            .catch(err => {
+                addLine(err, 'red');
+            });
+}
+
+function getText(id) {
+    return document.getElementById(id).value;
+}
+
+function addLine(line, color) {
+    var child = document.createElement('li');
+    if (color) {
+        child.style.color = color;
+    }
+    child.innerText = line;
+    document.getElementById('messages').appendChild(child);
+}
+
+let transport = getParameterByName('transport') || 'webSockets';
+
+document.getElementById('head1').innerHTML = transport;
+
+let connection = new signalR.RpcConnection(`http://${document.location.host}/hubs`, 'formatType=json&format=text');
+connection.on('Send', msg => {
+    addLine(msg);
+});
+
+connection.connectionClosed = e => {
+    if (e) {
+        addLine('Connection closed with error: ' + e, 'red');
+    }
+    else {
+        addLine('Disconnected', 'green');
+    }
+}
+
+click('connect', event => {
+    connection.start(transport)
+        .then(() => {
+            isConnected = true;
+            addLine('Connected successfully', 'green');
+        })
+    .catch(err => {
+        addLine(err, 'red');
+    });
+});
+
+click('disconnect', event => {
+    connection.stop();
+    isConnected = false;
+});
+
+click('broadcast', event => {
+    let data = getText('msg');
+    invoke(connection, 'SocketsSample.Hubs.Chat.Send', data);
+});
+
+click('join-group', event => {
+    let groupName = getText('msg');
+    invoke(connection, 'SocketsSample.Hubs.Chat.JoinGroup', groupName);
+});
+
+click('leave-group', event => {
+    let groupName = getText('msg');
+    invoke(connection, 'SocketsSample.Hubs.Chat.LeaveGroup', groupName);
+});
+
+click('groupmsg', event => {
+    let groupName = getText('target');
+    let message = getText('message');
+    invoke(connection, 'SocketsSample.Hubs.Chat.SendToGroup', groupName, message);
+});
+
+</script>
diff --git a/src/Microsoft.AspNetCore.SignalR.Client.TS/Connection.ts b/src/Microsoft.AspNetCore.SignalR.Client.TS/Connection.ts
@@ -1,11 +1,13 @@
+import { ITransport, WebSocketTransport, ServerSentEventsTransport, LongPollingTransport } from "./Transports"
+import { HttpClient } from "./HttpClient"
 
 enum ConnectionState {
     Disconnected,
     Connecting,
     Connected
 }
 
-class Connection {
+export class Connection {
     private connectionState: ConnectionState;
     private url: string;
     private queryString: string;

diff --git a/src/Microsoft.AspNetCore.SignalR.Client.TS/HttpClient.ts b/src/Microsoft.AspNetCore.SignalR.Client.TS/HttpClient.ts
@@ -1,4 +1,4 @@
-class HttpClient {
+export class HttpClient {
     get(url: string): Promise<string> {
         return this.xhr("GET", url);
     }