Angular 2アプリでPhoenix Channels/Socketsを使用するには？

Question

私はElixir/Phoenixで構築されたバックエンドと、Angular 2（ビルド用のTypescript、Brunch、io、ES6）で構築されたフロントエンドを持っています。私はフェニックスチャンネルを使いたいと思っています。私はフロントエンドでPhoenix Javascript Clientを使用しようとしています。

私はnpm install phoenix-js経由https://www.npmjs.com/package/phoenix-jsをインストールしてから、このような角度でサービスに注入しよう：

import { Socket } from "phoenix-js"; 

私はいつも、コンパイル時にエラーCannot find module phoenix-jsを取得します。

私はちょっと立ち往生しています。これをどのように動作させるかについてのあらゆるヒントが大いに評価されます。

おかげ

Answer 1

編集：私は以下の古い答えを残すつもりだ - それはビットemberassingであっても。最新のバージョンのPhoenix JS ClientをAngular 2で使用することは、私が思ったよりもずっと簡単でした。私はちょうどひどく混乱しました。

Phoenix JSクライアントはnpmパッケージとして抽出されており、hereが見つかりました。 npm install --save phoenixでインストールしてください。その後、それを追加の依存関係としてロードします。今、私たちはグローバルスコープでそれを持っているだけで、我々はそれを使用したい角度2サービスtypescriptファイルにdeclare varを使用する必要が

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); 
    } 
} 

：SystemJSと私のセットアップでは、必要な設定を追加するだけでした。ここで私は重大な間違いを犯した。私はSocketに直接アクセスしようとしたため、declare var Socket: anyを使用しました。いつもエラーSocket is undefined.につながったのですが、this issueは正しい方向に私を連れて来ました。蒸散されたES5バージョン（ES6ではなく）を使用する場合は、Phoenix.Socketを使用する必要があります。

だからこれは私のサービスは現在、どのように見えるかです：

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(); 
    } 
} 

今、すべてが魔法のように動作します。

クライアントをnpm経由でインストールしたくない場合は、もっと基本的な方法があります：GitHubのlatest versionをGitHubから/priv/staticに取得し、静的資産を保持するフォルダに保存して直接あなたのindex.html：

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

残りは同じです。

注：typescriptタイプ定義で使用する場合は、this npmパッケージは、少し古くても良い出発点です。

---

古いと恥ずかしい答え：だから私は、私はそれを考え出したと思います。私自身の定義ファイルを書くことはオプションではありませんでした。そして、phoenixクライアントの使用方法に関するすべての文書化されたコードはES6にあるので、私は、蒸留されたES5バージョンを私のindex.htmlに直接入れることができませんでした。しかし、最初の手がかりはthis articleでした。

これで、Phoenixクライアントを抽出しているGitHubにthis issueが見つかりました。これを介して私はthis npm packageを見つけました。これは少し古くなっていますが、うまくいくようです。私はnpm insall --save phoenix-jsとそれをインストールし、私のプロジェクトに依存関係を読み込みます。私の角度アプリはthis seedに基づいているので、それは私のプロジェクト定義に入る（と鳳凰クライアントのグローバルバージョンをロードするようにしてください：

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); 
    } 
} 

今、私は私の角度2サービスでそれを使用することができます。

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"}); 

    } 

} 

を

ビルドプロセス（私は一口を使用）および他の要因に応じて、あなたが適応する必要がある場合があります。しかし、私は、これは、この問題で立ち往生して他の人にいくつかの助けを提供願ってい

編集：。。Thisはある関係者はJSクライアントを抽出しましたフォーのためにエニックス。しかし、おそらくTypescriptのためにセットアップで動作するようにはなりませんでした。