Wie integriert Elektron ipcRenderer in Eckige 2-app basiert auf dem Typoskript?

Möchte ich ipcMain /ipcRenderer auf mein Projekt zu kommunizieren von Winkel-zu Elektronen-und zurück.

Elektron Seite ist ziemlich klar:

const
  electron = require('electron'),
  ipcMain = electron.ipcMain,
;

ipcMain.on('asynchronous-message', function(event, arg) {
  console.debug('ipc.async', arg);
  event.sender.send('asynchronous-reply', 'async-pong');
});

ipcMain.on('synchronous-message', function(event, arg) {
  console.debug('ipc.sync', arg);
  event.returnValue = 'sync-pong';
});

Aber ich habe keine Idee, wie das zu integrieren, dass Elektron-Modul in meine Eckige 2-app. Ich benutze SystemJS als Modul loader, aber ich bin ein rookie mit ihm.

Jede Hilfe dankbar. Danke.

--- Mario

InformationsquelleAutor Sommereder | 2016-03-29

18

Gibt es Konflikte, weil Elektron Verwendung commonjs Modul lösen, aber Ihr code bereits kompiliert mit systemjs Regeln.

Zwei Lösungen:

Robuste Weise. Register Objekt require zurückgegeben:
```
<script>
    System.set('electron', System.newModule(require('electron')));
</script>
```
Dies ist die beste, weil renderer/init.js Skript lädt das Modul auf der Startseite. SystemJS haben, es dauert nur, nicht Lasten.

Alternative. Verwenden schmutzige trick mit Erklärung.

Bekommen Elektron-Instanz innerhalb index.html:
```
<script>
    var electron = require('electron');
</script>
```
Erklären Sie es in Ihrem typescript Datei auf diese Weise:
```
declare var electron: any;
```
Verwenden Sie es mit Freiheit )
```
electron.ipcRenderer.send(...)
```
- Danke. Ich fand, dass Sie sich eine Weile zu und erstellt eine Zusammenfassung daher: gist.github.com/MarioHofer/638e63b5695702b793845c3a29328dac, Aber ich wusste nicht, dass der robuste Art und Weise. Nochmals vielen Dank.
- Sollte die "Robuste Art" erlauben Sie mir, dies zu tun? import { remote, ipcRenderer } from 'electron';
- Absolut! Aber tsd ist auch nicht notwendig. Sie können schauen, wie ich es hier github.com/DenisKolodin/tsng2
- Meine Güte, ich kämpfte mit systemjs mit anderen Modulen, die für so etwas wie 5 Stunden später entdecken Sie, dass es gerade genug, um die Verwendung von System.set. Ich bin erstaunt, danke Mann, du hast mein Tag.
- Hi Denis, ich habe geklont, Ihre repo-und versuchen Sie, sich in Ihren code und spielen, um mit es, ich merke, es ist rot Unterstrichen in vielen Orten, und einer von Ihnen ist in die homepage.Komponente.ts für import { ipcRenderer } von 'Elektron'; unter Elektronen-sagen [ts] nicht finden können, electron, auch wenn ich versuchte, Sie zu nutzen-dialog-API display-Fehlermeldung-dialog.showErrorBox(Titel,Inhalt) ich bekam eine Fehlermeldung zur Laufzeit sagen kann nicht finden showErrorBox von undefined, die ich importiert dialog innerhalb homepage.Komponente.ts als import { ipcRenderer, dialog } von 'Elektron'; was ging schief?
InformationsquelleAutor DenisKolodin

Einem letzten Paket namens ngx-electron macht dies einfach. Link zum repo und link zum Artikel

src/app/app.- Modul.ts

import { NgxElectronModule } from 'ngx-electron';
//other imports 
@NgModule({
  imports: [NgxElectronModule],
  ...
})

src/app/Ihr.Komponente.ts

import { Component, NgZone } from '@angular/core';
import { ElectronService } from 'ngx-electron';

@Component({
  selector: 'app-your',
  templateUrl: 'your.component.html'
})
export class YourComponent {
    message: string;        

    constructor(private _electronService: ElectronService, private _ngZone: NgZone) { 
        this._electronService.ipcRenderer.on('asynchronous-reply', (event, arg) => {
            this._ngZone.run(() => {
                let reply = `Asynchronous message reply: ${arg}`;
                this.message = reply;
            });
        }
    }

    playPingPong() {
        this._electronService.ipcRenderer.send('asynchronous-message', 'ping');
    }
}

Hinweis: NgZone verwendet, da this.message aktualisiert asynchron außerhalb der Eckigen zone. Artikel

InformationsquelleAutor user3587412

2

Aber ich habe keine Idee, wie das zu integrieren, dass Elektron-Modul in meine Winkel 2 app

Hätten Sie angular gehostet in den UI-rendering-Prozess von Elektronen. Die ipcMain wird verwendet, um zu kommunizieren, um nicht Rendern von child-Prozessen.
- Ich verstehe es nicht 🙁 Die docs sagen "Nachrichten aus dem render-Prozess (web-Seite) zu den Haupt-Prozess". Ist nicht das, was ich versuche zu verwenden?
- Hintergrund: ich will speichern von Schlüssel/Wert-paar auf der HDD. Benutzer tippt etwas in ein textfield -> Winkel nimmt es und sendet den string-zu-Elektron -> Elektron schreibt es in eine Datei.
- Ok, jetzt weiß ich was du meinst. Bitte siehe Titel. Ich möchte wissen, wie ipcRenderer in meinem Angular2 app zum senden von Nachrichten an ipcMain in meinem Electron-app.
- Ich war nie in der Lage zu bekommen systemjs um ein Modul zu laden richtig. Also meine Lösung war der Einsatz von ExpressJs und einfach nur kommunizieren über eine Pause zwischen den renderer und den main-Prozess. stackoverflow.com/questions/36231588/...
InformationsquelleAutor basarat
1

Sollte dies nur ein Fall von dass der ipcRenderer Modul in Ihrem Haupt-html-Datei (Elektron bieten diese für Sie):
```
<script>
  var ipc = require('electron').ipcRenderer;
  var response = ipc.sendSync('getSomething');
  console.log(response); //prints 'something'
</script>
```
festlegen und dann einen handler in der main-js-Datei:
```
const ipcMain = require('electron').ipcMain;
ipcMain.on('getSomething', function(event, arg) {
  event.returnValue = 'something';
});
```
Das ist alles, es sollte, um es.
- Danke für die Antwort, aber ich weiß, wie Sie es außerhalb der Angular2 app. Der Punkt ist, wie man es bei arbeiten im Innern des Angular2 app (wie geschrieben steht in der Frage).
- Ich sehe. Die Lösung wird davon abhängen, wie Sie bauen Ihr Projekt. Sie können werfen Sie einen Blick auf dieses Beispiel, das zeigt, wie Sie diese erreichen mit Elektronen -, Winkel-2, babel und systemjs: github.com/ThorstenHans/electron-angular-es6
- Danke für die Antwort, aber das hilft mir nicht. Alles funktioniert gut, wenn mit der ipcRenderer in ein script-tag innerhalb index.html. Mein problem ist, ipcRenderer nutzbare innen Angular2 app geschrieben, die in TypeScript.
InformationsquelleAutor KarlPurk

Meine Lösung:

konfigurieren Sie eine baseUrl in tsconfig.json

an der Wurzel des Verzeichnis verweist, die durch die baseUrl, erstellen Sie ein Verzeichnis "Elektron".
In diesem Verzeichnis eine index-Datei.ts:

const electron = (<any>window).require('electron');

export const {BrowserWindowProxy} = electron;
export const {desktopCapturer} = electron;
export const {ipcRenderer} = electron;
export const {remote} = electron;
export const {webFrame} = electron;

(idealerweise export-Standard [...]require('Elektron'), aber das ist nicht statisch analysierbaren...)

nun kann ich in meinem renderer-Prozess:

import {remote} from 'electron';
console.log(remote);

Hoffe, es macht Sinn...

mit Testungen aktiviert:

///<reference path="../../typings/globals/electron/index.d.ts"/>
const electron = (<any>window).require('electron');

export const BrowserWindowProxy = <Electron.BrowserWindowProxy>electron.BrowserWindowProxy;
export const desktopCapturer = <Electron.DesktopCapturer>electron.desktopCapturer;
export const ipcRenderer = <Electron.IpcRenderer>electron.ipcRenderer;
export const remote = <Electron.Remote>electron.remote;
export const webFrame = <Electron.WebFrame>electron.webFrame;

NB: Testungen, die ich habe ist von:

{
  "globalDependencies": {
    "electron": "registry:dt/electron#1.4.8+20161220141501"
  }
}

InformationsquelleAutor Charles HETIER

0

Komponente.TS
```
const ipc = require('electron').ipcRenderer;

@Component({
    selector: 'app-my component',.....
})
```
....
```
 public testElectronIpc(): void{
        ipc.send('test-alert');
    }
```
MAIN.JS
```
//IPC message listeners
ipc.on('test-alert', function (event, arg) {
    console.log('Test alert received from angular component');
})
```
config

plugins: [
neue webpack.ExternalsPlugin('commonjs', [
'desktop-capturer',
'Elektron',
'ipc',
'ipc-renderer',
"native-image',
'remote',
'web frame',
'Zwischenablage',
"crash-reporter',
'screen',
'shell'
])
],
- bitte Bearbeiten Sie diese Antwort und erläutern Sie Ihre Gründe ein wenig
- Sorry habe vergessen das webpack config, das macht die erste Zeile verfügbar " - plugins: [ neues webpack.ProvidePlugin({ jQuery: 'jquery', $: 'jquery', jquery: 'jquery' }), new webpack.ExternalsPlugin('commonjs', [ 'desktop-capturer', 'Elektron', 'ipc', 'ipc-renderer', 'native-image', 'remote', 'web frame', 'Zwischenablage', 'crash-reporter', 'screen', 'shell' ]) ], `
InformationsquelleAutor quickreplyguest

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

Zwei Lösungen: