WebView2 (3) 웹과 WinForm 애플리케이션 간의 양방향 통신

작은 쓰레기 같은 놈들 · 게시됨 2022. 9. 27. 오후 10: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 애플리케이션 간의 통신 렌더링을 보세요. 웹은 애플리케이션에 메시지를 보냅니다.윈도우 시스템을 열어주는 계산기 기능을 호출하세요동시에, 애플리케이션은 아래 그림과 같이 웹 측으로 전송된 메시지도 성공적으로 수신할 수 있습니다:

호스트와 웹 콘텐츠 간의 통신

호스트와 웹 콘텐츠는 postMessages에서 다음과 같이 서로 소통할 수 있습니다:

WebView2 컨트롤의 웹 콘텐츠를 사용하여 windows.chrome.webview.postMessage 호스트에 메시지를 게시할 수 있습니다. 호스트는 WebMessageReceived가 등록된 모든 메시지로 메시지를 처리합니다.
호스트는 WebView2 컨트롤 CoreWebView2.PostWebMessageAsString 또는 CoreWebView2.PostWebMessageAsJSON 또는 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 코드는 다음과 같습니다:

로그인이 보이네요.

아래 설명대로 프로젝트를 실행하세요:

윈폼 애플리케이션

호스트 애플리케이션은 다음과 같이 코드를 수정해야 합니다:

로그인이 보이네요.

WebView2 컨트롤을 수정하기출처 속성은 다음과 같습니다: http://localhost:4200/아래 설명과 같이 애플리케이션을 실행하려면: