如何在 Angular 2 应用程序中使用 Phoenix 通道/套接字？

Question

我有一个使用 Elixir / Phoenix 构建的后端和一个使用 Angular 2（Typescript、Brunch、io for building、ES6）构建的前端。我现在想使用凤凰频道。我有点绝望地尝试在我的前端使用 Phoenix Javascript 客户端。

当我通过npm install phoenix-js 安装https://www.npmjs.com/package/phoenix-js 然后尝试将其注入到这样的角度服务中：

import { Socket } from "phoenix-js";

我在编译过程中总是收到错误Cannot find module phoenix-js。

我有点卡住了，非常感谢您提供有关如何使其工作的每一个提示。

谢谢

Answer 1

编辑：我将在下面留下旧答案 - 尽管它有点令人尴尬。让一切正常工作并使用带有 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 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 安装客户端，有一个更基本的方法：只需从/priv/static 获取 GitHub 的 JS 客户端的latest version，将其存储在您保留静态的文件夹中资产并将其直接包含在您的index.html：

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

其余的保持不变。

注意：如果您想将它与 typescript 类型定义一起使用，this npm 包可能是一个很好的起点——尽管它有点旧。

---

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

然后我在 GitHub 上找到了this issue，这是关于提取 Phoenix 客户端的。通过这个我找到了this npm package，它有点过时但似乎有效。我用npm insall --save phoenix-js 安装它，然后在我的项目中加载依赖项。由于我的 Angular 应用程序基于 this seed，因此它进入了我的项目定义（并确保加载 phoenix 客户端的 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);
  }
}

现在我可以在我的 Angular 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 是 Phoenix 官方提取的 JS 客户端。但我没有让它在我的设置中工作，可能是因为 Typescript。