가이드 개발 가이드

데스크탑 애플리케이션을 빠르게 개발

fibjs에서 데스크톱 응용 프로그램을 시작하는 것은 매우 빠릅니다. 다음 코드를 입력하여 WebView 창을 열고 실행하기만 하면 됩니다.

1 2 3 4 5
var gui = require("gui"); gui.open("https://fibjs.org", { "type": "native" });

이 코드는 운영 체제에 내장된 WebView 창을 열고 fibjs.org 웹사이트로 들어갑니다.

그러나 시스템에 내장된 WebView는 인터페이스 기능이나 호환성 면에서 강력한 데스크톱 응용 프로그램 개발을 만족시키지 못합니다. 따라서 fibjs는 cef 기반 애플리케이션 개발도 지원합니다.

CEF 소개

cef의 전체 이름은 Google Chromium을 기반으로 하는 오픈 소스 프로젝트인 Chromium Embedded Framework입니다. Google Chromium 프로젝트는 주로 Google Chrome 응용 프로그램용으로 개발되었으며 cef의 목표는 타사 응용 프로그램에 대한 포함 가능한 브라우저 지원을 제공하는 것입니다. cef는 기본 Chromium 및 Blink의 복잡한 코드를 분리하고 제품 수준의 안정적인 API 세트를 제공하고 특정 Chromium 버전 및 바이너리 패키지를 추적하는 분기를 출시합니다. cef의 대부분의 기능은 풍부한 기본 구현을 제공하므로 사용자가 요구 사항을 충족하기 위해 가능한 한 적은 사용자 정의를 수행할 수 있습니다. cef의 일반적인 적용 시나리오는 다음과 같습니다.

  • HTML5 호환 브라우저 컨트롤을 기존 로컬 애플리케이션에 포함합니다.
  • 주로 웹 기술로 개발된 응용 프로그램을 호스팅하는 경량 셸 브라우저를 만듭니다.
  • 일부 응용 프로그램에는 독립적인 그리기 프레임워크가 있으며 cef를 사용하여 웹 콘텐츠를 오프라인으로 렌더링합니다.
  • cef를 사용하여 자동화된 웹 테스트를 수행합니다.

cef3는 Chomuim Content API 다중 프로세스 아키텍처를 기반으로 하는 차세대 cef로 다음과 같은 장점이 있습니다.

  • 성능 및 안정성 향상(JavaScript 및 플러그인은 별도의 프로세스에서 실행됨).
  • 레티나 디스플레이를 지원합니다.
  • WebGL 및 3D CSS의 GPU 가속을 지원합니다.
  • WebRTC 및 음성 입력과 같은 전위적인 기능.
  • DevTools 원격 디버깅 프로토콜 및 ChromeDriver2를 통해 더 나은 자동화된 UI 테스트를 제공합니다.
  • 현재와 ​​미래의 웹 기능과 표준을 더 빨리 얻을 수 있는 능력.

운영 환경 준비

cef3의 바이너리 패키지는 [ 이 페이지 ] 에서 다운로드 할 수 있으며, fibjs 의 현재 버전은 v90입니다. 여기에는 특정 플랫폼(Windows, Mac OS X 및 Linux)에서 특정 버전의 cef3를 컴파일하는 데 필요한 모든 파일이 포함되어 있습니다. 플랫폼마다 디렉토리 구조가 다르므로 다운로드 후 리소스 디렉토리 구조를 재구성해야 합니다.

Windows 운영 체제(Windows)

윈도우 플랫폼 폴더 구조로 다음과됩니다에, 당신은 일반적으로 바이너리 패키지 내에서 할 수있는 ReleaseResources디렉토리에있는 모든 파일을 찾을 수 :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
Application ├── fibjs.exe ├── chrome_100_percent.pak ├── chrome_200_percent.pak ├── chrome_elf.dll ├── d3dcompiler_47.dll ├── icudtl.dat ├── libEGL.dll ├── libGLESv2.dll ├── libcef.dll ├── locales │ ├── am.pak │ ├── ...... │ └── zh-TW.pak ├── resources.pak ├── snapshot_blob.bin ├── swiftshader │ ├── libEGL.dll │ └── libGLESv2.dll └── v8_context_snapshot.bin

리눅스 운영 체제(리눅스)

리눅스 플랫폼 폴더 구조로 다음과됩니다에, 당신은 일반적으로 바이너리 패키지 내에서 할 수있는 ReleaseResources디렉토리에있는 모든 파일을 찾을 수 :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
Application ├── fibjs ├── chrome_100_percent.pak ├── chrome_200_percent.pak ├── icudtl.dat ├── libEGL.so ├── libGLESv2.so ├── libcef.so ├── locales │ ├── am.pak │ ├── ...... │ └── zh-TW.pak ├── resources.pak ├── snapshot_blob.bin ├── swiftshader │ ├── libEGL.so │ └── libGLESv2.so └── v8_context_snapshot.bin

Linux Server에서는 데스크탑 환경이 지원되지 않기 때문에 --headlessxorg를 설치할 필요가 없을 때 창 모드로 실행할 때만 모드를 실행할 수 있습니다 .

1
apt install xorg

일부 GPU에서 잘못된 Linux 데스크톱을 지원하지만 --disable-gpu시작 옵션 을 늘려야 GPU 렌더링이 비활성화됩니다.

Mac X 플랫폼(Mac OS X)

Mac X 플랫폼 폴더 구조는 다음과 같습니다. 일반적으로 패키지 바이너리 내 Release/Chromium Embedded Framework.framework에서 디렉토리의 모든 파일을 찾을 수 있습니다. cefclient를 다운로드한 다음 콘텐츠 앱을 열어 적절한 파일을 찾아야 합니다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
Application ├── fibjs ├── Chromium Embedded Framework ├── Libraries │ ├── libEGL.dylib │ ├── libGLESv2.dylib │ ├── libswiftshader_libEGL.dylib │ ├── libswiftshader_libGLESv2.dylib │ ├── libvk_swiftshader.dylib │ └── vk_swiftshader_icd.json └── Resources ├── Info.plist ├── ...... └── zh_TW.lproj └── locale.pak

또한 gui.config설정 cef_path사용하여 cef 바이너리 경로를 지정할 수 있으므로 운영 환경을 보다 유연하게 배포할 수 있습니다. cef_path시간을 설정하지 않으면 cef 바이너리는 실행 파일 fibjs와 동일한 디렉터리에 배포되어야 합니다.

1 2 3
gui.config({ "cef_path": cef_path });

운영 환경을 준비하고 다음 코드를 실행합니다.

1 2 3 4 5
var gui = require("gui"); gui.open("https://fibjs.org", { // "type": "native" });

fibjs의 공식 웹사이트가 로드된 브라우저 창도 볼 수 있지만 해당 엔진은 이미 최신 Chrome 커널입니다. 여기에서 type옵션 을 취소해야 합니다 . 그렇지 않으면 os built webview가 열립니다.

gui의 기본적용은 매우 간단하고 gui 문서를 참고하면 금방 구현할 수 있으므로 반복하지 않겠습니다. 다음으로, 우리는 주로 몇 가지 특별한 적용 방법을 소개합니다.

프런트 엔드 및 백 엔드 서비스 도킹

웹 기반 데스크톱 응용 프로그램에는 일반적으로 두 가지 확장 방법이 있습니다. 하나는 WebView 확장이고 다른 하나는 프런트 엔드와 백엔드를 로컬로 분리하는 것입니다. 전자의 경우 WebView가 침입적으로 확장되어 운영 환경이 더 이상 표준 브라우저와 호환되지 않습니다. 후자의 방법은 http 서버가 로컬로 열려야 하며, 이는 차례로 서비스 인터페이스가 외부에 노출되도록 합니다.

확장 데스크톱 응용 프로그램을 위한 fibjs는 프로토콜 확장성을 기반으로 cef가 WebView와 fibjs를 Handler함께 사용하므로 WebView 프로세스가 해당 Handler프로세서에 직접 연결될 수 있으며 전면과 후면이 동시에 개발된 기존 B/S 패러다임과 완전히 호환됩니다. 안전과 휴대성을 보장합니다. 동시에 프론트엔드 및 백엔드 코드는 표준 B/S 프론트엔드 및 백엔드 개발과 완전히 일치하며 브라우저에서 개발 및 디버깅한 다음 로컬 애플리케이션에 직접 이식할 수 있습니다. .

fibjs 백엔드 프로세서 구성 방식, gui.config완료.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
gui.config({ "backend": { "cef://test/": cef_files_path, "http://cef_test/": { "/mock/:act": (r, a) => { if (a == 'header') { r.response.write(r.firstHeader('test')); r.response.addHeader("test", "world"); } else if (a == 'post') { r.response.write(`[${r.firstHeader("Content-type")}]`); r.response.write(r.body.readAll()); } }, "/*": cef_files_path } } });

이 코드는 두 개의 백엔드를 정의합니다. cef테스트 도메인 프로토콜은 디렉토리를 가리키는 정적 프로토콜이고 cef_files_path다른 하나는 http경로를 가리키는 cef_test 도메인입니다.

cef에서는 서버에 포스트 데이터를 지원하지 않는 등 비표준 프로토콜의 처리에 몇 가지 제한이 있으므로 더 나은 호환성을 원하는 프론트엔드와 백엔드 통신을 원한다면 http 또는 https back을 정의해야 합니다. 물론 이 백엔드는 통과하지 못하지만 네트워크 프로토콜이 통신을 완료하지만 프로세스 내에서 직접 연결됩니다.

Handler 백엔드를 개발하는 방법은 다음을 참조하세요.hello, world.

창 없는 모드

자동화된 테스트 또는 프로세스 자동화 시나리오에서 비즈니스 운영 프로세스는 사용자 상호 작용이 필요하지 않으므로 서버에서 창 없는 모드로 자동으로 실행할 수 있습니다. 이때 헤드리스 모드가 실행되어야 합니다.

fibjs는 헤드리스의 두 가지 방법, 즉 글로벌 헤드리스와 인스턴스 헤드리스를 지원합니다.

전역 모드에서 모든 창은 창 생성 방식에 관계없이 헤드리스 모드로 실행됩니다. 글로벌 모델을 실행하고 --headless시작 옵션 으로 지정 됩니다.

1
fibjs --headless test.js

프로그램 시작 gui.config구성 시 호출 도 동일한 목표를 달성할 수 있습니다.

1 2 3
gui.config({ "headless": true });

Linux Server에서는 헤드리스 모드가 데스크탑 지원을 필요로 하지 않지만 cef 기본 모듈에는 여전히 몇 가지 기본 구성 요소 지원이 필요하므로 xorg를 설치해야 합니다.

1
apt install xorg

일부 응용 프로그램에서는 사용자 상호 작용과 자동 처리가 동시에 필요하며 이때 헤드리스 모드를 별도로 사용할 창을 지정할 수 있습니다.

1 2 3
var win = gui.open("https://fibjs.org", { "headless": true });

사용자 상호 작용이 없기 때문에 헤드리스 인스턴스는 사용자가 능동적으로 닫을 수 없으므로 필요하지 않을 때 프로그램을 닫아야 합니다. 그렇지 않으면 인스턴스가 있기 때문에 프로세스가 자동으로 종료되지 않습니다.

DevTools 인터페이스

Chrome DevTools 프로토콜을 사용하면 도구에서 Chromium, Chrome 및 기타 Blink 기반 브라우저를 테스트, 검사, 디버그 및 구성할 수 있습니다. Chrome DevTools Protocol은 여러 도메인(DOM, Debugger, Network 등)으로 구분되며 각 도메인은 해당하는 지원되는 명령 및 관련 이벤트를 정의합니다.

fibjs는 cdp의 액세스 인터페이스를 캡슐화하므로 cef의 내장 cdp 인터페이스를 최대한 활용하여 WebView에서 웹 페이지를 직접 디버그할 수 있습니다. WebView에서 cdp 서비스에 액세스하는 데 사용하는 인터페이스는 WebView.dev입니다. cdp에 대한 자세한 문서는 https://chromedevtools.github.io/devtools-protocol/을 참조하십시오.

다음은 dev를 사용하여 페이지 요소를 조작하는 방법을 보여주기 위해 일반적으로 사용되는 몇 가지 코드 조각입니다. 자세한 사용 데모를 참조할 수 있습니다 test/cef_test.js.

DOM 쿼리

1 2 3 4 5 6 7 8 9 10 11 12 13
function getOuterHTML(win, selector) { var doc = win.dev.DOM.getDocument(); var e = win.dev.DOM.querySelector({ "nodeId": doc.root.nodeId, "selector": selector }); var html = win.dev.DOM.getOuterHTML({ "nodeId": e.nodeId }); return html.outerHTML; }

마우스 조작 시뮬레이션

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
function click(win, selector) { var doc = win.dev.DOM.getDocument(); var e = win.dev.DOM.querySelector({ "nodeId": doc.root.nodeId, "selector": selector }); var box = win.dev.DOM.getBoxModel({ "nodeId": e.nodeId }); var mi = { "x": box.model.content[0] + 1, "y": box.model.content[1] + 1, "button": 'left', "clickCount": 1 } mi.type = "mousePressed"; win.dev.Input.dispatchMouseEvent(mi); mi.type = "mouseReleased"; win.dev.Input.dispatchMouseEvent(mi); }

키보드 작동 시뮬레이션

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
function type(win, text) { for (char of text) { win.dev.Input.dispatchKeyEvent({ "type": "char", "text": char }); } } function press(win, key) { var code = key_code[key]; var ki = { "key": key, "code": key, "windowsVirtualKeyCode": code, "nativeVirtualKeyCode": code }; ki.type = "keyDown"; win.dev.Input.dispatchKeyEvent(ki); ki.type = "keyUp"; win.dev.Input.dispatchKeyEvent(ki); }

페이지 스크린샷

1 2 3 4 5 6 7 8 9 10 11
var ret = win.dev.Page.captureScreenshot({ clip: { "x": 0, "y": 0, "width": 100, "height": 100, "scale": 1 } }); var img = gd.load(encoding.base64.decode(ret.data));

사용자 에이전트 시뮬레이션

1 2 3 4 5 6 7 8 9
var win = gui.open(); win.on('open', () => { win.dev.Network.setUserAgentOverride({ userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 10_0_1 like Mac OS X) AppleWebKit/602.1.50 (KHTML, like Gecko) Version/10.0 Mobile/14A403 Safari/602.1', }); win.loadUrl('https://fibjs.org'); });

이벤트 듣기

1 2 3 4 5 6 7 8 9
var win = gui.open(); win.on('open', () => { win.dev.Page.enable(); win.dev.Page.on("frameNavigated", ev => { console.log(ev.frame.url); win.close(); }); });

멀티미디어 지원

저작권 문제로 인해 cef의 바이너리 배포에는 일반적으로 mp4 및 mp3의 디코딩이 포함되지 않습니다. 그러나 cef에는 오픈 소스 webm 디코딩이 포함되어 있으므로 독립 데스크톱 응용 프로그램의 경우 무료 라이선스 webm 인코딩을 사용하여 오디오 및 비디오를 처리하는 것이 좋습니다.

요약

이 섹션의 도입을 통해 우리는 자체 데스크탑 애플리케이션을 빠르게 개발하고 html을 이미지 또는 PDF로 렌더링하고 cdp의 강력한 인터페이스를 사용하여 프런트 엔드 자동화 테스트 및 프로세스 자동화 엔진을 구축할 수 있습니다.

👉 [ 서버 모듈 핫 업데이트 ]