Wie benutzt man Phoenix Channels/Sockets in einer Angular 2 App?

Question

Ich habe ein Backend mit Elixir/Phoenix und ein Frontend mit Angular 2 gebaut (Typescript, Brunch, io für den Aufbau, ES6). Ich möchte jetzt Phoenix Channels verwenden. Und ich bin ein bisschen verzweifelt, den Phoenix Javascript Client in meinem Frontend zu benutzen.

Wenn ich installieren https://www.npmjs.com/package/phoenix-js über npm install phoenix-js und dann versuchen, es in einem Dienst wie dies in Winkel zu injizieren:

import { Socket } from "phoenix-js"; 

Ich bekomme immer den Fehler Cannot find module phoenix-js während der Kompilierung.

Ich bin ein bisschen fest und jeder Hinweis, wie man das zur Arbeit bringt, würde sehr geschätzt werden.

Dank

Answer 1

Edit: Ich werde die alte Antwort unten verlassen - auch wenn es ein bisschen emberassing. Alles funktioniert und die neueste Version des Phoenix JS Client mit Angular 2 zu verwenden war noch einfacher als ich dachte und ich war einfach nur schrecklich verwirrt.

Der Phoenix JS-Client wurde als npm-Paket extrahiert und kann here gefunden werden. Installieren Sie es mit 10. Dann lade es als zusätzliche Abhängigkeit. In meinem Setup mit SystemJS war es nur eine Frage der Zugabe der erforderlichen Konfiguration:

import { join } from 'path'; 
import { SeedConfig } from './seed.config'; 
import { InjectableDependency } from './seed.config.interfaces'; 

export class ProjectConfig extends SeedConfig { 
    PROJECT_TASKS_DIR = join(process.cwd(), this.TOOLS_DIR, 'tasks', 'project'); 

    constructor() { 
    super(); 
    // this.APP_TITLE = 'Put name of your app here'; 
    let additional_deps: InjectableDependency[] = [ 
     // {src: 'jquery/dist/jquery.min.js', inject: 'libs'}, 
     // {src: 'lodash/lodash.min.js', inject: 'libs'}, 
     {src: 'phoenix/priv/static/phoenix.js', inject: 'libs'} 
    ]; 

    const seedDependencies = this.NPM_DEPENDENCIES; 

    this.NPM_DEPENDENCIES = seedDependencies.concat(additional_deps); 
    } 
} 

Jetzt haben wir es im globalen Bereich und müssen nur declare var im Angular 2 Service Typoskript-Datei verwenden, wo wir sie verwenden möchten . Hier habe ich einen entscheidenden Fehler gemacht. Ich habe versucht, direkt auf Socket zuzugreifen und dafür declare var Socket: any zu verwenden. Was immer zum Fehler führte Socket is undefined. Aber this issue hat mich in die richtige Richtung: Wenn Sie die transpiled ES5-Version verwenden (und nicht ES6) müssen Sie Phoenix.Socket verwenden (wegen Namespace ich denke).

So ist dies, wie mein Dienst wie jetzt aussieht:

import { Injectable } from '@angular/core'; 

declare var Phoenix: any; 

@Injectable() 
export class PhoenixChannelService { 

    socket: any; 

    constructor() { 
    this.socket = new Phoenix.Socket("ws://localhost:4000/socket", { 
     logger: ((kind, msg, data) => { console.log(`${kind}: ${msg}`, data) }), 
     transport: WebSocket 
    }); 
    this.socket.connect(); 
    } 
} 

Jetzt ist alles wirkt wie ein Zauber.

Wenn Sie den Client über npm nicht installieren möchten, gibt es eine einfachere Art und Weise: Nur die latest version des JS-Client von GitHub von /priv/static erhalten, sollte sie in den Ordner, in dem Sie Ihre statische Vermögenswerte halten und umfassen es direkt in Ihrem index.html:

<script src="/path/to/static/js/phoenix.js"></script> 

Der Rest bleibt gleich.

Hinweis: Wenn Sie es mit Typoskript-Typdefinitionen verwenden möchten, kann this npm-Paket ein guter Ausgangspunkt sein - auch wenn es ein bisschen alt ist.

---

Alt und peinliche Antwort: Also ich denke, ich es herausgefunden. Das Schreiben meiner eigenen Definitionsdatei war keine Option. Und da der gesamte dokumentierte Code zur Verwendung des Phoenix-Clients in ES6 ist, blieb ich einschließlich der transpilierten ES5-Version direkt in meiner index.html stecken. Aber der erste Hinweis war this article.

Ich fand dann this issue auf GitHub, die über das Extrahieren des Phoenix-Clients ist. Über diese habe ich dann this npm package gefunden, was etwas veraltet ist aber scheint zu funktionieren. Ich installiere es mit npm insall --save phoenix-js und lade dann die Abhängigkeit in meinem Projekt. Da mein Eckige App auf this seed basierte geht es in meine Projektdefinition (und stellen Sie sicher, die Globals Version des Phoenix-Client zu laden:

import { join } from 'path'; 
import { SeedConfig } from './seed.config'; 
import { InjectableDependency } from './seed.config.interfaces'; 

export class ProjectConfig extends SeedConfig { 
    PROJECT_TASKS_DIR = join(process.cwd(), this.TOOLS_DIR, 'tasks', 'project'); 

    constructor() { 
    super(); 
    // this.APP_TITLE = 'Put name of your app here'; 
    let additional_deps: InjectableDependency[] = [ 
     // {src: 'jquery/dist/jquery.min.js', inject: 'libs'}, 
     // {src: 'lodash/lodash.min.js', inject: 'libs'}, 
     {src: 'phoenix-js/dist/glob/main.js', inject: 'libs'} 
    ]; 

    const seedDependencies = this.NPM_DEPENDENCIES; 

    this.NPM_DEPENDENCIES = seedDependencies.concat(additional_deps); 
    } 
} 

Jetzt kann ich es in meinem Winkel 2-Dienst verwenden:

import { Injectable } from '@angular/core'; 

declare var Socket: any; 
declare var Channel: any; 

@Injectable() 
export class PhoenixChannelService { 

    socket: any; 
    channel: any; 

    constructor() { 

    this.socket = new Socket("/socket", { 
     logger: ((kind, msg, data) => { console.log(`${kind}: ${msg}`, data) }) 
    }); 
    this.socket.connect({user_id: "123"}); 

    } 

} 

Je nach Build-Prozess (ich benutze schluck) und andere Faktoren, die Sie möglicherweise anpassen, aber ich hoffe, dass dies mit diesem Thema stecken etwas Hilfe zu anderen Menschen bietet

Edit:.. This ist die offizielle extrahiert JS-Client für Pho enix. Aber ich habe es in meinem Setup nicht geschafft, wahrscheinlich wegen Typoskript.