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;