Blazor Disable Non-WebSockets Transports by Default

src/Components/Server/src/Builder/ComponentEndpointRouteBuilderExtensions.cs

@@ -49,7 +49,8 @@ public static ComponentEndpointConventionBuilder MapBlazorHub(
                 throw new ArgumentNullException(nameof(path));
             }
 
-            return endpoints.MapBlazorHub(path, configureOptions: _ => { });
+            // Only support the WebSockets transport type by default
+            return endpoints.MapBlazorHub(path, configureOptions: options => { options.Transports = HttpTransportType.WebSockets; });
         }
 
         /// <summary>

src/Components/Web.JS/src/Boot.Server.ts

@@ -1,6 +1,6 @@
 import { DotNet } from '@microsoft/dotnet-js-interop';
 import { Blazor } from './GlobalExports';
-import { HubConnectionBuilder, HubConnection } from '@microsoft/signalr';
+import { HubConnectionBuilder, HubConnection, HttpTransportType } from '@microsoft/signalr';
 import { MessagePackHubProtocol } from '@microsoft/signalr-protocol-msgpack';
 import { showErrorNotification } from './BootErrors';
 import { shouldAutoStart } from './BootCommon';
@@ -85,7 +85,7 @@ async function initializeConnection(options: CircuitStartOptions, logger: Logger
   (hubProtocol as unknown as { name: string }).name = 'blazorpack';
 
   const connectionBuilder = new HubConnectionBuilder()
-    .withUrl('_blazor')
+    .withUrl('_blazor', HttpTransportType.WebSockets)
     .withHubProtocol(hubProtocol);
 
   options.configureSignalR(connectionBuilder);
@@ -130,6 +130,10 @@ async function initializeConnection(options: CircuitStartOptions, logger: Logger
     await connection.start();
   } catch (ex) {
     unhandledError(connection, ex, logger);
+
+    if (ex.message.includes('UnsupportedTransportWebSocketsError')) {
+      showErrorNotification('Unable to connect, please ensure you are using an updated browser and WebSockets are available.');
+    }
   }
 
   DotNet.attachDispatcher({

src/Components/Web.JS/src/BootErrors.ts

@@ -1,9 +1,13 @@
 let hasFailed = false;
 
-export async function showErrorNotification() {
+export async function showErrorNotification(customErrorMessage: string = '') {
     let errorUi = document.querySelector('#blazor-error-ui') as HTMLElement;
     if (errorUi) {
         errorUi.style.display = 'block';
+
+        if (customErrorMessage && errorUi.firstChild) {
+            errorUi.firstChild.textContent = `\n\t${customErrorMessage}\t\n`;
+        }
     }
 
     if (!hasFailed) {

src/SignalR/clients/ts/signalr/src/HttpConnection.ts

@@ -447,7 +447,9 @@ export class HttpConnection implements IConnection {
                     if ((transport === HttpTransportType.WebSockets && !this._options.WebSocket) ||
                         (transport === HttpTransportType.ServerSentEvents && !this._options.EventSource)) {
                         this._logger.log(LogLevel.Debug, `Skipping transport '${HttpTransportType[transport]}' because it is not supported in your environment.'`);
-                        return new Error(`'${HttpTransportType[transport]}' is not supported in your environment.`);
+                        const unsupportedTransportError = new Error(`'${HttpTransportType[transport]}' is not supported in your environment.`);
+                        unsupportedTransportError.name = `UnsupportedTransport${HttpTransportType[transport]}Error`;
+                        return unsupportedTransportError;
                     } else {
                         this._logger.log(LogLevel.Debug, `Selecting transport '${HttpTransportType[transport]}'.`);
                         try {