Guide 开发指南

快速开发桌面应用

在 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 全称 Chromium Embedded Framework,是一个基于 Google Chromium 的开源项目。Google Chromium 项目主要是为 Google Chrome 应用开发的,而 cef 的目标则是为第三方应用提供可嵌入浏览器支持。cef 隔离底层 Chromium 和 Blink 的复杂代码,并提供一套产品级稳定的 API,发布跟踪具体 Chromium 版本的分支,以及二进制包。cef 的大部分特性都提供了丰富的默认实现,让使用者做尽量少的定制即可满足需求。cef 的典型应用场景包括:

  • 嵌入一个兼容 HTML5 的浏览器控件到一个已经存在的本地应用。
  • 创建一个轻量化的壳浏览器,用以托管主要用 Web 技术开发的应用。
  • 有些应用有独立的绘制框架,使用 cef 对 Web 内容做离线渲染。
  • 使用 cef 做自动化 Web 测试。

cef3 是基于 Chomuim Content API 多进程构架的下一代 cef,拥有下列优势:

  • 改进的性能和稳定性(JavaScript 和插件在一个独立的进程内执行)。
  • 支持 Retina 显示器。
  • 支持 WebGL 和 3D CSS 的 GPU 加速。
  • 类似 WebRTC 和语音输入这样的前卫特性。
  • 通过 DevTools 远程调试协议以及 ChromeDriver2 提供更好的自动化UI测试。
  • 更快获得当前以及未来的 Web 特性和标准的能力。

准备运行环境

cef3 的二进制包可以在 [这个页面] 下载,当前 fibjs 所对应的版本是 v90。其中包含了在特定平台(Windows,Mac OS X 以及 Linux)编译特定版本 cef3 所需的全部文件。不同平台的目录结构不太,你需要在下载后重新组织资源目录结构。

Windows 操作系统(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

Linux 操作系统(Linux)

在 Linux 平台上文件夹结构大致如下,你通常可以在二进制包内的 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 上因为没有桌面环境支持,只可以以 --headless 模式运行,当以无窗口模式运行时,需要安装 xorg:

1
apt install xorg

在一些 gpu 支持不好的 Linux Desktop,还需要增加 --disable-gpu 启动选项禁用 gpu 渲染。

Mac X 平台(Mac OS X)

在 Mac X 平台上文件夹结构大致如下,你通常可以在二进制包内的 Release/Chromium Embedded Framework.framework 目录下找到全部文件,如果你下载的是 cefclient,那么你需要打开 app 的 Contents 找到相应的文件:

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에서 빌드 된 webview가 열립니다.

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

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

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

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

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

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 백 엔드를 정의해야합니다. 물론이 백엔드는 통과하지 못합니다. 네트워크 프로토콜은 통신을 완료하지만 프로세스 내에서 직접 연결됩니다.

핸들러 백엔드를 개발하는 방법은 다음을 참조하십시오.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 프로토콜은 여러 도메인 (DOM, 디버거, 네트워크 등)으로 나뉘며 각 도메인은 지원되는 해당 명령 및 관련 이벤트를 정의합니다.

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의 강력한 인터페이스를 사용하여 프런트 엔드 자동화 테스트 및 프로세스 자동화 엔진을 설정할 수 있습니다.

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