WebView2 (3) WebとWinFormアプリケーション間の双方向通信

クズども · 掲載地 2022/09/27 22:12:31

要件:WebView2はユーザーの操作に対してウェブリソースをどのようにレンダリング・表示できるか、ウェブインターフェースはどのようにしてWinFormアプリケーションと通信できるか? 例えば、ウェブはアプリケーションを通じてハードウェア情報を読み込み、アプリケーションはウェブページの内容を積極的に更新します。

復習：

[WebView2] (1) Microsoft Edge WebView2技術の初期導入
https://www.itsvse.com/thread-10361-1-1.html

[WebView2] (2) WinFormがWebView2を導入し、ウェブコンテンツを表示
https://www.itsvse.com/thread-10362-1-1.html

まず、ウェブとWinFormアプリケーション間の通信レンダリングを見てください。ウェブはアプリケーションにメッセージを送信します。Windowsシステムを開く計算機機能を呼び出す同時に、アプリケーションはウェブ側に送信されたメッセージも正常に受信できます。以下の図に示されています。

ホストとウェブコンテンツ間の通信

ホストとウェブコンテンツは、postMessagesで以下の方法で互いにコミュニケーションを取ることができます。

WebView2コントロール内のウェブコンテンツは、windows.chrome.webview.postMessageのホストにメッセージを公開するために使用できます。ホストは、そのホスト上でWebMessageReceivedを登録する任意のメッセージでメッセージを処理します。
ホストはWebView2コントロール内のCoreWebView2.PostWebMessageAsStringまたはCoreWebView2.PostWebMessageAsJSONを使ってウェブコンテンツにメッセージを公開します。これらのメッセージは、window.chrome.webview.addEventListenerに追加されたハンドラーによってキャプチャされます。

新しいAngular SPAプロジェクトを作成する

この記事では、Angular 8.2.14を用いて、ウェブとWinFormアプリケーション間の通信を示す新しいウェブプロジェクトを作成しました。

ログインが見えます。

コードは以下の通りです:

ログインが見えます。

同時に、app.component.htmlファイルやapp.component.tsファイルを修正してメッセージの送受信機能を実現します。

app.component.htmlコードは以下の通りです:

ログインが見えます。

app.component.tsコードは以下の通りです:

ログインが見えます。

以下のようにプロジェクトを実行してください:

WinFormアプリケーション

ホストアプリケーションは以下のようにコードを修正する必要があります:

ログインが見えます。

WebView2コントロールを修正してください出典属性は以下の通りです:http://localhost:4200/以下のようにアプリケーションを起動するために: