Blazor Byte Array Interop Support (#33015)

* Blazorserver Byte Array Interop Support
* Byte Array Interop in WASM (#33104)
* E2E Tests
* PR Feedback

Author: TanayParikh

src/Components/Server/src/BlazorPack/BlazorPackHubProtocolWorker.cs

@@ -2,6 +2,7 @@
 // Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
 
 using System;
+using System.Buffers;
 using System.IO;
 using MessagePack;
 using Microsoft.AspNetCore.SignalR.Protocol;
@@ -34,6 +35,20 @@ protected override object DeserializeObject(ref MessagePackReader reader, Type t
                 {
                     return reader.ReadSingle();
                 }
+                else if (type == typeof(byte[]))
+                {
+                    var bytes = reader.ReadBytes();
+                    if (!bytes.HasValue)
+                    {
+                        return null;
+                    }
+                    else if (bytes.Value.Length == 0)
+                    {
+                        return Array.Empty<byte>();
+                    }
+
+                    return bytes.Value.ToArray();
+                }
             }
             catch (Exception ex)
             {
@@ -75,6 +90,10 @@ protected override void Serialize(ref MessagePackWriter writer, Type type, objec
                     writer.Write(bytes);
                     break;
 
+                case byte[] byteArray:
+                    writer.Write(byteArray);
+                    break;
+
                 default:
                     throw new FormatException($"Unsupported argument type {type}");
             }

src/Components/Server/src/Circuits/CircuitHost.cs

@@ -388,6 +388,31 @@ await Renderer.Dispatcher.InvokeAsync(() =>
             }
         }
 
+        // ReceiveByteArray is used in a fire-and-forget context, so it's responsible for its own
+        // error handling.
+        internal async Task ReceiveByteArray(int id, byte[] data)
+        {
+            AssertInitialized();
+            AssertNotDisposed();
+
+            try
+            {
+                await Renderer.Dispatcher.InvokeAsync(() =>
+                {
+                    Log.ReceiveByteArraySuccess(_logger, id);
+                    DotNetDispatcher.ReceiveByteArray(JSRuntime, id, data);
+                });
+            }
+            catch (Exception ex)
+            {
+                // An error completing JS interop means that the user sent invalid data, a well-behaved
+                // client won't do this.
+                Log.ReceiveByteArrayException(_logger, id, ex);
+                await TryNotifyClientErrorAsync(Client, GetClientErrorMessage(ex, "Invalid byte array."));
+                UnhandledException?.Invoke(this, new UnhandledExceptionEventArgs(ex, isTerminating: false));
+            }
+        }
+
         // DispatchEvent is used in a fire-and-forget context, so it's responsible for its own
         // error handling.
         public async Task DispatchEvent(string eventDescriptorJson, string eventArgsJson)
@@ -603,6 +628,8 @@ private static class Log
             private static readonly Action<ILogger, Exception> _endInvokeDispatchException;
             private static readonly Action<ILogger, long, string, Exception> _endInvokeJSFailed;
             private static readonly Action<ILogger, long, Exception> _endInvokeJSSucceeded;
+            private static readonly Action<ILogger, long, Exception> _receiveByteArraySuccess;
+            private static readonly Action<ILogger, long, Exception> _receiveByteArrayException;
             private static readonly Action<ILogger, Exception> _dispatchEventFailedToParseEventData;
             private static readonly Action<ILogger, string, Exception> _dispatchEventFailedToDispatchEvent;
             private static readonly Action<ILogger, string, CircuitId, Exception> _locationChange;
@@ -645,6 +672,8 @@ private static class EventIds
                 public static readonly EventId LocationChangeFailed = new EventId(210, "LocationChangeFailed");
                 public static readonly EventId LocationChangeFailedInCircuit = new EventId(211, "LocationChangeFailedInCircuit");
                 public static readonly EventId OnRenderCompletedFailed = new EventId(212, "OnRenderCompletedFailed");
+                public static readonly EventId ReceiveByteArraySucceeded = new EventId(213, "ReceiveByteArraySucceeded");
+                public static readonly EventId ReceiveByteArrayException = new EventId(214, "ReceiveByteArrayException");
             }
 
             static Log()
@@ -764,6 +793,16 @@ static Log()
                     EventIds.EndInvokeJSSucceeded,
                     "The JS interop call with callback id '{AsyncCall}' succeeded.");
 
+                _receiveByteArraySuccess = LoggerMessage.Define<long>(
+                    LogLevel.Debug,
+                    EventIds.ReceiveByteArraySucceeded,
+                    "The ReceiveByteArray call with id '{id}' succeeded.");
+
+                _receiveByteArrayException = LoggerMessage.Define<long>(
+                    LogLevel.Debug,
+                    EventIds.ReceiveByteArrayException,
+                    "The ReceiveByteArray call with id '{id}' failed.");
+
                 _dispatchEventFailedToParseEventData = LoggerMessage.Define(
                     LogLevel.Debug,
                     EventIds.DispatchEventFailedToParseEventData,
@@ -826,6 +865,8 @@ public static void CircuitHandlerFailed(ILogger logger, CircuitHandler handler,
             public static void EndInvokeDispatchException(ILogger logger, Exception ex) => _endInvokeDispatchException(logger, ex);
             public static void EndInvokeJSFailed(ILogger logger, long asyncHandle, string arguments) => _endInvokeJSFailed(logger, asyncHandle, arguments, null);
             public static void EndInvokeJSSucceeded(ILogger logger, long asyncCall) => _endInvokeJSSucceeded(logger, asyncCall, null);
+            internal static void ReceiveByteArraySuccess(ILogger logger, long id) => _receiveByteArraySuccess(logger, id, null);
+            internal static void ReceiveByteArrayException(ILogger logger, long id, Exception ex) => _receiveByteArrayException(logger, id, ex);
             public static void DispatchEventFailedToParseEventData(ILogger logger, Exception ex) => _dispatchEventFailedToParseEventData(logger, ex);
             public static void DispatchEventFailedToDispatchEvent(ILogger logger, string eventHandlerId, Exception ex) => _dispatchEventFailedToDispatchEvent(logger, eventHandlerId ?? "", ex);
 

src/Components/Server/src/Circuits/RemoteJSRuntime.cs

@@ -17,14 +17,22 @@ internal class RemoteJSRuntime : JSRuntime
         private readonly ILogger<RemoteJSRuntime> _logger;
         private CircuitClientProxy _clientProxy;
         private bool _permanentlyDisconnected;
+        private readonly long _maximumIncomingBytes;
+        private int _byteArraysToBeRevivedTotalBytes;
 
         public ElementReferenceContext ElementReferenceContext { get; }
 
         public bool IsInitialized => _clientProxy is not null;
 
-        public RemoteJSRuntime(IOptions<CircuitOptions> options, ILogger<RemoteJSRuntime> logger)
+        public RemoteJSRuntime(
+            IOptions<CircuitOptions> circuitOptions,
+            IOptions<HubOptions> hubOptions,
+            ILogger<RemoteJSRuntime> logger)
         {
-            _options = options.Value;
+            _options = circuitOptions.Value;
+            _maximumIncomingBytes = hubOptions.Value.MaximumReceiveMessageSize is null
+                ? long.MaxValue
+                : hubOptions.Value.MaximumReceiveMessageSize.Value;
             _logger = logger;
             DefaultAsyncTimeout = _options.JSInteropDefaultCallTimeout;
             ElementReferenceContext = new WebElementReferenceContext(this);
@@ -75,6 +83,11 @@ protected override void EndInvokeDotNet(DotNetInvocationInfo invocationInfo, in
             }
         }
 
+        protected override void SendByteArray(int id, byte[] data)
+        {
+            _clientProxy.SendAsync("JS.ReceiveByteArray", id, data);
+        }
+
         protected override void BeginInvokeJS(long asyncHandle, string identifier, string argsJson, JSCallResultType resultType, long targetInstanceId)
         {
             if (_clientProxy is null)
@@ -99,6 +112,28 @@ protected override void BeginInvokeJS(long asyncHandle, string identifier, strin
             _clientProxy.SendAsync("JS.BeginInvokeJS", asyncHandle, identifier, argsJson, (int)resultType, targetInstanceId);
         }
 
+        protected override void ReceiveByteArray(int id, byte[] data)
+        {
+            if (id == 0)
+            {
+                // Starting a new transfer, clear out number of bytes read.
+                _byteArraysToBeRevivedTotalBytes = 0;
+            }
+
+            if (_maximumIncomingBytes - data.Length < _byteArraysToBeRevivedTotalBytes)
+            {
+                throw new ArgumentOutOfRangeException("Exceeded the maximum byte array transfer limit for a call.");
+            }
+
+            // We also store the total number of bytes seen so far to compare against
+            // the MaximumIncomingBytes limit.
+            // We take the larger of the size of the array or 4, to ensure we're not inundated
+            // with small/empty arrays.
+            _byteArraysToBeRevivedTotalBytes += Math.Max(4, data.Length);
+
+            base.ReceiveByteArray(id, data);
+        }
+
         public void MarkPermanentlyDisconnected()
         {
             _permanentlyDisconnected = true;

src/Components/Server/src/ComponentHub.cs

@@ -209,6 +209,17 @@ public async ValueTask EndInvokeJSFromDotNet(long asyncHandle, bool succeeded, s
             _ = circuitHost.EndInvokeJSFromDotNet(asyncHandle, succeeded, arguments);
         }
 
+        public async ValueTask ReceiveByteArray(int id, byte[] data)
+        {
+            var circuitHost = await GetActiveCircuitAsync();
+            if (circuitHost == null)
+            {
+                return;
+            }
+
+            await circuitHost.ReceiveByteArray(id, data);
+        }
+
         public async ValueTask DispatchBrowserEvent(string eventDescriptor, string eventArgs)
         {
             var circuitHost = await GetActiveCircuitAsync();

src/Components/Server/test/Circuits/CircuitHostTest.cs

@@ -7,7 +7,6 @@
 using System.Reflection;
 using System.Threading;
 using System.Threading.Tasks;
-using Microsoft.AspNetCore.Components.Web.Rendering;
 using Microsoft.AspNetCore.DataProtection;
 using Microsoft.AspNetCore.SignalR;
 using Microsoft.Extensions.DependencyInjection;

src/Components/Server/test/Circuits/TestCircuitHost.cs

@@ -3,7 +3,6 @@
 
 using System;
 using System.Collections.Generic;
-using Microsoft.AspNetCore.Components.Web.Rendering;
 using Microsoft.AspNetCore.SignalR;
 using Microsoft.Extensions.DependencyInjection;
 using Microsoft.Extensions.Logging;
@@ -29,7 +28,7 @@ public static CircuitHost Create(
         {
             serviceScope = serviceScope ?? new AsyncServiceScope(Mock.Of<IServiceScope>());
             clientProxy = clientProxy ?? new CircuitClientProxy(Mock.Of<IClientProxy>(), Guid.NewGuid().ToString());
-            var jsRuntime = new RemoteJSRuntime(Options.Create(new CircuitOptions()), Mock.Of<ILogger<RemoteJSRuntime>>());
+            var jsRuntime = new RemoteJSRuntime(Options.Create(new CircuitOptions()), Options.Create(new HubOptions()), Mock.Of<ILogger<RemoteJSRuntime>>());
 
             if (remoteRenderer == null)
             {
@@ -42,7 +41,7 @@ public static CircuitHost Create(
                     null);
             }
 
-            handlers = handlers ?? Array.Empty<CircuitHandler>();
+            handlers ??= Array.Empty<CircuitHandler>();
             return new TestCircuitHost(
                 circuitId is null ? new CircuitId(Guid.NewGuid().ToString(), Guid.NewGuid().ToString()) : circuitId.Value,
                 serviceScope.Value,

src/Components/Shared/src/ArrayBuilder.cs

@@ -14,6 +14,8 @@ namespace Ignitor
 namespace Microsoft.AspNetCore.Components.WebView
 #elif COMPONENTS_SERVER
 namespace Microsoft.AspNetCore.Components.Server.Circuits
+#elif JS_INTEROP
+namespace Microsoft.JSInterop.Infrastructure
 #else
 namespace Microsoft.AspNetCore.Components.RenderTree
 #endif

src/Components/Web.JS/dist/Release/blazor.server.js

@@ -105,6 +105,7 @@ async function initializeConnection(options: CircuitStartOptions, logger: Logger
   connection.on('JS.AttachComponent', (componentId, selector) => attachRootComponentToLogicalElement(0, circuit.resolveElement(selector), componentId));
   connection.on('JS.BeginInvokeJS', DotNet.jsCallDispatcher.beginInvokeJSFromDotNet);
   connection.on('JS.EndInvokeDotNet', DotNet.jsCallDispatcher.endInvokeDotNetFromJS);
+  connection.on('JS.ReceiveByteArray', DotNet.jsCallDispatcher.receiveByteArray);
 
   const renderQueue = RenderQueue.getOrCreate(logger);
   connection.on('JS.RenderBatch', (batchId: number, batchData: Uint8Array) => {
@@ -134,6 +135,9 @@ async function initializeConnection(options: CircuitStartOptions, logger: Logger
     endInvokeJSFromDotNet: (asyncHandle, succeeded, argsJson): void => {
       connection.send('EndInvokeJSFromDotNet', asyncHandle, succeeded, argsJson);
     },
+    sendByteArray: (id: number, data: Uint8Array): void => {
+      connection.send('ReceiveByteArray', id, data);
+    },
   });
 
   return connection;

src/Components/Web.JS/dist/Release/blazor.webview.js

@@ -1,15 +1,16 @@
+/* eslint-disable array-element-newline */
 import { DotNet } from '@microsoft/dotnet-js-interop';
 import { Blazor } from './GlobalExports';
 import * as Environment from './Environment';
-import { monoPlatform } from './Platform/Mono/MonoPlatform';
+import { byteArrayBeingTransferred, monoPlatform } from './Platform/Mono/MonoPlatform';
 import { renderBatch, getRendererer, attachRootComponentToElement, attachRootComponentToLogicalElement } from './Rendering/Renderer';
 import { SharedMemoryRenderBatch } from './Rendering/RenderBatch/SharedMemoryRenderBatch';
 import { shouldAutoStart } from './BootCommon';
 import { setEventDispatcher } from './Rendering/Events/EventDispatcher';
 import { WebAssemblyResourceLoader } from './Platform/WebAssemblyResourceLoader';
 import { WebAssemblyConfigLoader } from './Platform/WebAssemblyConfigLoader';
 import { BootConfigResult } from './Platform/BootConfig';
-import { Pointer, System_Boolean, System_String } from './Platform/Platform';
+import { Pointer, System_Array, System_Boolean, System_Byte, System_Int, System_Object, System_String } from './Platform/Platform';
 import { WebAssemblyStartOptions } from './Platform/WebAssemblyStartOptions';
 import { WebAssemblyComponentAttacher } from './Platform/WebAssemblyComponentAttacher';
 import { discoverComponents, discoverPersistedState, WebAssemblyComponentDescriptor } from './Services/ComponentDescriptorDiscovery';
@@ -45,6 +46,8 @@ async function boot(options?: Partial<WebAssemblyStartOptions>): Promise<void> {
   // Configure JS interop
   Blazor._internal.invokeJSFromDotNet = invokeJSFromDotNet;
   Blazor._internal.endInvokeDotNetFromJS = endInvokeDotNetFromJS;
+  Blazor._internal.receiveByteArray = receiveByteArray;
+  Blazor._internal.retrieveByteArray = retrieveByteArray;
 
   // Configure environment for execution under Mono WebAssembly with shared-memory rendering
   const platform = Environment.setPlatform(monoPlatform);
@@ -161,6 +164,21 @@ function endInvokeDotNetFromJS(callId: System_String, success: System_Boolean, r
   DotNet.jsCallDispatcher.endInvokeDotNetFromJS(callIdString, successBool, resultJsonOrErrorMessageString);
 }
 
+function receiveByteArray(id: System_Int, data: System_Array<System_Byte>): void {
+  const idLong = id as any as number;
+  const dataByteArray = monoPlatform.toUint8Array(data);
+  DotNet.jsCallDispatcher.receiveByteArray(idLong, dataByteArray);
+}
+
+function retrieveByteArray(): System_Object {
+  if (byteArrayBeingTransferred === null) {
+    throw new Error('Byte array not available for transfer');
+  }
+
+  const typedArray = BINDING.js_typed_array_to_array(byteArrayBeingTransferred);
+  return typedArray;
+}
+
 Blazor.start = boot;
 if (shouldAutoStart()) {
   boot().catch(error => {

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

@@ -4,7 +4,7 @@ import { shouldAutoStart } from './BootCommon';
 import { internalFunctions as navigationManagerFunctions } from './Services/NavigationManager';
 import { setEventDispatcher } from './Rendering/Events/EventDispatcher';
 import { startIpcReceiver } from './Platform/WebView/WebViewIpcReceiver';
-import { sendBrowserEvent, sendAttachPage, sendBeginInvokeDotNetFromJS, sendEndInvokeJSFromDotNet, sendLocationChanged } from './Platform/WebView/WebViewIpcSender';
+import { sendBrowserEvent, sendAttachPage, sendBeginInvokeDotNetFromJS, sendEndInvokeJSFromDotNet, sendByteArray, sendLocationChanged } from './Platform/WebView/WebViewIpcSender';
 import { InputFile } from './InputFile';
 
 let started = false;
@@ -20,6 +20,7 @@ async function boot(): Promise<void> {
   DotNet.attachDispatcher({
     beginInvokeDotNetFromJS: sendBeginInvokeDotNetFromJS,
     endInvokeJSFromDotNet: sendEndInvokeJSFromDotNet,
+    sendByteArray: sendByteArray,
   });
 
   Blazor._internal.InputFile = InputFile;

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

@@ -7,7 +7,7 @@ import { InputFile } from './InputFile';
 import { DefaultReconnectionHandler } from './Platform/Circuits/DefaultReconnectionHandler';
 import { CircuitStartOptions } from './Platform/Circuits/CircuitStartOptions';
 import { WebAssemblyStartOptions } from './Platform/WebAssemblyStartOptions';
-import { Platform, Pointer, System_String, System_Array, System_Object, System_Boolean } from './Platform/Platform';
+import { Platform, Pointer, System_String, System_Array, System_Object, System_Boolean, System_Byte, System_Int } from './Platform/Platform';
 
 interface IBlazor {
   navigateTo: (uri: string, forceLoad: boolean, replace: boolean) => void;
@@ -27,6 +27,8 @@ interface IBlazor {
     InputFile?: typeof InputFile,
     invokeJSFromDotNet?: (callInfo: Pointer, arg0: any, arg1: any, arg2: any) => any;
     endInvokeDotNetFromJS?: (callId: System_String, success: System_Boolean, resultJsonOrErrorMessage: System_String) => void;
+    receiveByteArray?: (id: System_Int, data: System_Array<System_Byte>) => void;
+    retrieveByteArray?: () => System_Object;
     getPersistedState?: () => System_String;
     attachRootComponentToElement?: (arg0: any, arg1: any, arg2: any) => void;
     registeredComponents?: {

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

@@ -101,9 +101,9 @@ async function ensureArrayBufferReadyForSharedMemoryInterop(elem: InputElement,
   getFileById(elem, fileId).arrayBuffer = arrayBuffer;
 }
 
-async function readFileData(elem: InputElement, fileId: number, startOffset: number, count: number): Promise<string> {
+async function readFileData(elem: InputElement, fileId: number, startOffset: number, count: number): Promise<Uint8Array> {
   const arrayBuffer = await getArrayBufferFromFileAsync(elem, fileId);
-  return btoa(String.fromCharCode.apply(null, new Uint8Array(arrayBuffer, startOffset, count) as unknown as number[]));
+  return new Uint8Array(arrayBuffer, startOffset, count);
 }
 
 export function getFileById(elem: InputElement, fileId: number): BrowserFile {
@@ -134,4 +134,4 @@ function getArrayBufferFromFileAsync(elem: InputElement, fileId: number): Promis
   }
 
   return file.readPromise;
-}
+}