抽离BlazorWebview中的.Net与Javascript的互操作库

做这个的目的是想利用 Blazor 中的 Javascript 与 C#中的互操作，但是又不需要加载 Blazor 整个类库，另外 BlazorWebView 组件没有支持直接通过 Http 协议加载 web 页面，调试的时候需要先把后端接口写好，然后前端打包，然后一起调试，感觉很麻烦，因此想能不能把互操作这部分功能单独抽离出来。后面研究了 asp.net core 关于这部分的源码，发现可行，于是抽离出来了这部分功能，由于 Microsoft.JSInterop 这个 nuget 包不支持.Net Framework，趁便还移植到了.Net Framework 平台。正常利用已将近 1 年。现写文章记载追念一下，也给有需要的朋侪研究研究。
一、如何利用

带互操作的 WebView 已经支持了.Net Framework 下的 WPF 和 MAUI 中的安卓端。工作上需要这两个，其他平台临时不支持。官方 nuget 仓库上，上传了最近一个 WPF 的版本。
1、安装

利用 nuget 包管理器搜刮HSoft.WebView.NetFramework.WPF然后安装即可。
2、引入 Webview 组件

打开一个 xaml 文件，引入组件命名空间

1. xmlns:wpf="clr-namespace:HSoft.WebView.NetFramework.WPF;assembly=HSoft.WebView.NetFramework.WPF"

复制代码

利用组件

1. <Window
2.     x:
3.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5.     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
6.     xmlns:local="clr-namespace:TestWVF"
7.     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
8.     xmlns:wpf="clr-namespace:HSoft.WebView.NetFramework.WPF;assembly=HSoft.WebView.NetFramework.WPF"
9.     Title="MainWindow"
10.     Width="800"
11.     Height="450"
12.     mc:Ignorable="d">
13.     <Grid>
14.         <wpf:WebView Source="http://localhost:5173" />
15.     </Grid>
16. </Window>

复制代码

如果是开辟模式下，Source 填写你的前端服务器地址，生产环境，则一样平常填写http://0.0.0.0/index.html。项目新增一个 wwwroot 目录，然后编辑项目文件，添加如下节点，以便把网页文件嵌入程序集。

1. <Window
2.     x:
3.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5.     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
6.     xmlns:local="clr-namespace:TestWVF"
7.     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
8.     xmlns:wpf="clr-namespace:HSoft.WebView.NetFramework.WPF;assembly=HSoft.WebView.NetFramework.WPF"
9.     Title="MainWindow"
10.     Width="800"
11.     Height="450"
12.     mc:Ignorable="d">
13.     <Grid>
14.         <wpf:WebView Source="http://localhost:5173" />
15.     </Grid>
16. </Window>        

复制代码

你的网页启动页面位置如果是这样的wwwroot\index.html，则对应的Source为http://0.0.0.0/index.html。
二、原理

开门见山，借助 Microsoft.JSInterop 和前端的@microsoft/dotnet-js-interop 包，便可实现 Javascript和C#的互操作。这两个包定义除信息传递通道之外的所有必要的信息。因此，我们只需要把传送通道给补充上就可以正常工作。直接利用 Webview2 组件的 IPC 通讯，也就是 chrome.webview.postMessage 和 chrome.webview.addEventListener("message", (e: any))来发送和接受消息。
1、Javascript

在前端引入@microsoft/dotnet-js-interop 包。利用 DotNet.attachDispatcher 创建 dispatcher。

1. import { DotNet } from "@microsoft/dotnet-js-interop";
3. let dispatcher: DotNet.ICallDispatcher;
4. dispatcher = DotNet.attachDispatcher({
5.   sendByteArray: sendByteArray,
6.   beginInvokeDotNetFromJS: beginInvokeDotNetFromJS,
7.   endInvokeJSFromDotNet: endInvokeJSFromDotNet,
8. });

复制代码

重要实现三个函数，这三个函数利用 postMessage 发送消息到.Net 端。

• sendByteArray（当传递参数中含有字节数组的时候调用这个）
  
• beginInvokeDotNetFromJS（从 JS 调用.Net 方法）
  
• endInvokeJSFromDotNet（从.Net 调用 JS，JS 这边处理完毕需要调用此方法告知.Net 调用完毕）
  

sendByteArray

1. function sendByteArray(id: number, data: Uint8Array): void {
2.   const dataBase64Encoded = base64EncodeByteArray(data);
3.   (window as any).chrome.webview.postMessage([
4.     "ReceiveByteArrayFromJS",
5.     id,
6.     dataBase64Encoded,
7.   ]);
8. }

复制代码

beginInvokeDotNetFromJS

1. function beginInvokeDotNetFromJS(
2.   callId: number,
3.   assemblyName: string | null,
4.   methodIdentifier: string,
5.   dotNetObjectId: number | null,
6.   argsJson: string
7. ): void {
8.   console.log("beginInvokeDotNetFromJS");
9.   (window as any).chrome.webview.postMessage([
10.     "beginInvokeDotNetFromJS",
11.     callId ? callId.toString() : null,
12.     assemblyName,
13.     methodIdentifier,
14.     dotNetObjectId || 0,
15.     argsJson,
16.   ]);
17. }

复制代码

endInvokeJSFromDotNet

1. function endInvokeJSFromDotNet(
2.   callId: number,
3.   succeeded: boolean,
4.   resultOrError: any
5. ): void {
6.   console.log("beginInvokeDotNetFromJS");
7.   (window as any).chrome.webview.postMessage([
8.     "endInvokeJSFromDotNet",
9.     callId ? callId.toString() : null,
10.     succeeded,
11.     resultOrError,
12.   ]);
13. }

复制代码

工具函数

1. function base64EncodeByteArray(data: Uint8Array) {
2.   // Base64 encode a (large) byte array
3.   // Note `btoa(String.fromCharCode.apply(null, data as unknown as number[]));`
4.   // isn't sufficient as the `apply` over a large array overflows the stack.
5.   const charBytes = new Array(data.length);
6.   for (var i = 0; i < data.length; i++) {
7.     charBytes[i] = String.fromCharCode(data[i]);
8.   }
9.   const dataBase64Encoded = btoa(charBytes.join(""));
10.   return dataBase64Encoded;
11. }
13. // https://stackoverflow.com/a/21797381
14. // TODO: If the data is large, consider switching over to the native decoder as in https://stackoverflow.com/a/54123275
15. // But don't force it to be async all the time. Yielding execution leads to perceptible lag.
16. function base64ToArrayBuffer(base64: string): Uint8Array {
17.   const binaryString = atob(base64);
18.   const length = binaryString.length;
19.   const result = new Uint8Array(length);
20.   for (let i = 0; i < length; i++) {
21.     result[i] = binaryString.charCodeAt(i);
22.   }
23.   return result;
24. }

复制代码

接收来自.Net 的消息并处理

1. (window as any).chrome.webview.addEventListener("message", (e: any) => {
2.   var ob = JSON.parse(e.data);
4.   switch (ob[0]) {
5.     case "EndInvokeDotNet": {
6.       dispatcher.endInvokeDotNetFromJS(ob[1], ob[2], ob[3]);
7.       break;
8.     }
9.     case "BeginInvokeJS": {
10.       dispatcher.beginInvokeJSFromDotNet(ob[1], ob[2], ob[3], ob[4], ob[5]);
11.       break;
12.     }
13.     case "SendByteArrayToJS": {
14.       let id = ob[1];
15.       let base64Data = ob[2];
16.       const data = base64ToArrayBuffer(base64Data);
17.       dispatcher.receiveByteArray(id,data);
18.       break;
19.     }
20.     default: {
21.       console.error(`不支持的消息类型${e.data}`);
22.     }
23.   }
24. });

复制代码

window 对象增长属性

1. (window as any)["DotNet"] = DotNet;
2. export { DotNet };

复制代码

完整代码

1. import { DotNet } from "@microsoft/dotnet-js-interop";
3. let dispatcher: DotNet.ICallDispatcher;
4. dispatcher = DotNet.attachDispatcher({
5.   sendByteArray: sendByteArray,
6.   beginInvokeDotNetFromJS: beginInvokeDotNetFromJS,
7.   endInvokeJSFromDotNet: endInvokeJSFromDotNet,
8. });function sendByteArray(id: number, data: Uint8Array): void {    const dataBase64Encoded = base64EncodeByteArray(data);    (window as any).chrome.webview.postMessage([      "ReceiveByteArrayFromJS",      id,      dataBase64Encoded,    ]);  }function beginInvokeDotNetFromJS(
9.   callId: number,
10.   assemblyName: string | null,
11.   methodIdentifier: string,
12.   dotNetObjectId: number | null,
13.   argsJson: string
14. ): void {
15.   console.log("beginInvokeDotNetFromJS");
16.   (window as any).chrome.webview.postMessage([
17.     "beginInvokeDotNetFromJS",
18.     callId ? callId.toString() : null,
19.     assemblyName,
20.     methodIdentifier,
21.     dotNetObjectId || 0,
22.     argsJson,
23.   ]);
24. }function endInvokeJSFromDotNet(
25.   callId: number,
26.   succeeded: boolean,
27.   resultOrError: any
28. ): void {
29.   console.log("beginInvokeDotNetFromJS");
30.   (window as any).chrome.webview.postMessage([
31.     "endInvokeJSFromDotNet",
32.     callId ? callId.toString() : null,
33.     succeeded,
34.     resultOrError,
35.   ]);
36. }function base64EncodeByteArray(data: Uint8Array) {  // Base64 encode a (large) byte array  // Note `btoa(String.fromCharCode.apply(null, data as unknown as number[]));`  // isn't sufficient as the `apply` over a large array overflows the stack.  const charBytes = new Array(data.length);  for (var i = 0; i < data.length; i++) {    charBytes[i] = String.fromCharCode(data[i]);  }  const dataBase64Encoded = btoa(charBytes.join(""));  return dataBase64Encoded;}// https://stackoverflow.com/a/21797381// TODO: If the data is large, consider switching over to the native decoder as in https://stackoverflow.com/a/54123275// But don't force it to be async all the time. Yielding execution leads to perceptible lag.function base64ToArrayBuffer(base64: string): Uint8Array {    const binaryString = atob(base64);    const length = binaryString.length;    const result = new Uint8Array(length);    for (let i = 0; i < length; i++) {      result[i] = binaryString.charCodeAt(i);    }    return result;  }(window as any).chrome.webview.addEventListener("message", (e: any) => {    var ob = JSON.parse(e.data);    switch (ob[0]) {      case "EndInvokeDotNet": {        dispatcher.endInvokeDotNetFromJS(ob[1], ob[2], ob[3]);        break;      }      case "BeginInvokeJS": {        dispatcher.beginInvokeJSFromDotNet(ob[1], ob[2], ob[3], ob[4], ob[5]);        break;      }      case "SendByteArrayToJS": {        let id = ob[1];        let base64Data = ob[2];        const data = base64ToArrayBuffer(base64Data);        dispatcher.receiveByteArray(id,data);        break;      }      default: {        console.error(`不支持的消息类型${e.data}`);      }    }  });(window as any)["DotNet"] = DotNet;
37. export { DotNet };

复制代码

2、.Net

在.Net 这边类似，利用 WebView2 的 WebMessageReceived 变乱和 PostWebMessageAsString 方法来与前端通讯，后端通过 WebMessageReceived 处理来自前端的beginInvokeDotNetFromJS、endInvokeJSFromDotNet、ReceiveByteArrayFromJS的消息，然后通过静态类 DotNetDispatcher 中的 BeginInvokeDotNet、EndInvokeJS、ReceiveByteArray 来处理，通过继承 JSRuntime，实现 BeginInvokeJS、EndInvokeDotNet、SendByteArray 方法，通过 PostWebMessageAsString 发送数据到前端。在这里不给出代码，感兴趣的直接查看 https://github.com/HekunX/wvf 仓库。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

继续阅读请点击广告