web-dev-qa-db-ja.com

Electron(Atom Shell)を使用する場合のクライアント/サーバーモデルとは何ですか?

Electron (以前はAtom Shell)がどのように機能するかを頭でラップしようとしています。

ブラウザがController Actionからを呼び出している従来のMVCスタイルのWebアプリケーションから来ていますルーティングシステム、コントローラーはストア(ファイルシステム、データベース、...)からデータを取得し、View、ブラウザに送り返されます。一部のアクションは、実際にブラウザに移動する代わりにJavaScript/AJAXを介して呼び出されるため、代わりにJSONを送信する場合があります。

私はそれを作成したいのですが、クロスプラットフォームのデスクトップアプリケーションとして。 Atom ShellはChromium-BrowserとNode.js/v8ランタイムの両方を組み合わせていることを知っていますが、どのように通信するかはわかりません。

Webサーバー(基本的には Express のようなNode.js HTTPミドルウェア)で完全に実行できると思いますが、それはネットワークに到達可能なサーバー(ファイアウォールを作動させる可能性もあります)を作成します-デスクトップアプリを作成する理由は、実際のサーバーの実行を避けるためです。基本的に、「通常の」デスクトップアプリのMVP/MVVMパターンに似ています。

誰かが私がしようとしていることのいくつかの出発点を教えてもらえますか?ブラウザはノードランタイム(呼び出し元の「クライアント」)とどのように通信して「おい、ID 12345のレコードを取得するか」を伝え、クライアントはレンダリングされたHTMLを返すか、ブラウザは単にblobを取得しますかのJSONを元に戻し、JavaScriptテンプレートエンジンを介してレンダリングしますか?

68
Michael Stum

ElectronはNode.jsをWebサーバーとして使用するのではなく、バックグラウンドJavaScriptコードを実行する環境としてのみ使用するようです。このコードはノードモジュールを使用してシステムにアクセスできます。 Chromiumはアプリのユーザーインターフェースを提供すると同時に、通常のサンドボックスJavaScriptを実行する通常のWebページを表示します。両方ともElectron実行可能ファイルによって埋め込まれています。前者は直接(Node.jsは静的ライブラリとしてビルドできます)、後者は libchromiumcontent を介して組み込まれます。ある意味では、Node.jsはアプリケーションのコントローラー部分ですが、Chromiumはビューです。

通常、ここでWebページに使用される概念は、 単一ページのアプリケーション の概念です:Webページは1つのアプリケーションウィンドウを表し、このウィンドウが表示されている限り(多くの場合、生涯にわたって)アプリケーションの)。別の何かを表示する必要があるときはいつでも、AJAXアプリケーションがサーバーからデータを要求するように、Node.jsで実行されるバックグラウンドコードからデータを要求します。ページ自体はリロードされません。コンテンツを更新するために使用されます。

ただし、実際にはサーバーとクライアントの関係はありませんが、通信は実際には両方の方向に進むことができます。両側でipcモジュールを使用して、相互にメッセージを送信できます( メインプロセスレンダラー )。これらのメッセージには引数を付けることができ、明示的にエンコードする必要はありません(通常、JSONを内部的に使用してパラメーターをエンコードすることで実装されます。Electronの場合は検証しませんでした)。内部的には、そのメッセージの受け渡しは、プラットフォーム固有の [〜#〜] ipc [〜#〜] メカニズムを介して実装され、正確には libuv を使用します。

67
Wladimir Palant

完全に機能するnodejsサーバーとangular UIをsqlite3で実装し、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"、
3
Manjesh V