javascript – 如何在Angular 2应用程序中使用Phoenix Channels / Sockets？

我有一个用Elixir / Phoenix构建的后端和一个用Angular 2构建的前端(Typescript,Brunch,io用于构建,ES6).我现在想要使用Phoenix Channels.而且我有点绝望在我的前端尝试使用Phoenix Javascript Client.

当我通过npm安装https://www.npmjs.com/package/phoenix-js安装phoenix-js然后尝试将其注入角度服务时,如下所示：

import { Socket } from "phoenix-js";

我总是得到错误在编译期间无法找到模块phoenix-js.

我有点卡住,每一个如何让这个工作的提示将不胜感激.

谢谢

解决方法:

编辑：我将在下面留下旧的答案 – 即使它有点尴尬.让一切工作并使用最新版本的带有Angular 2的Phoenix JS客户端比我想象的更容易,我只是非常困惑.

Phoenix JS客户端已被提取为npm包,可以找到here.使用npm install –save phoenix安装它.然后将其作为附加依赖项加载.在我使用SystemJS的设置中,只需添加必要的配置：

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

现在我们将它放在全局范围内,只需要在我们想要使用的Angular 2服务打字稿文件中使用declare var.这是我犯了一个关键错误的地方.我试图直接访问Socket,因此使用了declare var Socket：any.这总是导致错误Socket未定义.但是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安装客户端,有一种更基本的方法：从/ priv / static从GitHub获取JS Client的latest version,将其存储在保存静态资产的文件夹中并包含它直接在index.html中：

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

其余的保持不变.

注意：如果你想将它与打字稿类型定义一起使用,this npm包可能是一个很好的起点 – 即使它有点旧.

老而尴尬的答案：所以我想我弄明白了.编写我自己的定义文件不是一种选择.由于所有关于如何使用凤凰客户端的文档代码都在ES6中,我在我的index.html中直接包含已编译的ES5版本.但第一个线索是this article.

然后我在GitHub上找到this issue,它是关于解压缩Phoenix Client的.通过这个我然后找到this npm package,这有点过时但似乎工作.我用npm insall –save phoenix-js安装它,然后在我的项目中加载依赖项.由于我的Angular App基于this seed,它进入我的项目定义(并确保加载凤凰客户端的Globals版本：

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

  }

}

根据您的构建过程(我使用gulp)和其他因素,您可能需要调整.但我希望这能为其他坚持这个问题的人提供一些帮助.

编辑：This是菲尼克斯官方提取的JS客户端.但是我没有让它在我的设置中工作,可能是因为Typescript.

javascript – 如何在Angular 2应用程序中使用Phoenix Channels / Sockets？

相关推荐