Programing

Electron (Atom Shell)을 사용할 때 클라이언트 / 서버 모델은 무엇입니까?

lottogame 2020. 11. 9. 07:38
반응형

Electron (Atom Shell)을 사용할 때 클라이언트 / 서버 모델은 무엇입니까?


Electron (이전 Atom Shell)의 작동 방식에 대해 머리를 감 으려고 합니다.

나는 브라우저가 호출 전통적인 MVC 스타일의 웹 응용 프로그램에서오고 컨트롤러 액션 스루 라우팅 시스템 , 컨트롤러는 상점에서 데이터를 가져옵니다 (파일 시스템, 데이터베이스, ...)과 렌더링 보기 , 브라우저로 다시 전송됩니다. 일부 액션은 브라우저가 실제로 탐색하는 대신 JavaScript / AJAX를 통해 호출되므로 JSON을 대신 보낼 수 있습니다.

나는 그것을 만들고 싶지만 크로스 플랫폼 데스크톱 응용 프로그램으로. Atom Shell이 ​​Chromium-Browser와 Node.js / v8 런타임을 모두 결합한다는 것을 알고 있지만 어떻게 통신 할 것인지 잘 모르겠습니다.

웹 서버 (기본적으로 Express 와 같은 일부 Node.js HTTP 미들웨어 )에서 전체를 실행할 수 있다고 생각 하지만 네트워크에 연결할 수있는 서버 (방화벽을 작동시킬 수도 있음)를 생성합니다. 데스크톱을 만들고 싶은 이유 중 하나입니다. 앱은 실제 서버를 실행하지 않는 것입니다. 기본적으로 "일반"데스크탑 앱의 MVP / MVVM 패턴과 같습니다.

누군가 내가하려는 일에 대한 몇 가지 시작점을 줄 수 있습니까? 브라우저는 노드 런타임 ( "클라이언트"라고 부르는대로?)과 어떻게 통신하여 "Hey, ID 12345로 레코드를 가져 오십시오"라고 말하고 클라이언트가 렌더링 된 HTML을 반환하거나 브라우저가 blob을 얻습니다. JSON을 되돌리고 JavaScript 템플릿 엔진을 통해 렌더링합니까?


Electron은 Node.js를 웹 서버로 사용하지 않고 단지 백그라운드 JavaScript 코드를 실행하는 환경으로 만 사용하는 것 같습니다.이 코드는 노드 모듈을 사용하여 시스템에 액세스 할 수 있습니다. 동시에 Chromium은 앱에 대한 사용자 인터페이스를 제공하고 일반적인 샌드 박스 JavaScript를 실행하는 일반 웹 페이지를 표시합니다. 둘 다 Electron 실행 파일에 포함되고, 전자는 직접 (Node.js는 정적 라이브러리로 빌드 될 수 있음), 후자는 libchromiumcontent 를 통해 포함 됩니다. 어떤 의미에서 Node.js는 애플리케이션의 컨트롤러 부분이고 Chromium은 뷰입니다.

일반적으로 여기에서 웹 페이지에 사용되는 개념은 단일 페이지 응용 프로그램 의 개념입니다 . 웹 페이지는 하나의 응용 프로그램 창을 나타내므로이 창이 표시되는 동안 (종종 응용 프로그램의 전체 수명 동안) 유지됩니다. AJAX 애플리케이션이 서버에서 데이터를 요청하는 것처럼 다른 것을 표시해야 할 때마다 Node.js에서 실행되는 백그라운드 코드에서 데이터를 요청합니다. 페이지 자체는 다시로드되지 않으며 일반적으로 콘텐츠를 업데이트하는 데 JavaScript 템플릿이 사용됩니다.

여기에는 실제로 서버 / 클라이언트 관계가 없지만 통신은 실제로 양방향으로 진행될 수 있습니다. 양측은 ipc모듈을 사용하여 서로에게 메시지를 보낼 수 있습니다 ( 메인 프로세스 , 렌더러 ). 이러한 메시지에는 어떤 인수도 첨부 될 수 있으며 명시 적으로 인코딩 할 필요가 없습니다 (일반적으로 이는 매개 변수를 인코딩하기 위해 내부적으로 JSON을 사용하여 구현됩니다. Electron의 경우인지 확인하지 않았습니다). 내부적으로 메시지 전달은 정확한 libuv사용하여 플랫폼 별 IPC 메커니즘을 통해 구현됩니다 .


우리는 sqlite3로 모든 기능을 갖춘 nodejs 서버 및 각도 UI를 구현하고 다음을 사용하여 ORM을 속속 화합니다.

*. https://github.com/theallmightyjohnmanning/electron-express

일부 프로젝트는 우리에게 많은 도움이되었습니다.

  • 프레임 워크 : https://github.com/angular-fullstack/generator-angular-fullstack Windows 패키징 : electron-packager ":"github : electron-userland / electron-packager "
  • 바로 가기 만들기 및 자동 업데이트 : "electron-squirrel-startup": "^ 1.0.0",
  • 릴리스 설치 프로그램 생성 : "electron-winstaller": "^ 2.3.4",

참고 URL : https://stackoverflow.com/questions/24583204/what-is-the-client-server-model-when-using-electron-atom-shell

반응형