Add SignalR web worker sample and test (#7378)

src/SignalR/clients/ts/FunctionalTests/FunctionalTests.csproj

@@ -1,4 +1,4 @@
-<Project Sdk="Microsoft.NET.Sdk.Web">
+<Project Sdk="Microsoft.NET.Sdk.Web">
 
   <PropertyGroup>
     <TargetFramework>netcoreapp3.0</TargetFramework>
@@ -21,6 +21,7 @@
     <None Remove="ts\Utils.ts" />
     <None Remove="ts\WebDriverReporter.ts" />
     <None Remove="ts\WebSocketTests.ts" />
+    <None Remove="ts\WebWorkerTests.ts" />
   </ItemGroup>
 
   <ItemGroup>
@@ -49,8 +50,8 @@
     <TypeScriptCompile Include="ts\index.ts" />
     <TypeScriptCompile Include="ts\TestLogger.ts" />
     <TypeScriptCompile Include="ts\Utils.ts" />
-    <TypeScriptCompile Include="ts\WebDriverReporter.ts" />
     <TypeScriptCompile Include="ts\WebSocketTests.ts" />
+    <TypeScriptCompile Include="ts\WebWorkerTests.ts" />
   </ItemGroup>
 
   <Target Name="ClientBuild" BeforeTargets="AfterBuild">
@@ -65,10 +66,12 @@
       <Copy SourceFiles="@(JasmineFiles)" DestinationFolder="$(MSBuildProjectDirectory)/wwwroot/lib/jasmine" />
 
       <ItemGroup>
-        <SignalRJSClientFiles Include="$(MSBuildThisFileDirectory)node_modules/@aspnet/signalr/dist/browser/*" />
+        <SignalRJSBrowserClientFiles Include="$(MSBuildThisFileDirectory)node_modules/@aspnet/signalr/dist/browser/*" />
-        <SignalRJSClientFiles Include="$(MSBuildThisFileDirectory)node_modules/@aspnet/signalr-protocol-msgpack/dist/browser/*" />
+        <SignalRJSBrowserClientFiles Include="$(MSBuildThisFileDirectory)node_modules/@aspnet/signalr-protocol-msgpack/dist/browser/*" />
+        <SignalRJSWebWorkerClientFiles Include="$(MSBuildThisFileDirectory)node_modules/@aspnet/signalr/dist/webworker/*" />
       </ItemGroup>
-      <Copy SourceFiles="@(SignalRJSClientFiles)" DestinationFolder="$(MSBuildThisFileDirectory)/wwwroot/lib/signalr" />
+      <Copy SourceFiles="@(SignalRJSBrowserClientFiles)" DestinationFolder="$(MSBuildThisFileDirectory)/wwwroot/lib/signalr" />
+      <Copy SourceFiles="@(SignalRJSWebWorkerClientFiles)" DestinationFolder="$(MSBuildThisFileDirectory)/wwwroot/lib/signalr-webworker" />
  </Target>
 
 </Project>

src/SignalR/clients/ts/FunctionalTests/scripts/karma.local.conf.js

@@ -8,6 +8,7 @@ try {
     const ChromeHeadlessBrowser = require("karma-chrome-launcher")["launcher:ChromeHeadless"][1];
     const ChromiumHeadlessBrowser = require("karma-chrome-launcher")["launcher:ChromiumHeadless"][1];
     const FirefoxHeadlessBrowser = require("karma-firefox-launcher")["launcher:FirefoxHeadless"][1];
+    const FirefoxDeveloperHeadlessBrowser = require("karma-firefox-launcher")["launcher:FirefoxDeveloperHeadless"][1];
     const EdgeBrowser = require("karma-edge-launcher")["launcher:Edge"][1];
     const SafariBrowser = require("karma-safari-launcher")["launcher:Safari"][1];
     const IEBrowser = require("karma-ie-launcher")["launcher:IE"][1];
@@ -33,16 +34,20 @@ try {
       if (path && browserExists(path)) {
         console.log(`Located ${name} at ${path}.`);
         browsers.push(name);
+        return true;
       }
       else {
         console.log(`Unable to locate ${name}. Skipping.`);
+        return false;
       }
     }
 
     // We use the launchers themselves to figure out if the browser exists. It's a bit sneaky, but it works.
     tryAddBrowser("ChromeHeadlessNoSandbox", new ChromeHeadlessBrowser(() => { }, {}));
     tryAddBrowser("ChromiumHeadlessIgnoreCert", new ChromiumHeadlessBrowser(() => { }, {}));
-    tryAddBrowser("FirefoxHeadless", new FirefoxHeadlessBrowser(0, () => { }, {}));
+    if (!tryAddBrowser("FirefoxHeadless", new FirefoxHeadlessBrowser(0, () => { }, {}))) {
+      tryAddBrowser("FirefoxDeveloperHeadless", new FirefoxDeveloperHeadlessBrowser(0, () => { }, {}));
+    }
 
     // We need to receive an argument from the caller, but globals don't seem to work, so we use an environment variable.
     if (process.env.ASPNETCORE_SIGNALR_TEST_ALL_BROWSERS === "true") {

src/SignalR/clients/ts/FunctionalTests/ts/WebWorkerTests.ts

@@ -0,0 +1,70 @@
+// Copyright (c) .NET Foundation. All rights reserved.
+// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
+
+import { ENDPOINT_BASE_URL } from "./Common";
+
+// On slower CI machines, these tests sometimes take longer than 5s
+jasmine.DEFAULT_TIMEOUT_INTERVAL = 10 * 1000;
+
+describe("WebWorkers", () => {
+    it("can use SignalR client", (done) => {
+        if (typeof window !== "undefined" && (window as any).Worker) {
+            const workerSrc = `
+                var connection = null;
+
+                onmessage = function (e) {
+                    if (connection === null) {
+                        postMessage('initialized');
+
+                        importScripts(e.data + '/lib/signalr-webworker/signalr.js');
+
+                        connection = new signalR.HubConnectionBuilder()
+                            .withUrl(e.data + '/testhub')
+                            .build();
+
+                        connection.on('message', function (message) {
+                            postMessage('Received message: ' + message);
+                        });
+
+                        connection.start().then(function () {
+                            postMessage('connected');
+                        });
+                    } else if (connection.state == signalR.HubConnectionState.Connected) {
+                        connection.invoke('invokeWithString', e.data);
+                    } else {
+                        postMessage('Attempted to send message while disconnected.')
+                    }
+                }`;
+
+            // Load worker from a blob since workers MUST come from the same origin despite CORS configuration.
+            // https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers#Spawning_subworkers
+            const blob = new Blob([workerSrc], { type: "application/javascript" });
+            const worker = new Worker(URL.createObjectURL(blob));
+
+            const testMessage = "Hello World!";
+
+            const initWorkerTimeout = setTimeout(() => {
+                console.log("Web workers are supported by this browser, but don't work!?");
+                worker.terminate();
+                done();
+            }, jasmine.DEFAULT_TIMEOUT_INTERVAL / 2);
+
+            worker.postMessage(ENDPOINT_BASE_URL);
+
+            worker.onmessage = (e) => {
+                if (e.data === "initialized") {
+                    clearTimeout(initWorkerTimeout);
+                } else if (e.data === "connected") {
+                    worker.postMessage(testMessage);
+                } else {
+                    expect(e.data).toBe(`Received message: ${testMessage}`);
+                    worker.terminate();
+                    done();
+                }
+            };
+        } else {
+            console.log("Web workers are not supported by this browser!");
+            done();
+        }
+    });
+});

src/SignalR/clients/ts/FunctionalTests/ts/index.ts

@@ -11,3 +11,4 @@ import "./LogBannerReporter";
 import "./ConnectionTests";
 import "./HubConnectionTests";
 import "./WebSocketTests";
+import "./WebWorkerTests";

src/SignalR/samples/SignalRSamples/SignalRSamples.csproj

@@ -24,10 +24,12 @@
 
   <Target Name="CopyTSClient" BeforeTargets="AfterBuild">
     <ItemGroup>
-      <SignalRJSClientFiles Include="$(MSBuildThisFileDirectory)..\..\clients\ts\signalr\dist\browser\*" />
+      <SignalRBrowserJSClientFiles Include="$(MSBuildThisFileDirectory)..\..\clients\ts\signalr\dist\browser\*" />
-      <SignalRJSClientFiles Include="$(MSBuildThisFileDirectory)..\..\clients\ts\signalr-protocol-msgpack\dist\browser\*" />
+      <SignalRBrowserJSClientFiles Include="$(MSBuildThisFileDirectory)..\..\clients\ts\signalr-protocol-msgpack\dist\browser\*" />
+      <SignalRWebWorkerJSClientFiles Include="$(MSBuildThisFileDirectory)..\..\clients\ts\signalr\dist\webworker\*" />
     </ItemGroup>
-    <Copy SourceFiles="@(SignalRJSClientFiles)" DestinationFolder="$(MSBuildThisFileDirectory)wwwroot\lib\signalr" />
+    <Copy SourceFiles="@(SignalRBrowserJSClientFiles)" DestinationFolder="$(MSBuildThisFileDirectory)wwwroot\lib\signalr" />
+    <Copy SourceFiles="@(SignalRWebWorkerJSClientFiles)" DestinationFolder="$(MSBuildThisFileDirectory)wwwroot\lib\signalr-webworker"/>
 
     <ItemGroup>
       <MsgPackClientFiles Include="$(MSBuildThisFileDirectory)..\..\clients\ts\signalr-protocol-msgpack\node_modules\msgpack5\dist\*" />

src/SignalR/samples/SignalRSamples/wwwroot/worker.html

@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <title></title>
+</head>
+<body>
+    <h1 id="head1">SignalR Web Worker Sample</h1>
+
+    <form class="form-inline">
+        <div class="input-append">
+            <input type="text" id="message-text" placeholder="Type a message" />
+            <input type="submit" id="broadcast" class="btn" value="Broadcast" disabled />
+        </div>
+    </form>
+
+    <ul id="message-list"></ul>
+
+    <script>
+        let messageText = document.getElementById('message-text');
+        let broadcastButton = document.getElementById('broadcast');
+        let messageList = document.getElementById('message-list');
+
+        function addLine(line) {
+            var child = document.createElement('li');
+            child.innerText = line;
+            messageList.appendChild(child);
+        }
+
+        if (window.Worker) {
+            var worker = new Worker('worker.js')
+
+            worker.postMessage(window.location.origin);
+
+            broadcastButton.addEventListener('click', function (event) {
+                worker.postMessage(messageText.value);
+                messageText.value = '';
+                event.preventDefault();
+            });
+
+            worker.onmessage = function (e) {
+                if (e.data === 'connected') {
+                    broadcastButton.disabled = false;
+                    addLine('Connection started.');
+                } else {
+                    addLine(e.data);
+                }
+            };
+        } else {
+            addLine('Web workers are not supported by this browser!')
+        }
+    </script>
+</body>
+</html>

src/SignalR/samples/SignalRSamples/wwwroot/worker.js

@@ -0,0 +1,23 @@
+importScripts('lib/signalr-webworker/signalr.js');
+
+var connection = null;
+
+onmessage = function (e) {
+    if (connection === null) {
+        connection = new signalR.HubConnectionBuilder()
+            .withUrl(e.data + '/default')
+            .build();
+
+        connection.on('send', function (message) {
+            postMessage('Received message: ' + message);
+        });
+
+        connection.start().then(function () {
+            postMessage('connected');
+        });
+    } else if (connection.connectionState == signalR.HubConnectionState.Connected) {
+        connection.invoke('send', e.data);
+    } else {
+        postMessage('Attempted to send message while disconnected.')
+    }
+};