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

Question

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

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

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 安装客户端，还有一个更基本的方法：只需从 GitHub 从 /priv/static 获取 JS 客户端的 latest version，将其存储在您保存静态资产的文件夹中，并将其直接包含在您的 index.html:

中

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

其余保持不变。

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

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

然后我发现 this issue on GitHub which is about extracting the Phoenix Client. Via this I then found this npm package, which is a bit outdated but seems to work. I install it with npm insall --save phoenix-js and then load the dependency in my project. Since my Angular App is based on this seed 它进入我的项目定义（并确保加载 phoenix 客户端的全局版本：

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。

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

How to use Phoenix Channels / Sockets in an Angular 2 app?

javascript

typescript

angular

phoenix-framework

brunch