抽离BlazorWebview中的.Net与Javascript的互操作库 - qidao123.com技术社区-IT企服评测·应用市场

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

复制代码

<Window
x:
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:TestWVF"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:wpf="clr-namespace:HSoft.WebView.NetFramework.WPF;assembly=HSoft.WebView.NetFramework.WPF"
Title="MainWindow"
Width="800"
Height="450"
mc:Ignorable="d">
<Grid>
<wpf:WebView Source="http://localhost:5173" />
</Grid>
</Window>

复制代码

<Window
x:
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:TestWVF"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:wpf="clr-namespace:HSoft.WebView.NetFramework.WPF;assembly=HSoft.WebView.NetFramework.WPF"
Title="MainWindow"
Width="800"
Height="450"
mc:Ignorable="d">
<Grid>
<wpf:WebView Source="http://localhost:5173" />
</Grid>
</Window>

复制代码

import { DotNet } from "@microsoft/dotnet-js-interop";
let dispatcher: DotNet.ICallDispatcher;
dispatcher = DotNet.attachDispatcher({
sendByteArray: sendByteArray,
beginInvokeDotNetFromJS: beginInvokeDotNetFromJS,
endInvokeJSFromDotNet: endInvokeJSFromDotNet,
});

复制代码

function sendByteArray(id: number, data: Uint8Array): void {
const dataBase64Encoded = base64EncodeByteArray(data);
(window as any).chrome.webview.postMessage([
"ReceiveByteArrayFromJS",
id,
dataBase64Encoded,
]);
}

复制代码

function beginInvokeDotNetFromJS(
callId: number,
assemblyName: string | null,
methodIdentifier: string,
dotNetObjectId: number | null,
argsJson: string
): void {
console.log("beginInvokeDotNetFromJS");
(window as any).chrome.webview.postMessage([
"beginInvokeDotNetFromJS",
callId ? callId.toString() : null,
assemblyName,
methodIdentifier,
dotNetObjectId || 0,
argsJson,
]);
}

复制代码

function endInvokeJSFromDotNet(
callId: number,
succeeded: boolean,
resultOrError: any
): void {
console.log("beginInvokeDotNetFromJS");
(window as any).chrome.webview.postMessage([
"endInvokeJSFromDotNet",
callId ? callId.toString() : null,
succeeded,
resultOrError,
]);
}

复制代码

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;
export { DotNet };

复制代码

import { DotNet } from "@microsoft/dotnet-js-interop";
let dispatcher: DotNet.ICallDispatcher;
dispatcher = DotNet.attachDispatcher({
sendByteArray: sendByteArray,
beginInvokeDotNetFromJS: beginInvokeDotNetFromJS,
endInvokeJSFromDotNet: endInvokeJSFromDotNet,
});function sendByteArray(id: number, data: Uint8Array): void { const dataBase64Encoded = base64EncodeByteArray(data); (window as any).chrome.webview.postMessage([ "ReceiveByteArrayFromJS", id, dataBase64Encoded, ]); }function beginInvokeDotNetFromJS(
callId: number,
assemblyName: string | null,
methodIdentifier: string,
dotNetObjectId: number | null,
argsJson: string
): void {
console.log("beginInvokeDotNetFromJS");
(window as any).chrome.webview.postMessage([
"beginInvokeDotNetFromJS",
callId ? callId.toString() : null,
assemblyName,
methodIdentifier,
dotNetObjectId || 0,
argsJson,
]);
}function endInvokeJSFromDotNet(
callId: number,
succeeded: boolean,
resultOrError: any
): void {
console.log("beginInvokeDotNetFromJS");
(window as any).chrome.webview.postMessage([
"endInvokeJSFromDotNet",
callId ? callId.toString() : null,
succeeded,
resultOrError,
]);
}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;
export { DotNet };

复制代码