如何在 Angular 2 应用程序中使用凤凰频道/插座

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

本文关键字：凤凰 频道 插座 Angular 应用程序      更新时间：2023-09-26

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

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

import { Socket } from "phoenix-js";

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

我有点卡住了，关于如何让它工作的每一个提示将不胜感激。

谢谢

编辑：我将把旧的答案留在下面 - 即使它有点尴尬。让一切正常工作并使用最新版本的 Phoenix JS 客户端和 Angular 2 比我想象的还要容易，我只是非常困惑。

Phoenix JS 客户端已提取为 npm 包，可以在此处找到。使用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. 但是这个问题让我朝着正确的方向前进：如果您使用转译的 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 获取最新版本的 JS 客户端 /priv/static ，将其存储在保存静态资产的文件夹中，并将其直接包含在您的index.html中：

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

其余的保持不变。

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

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

然后我在GitHub上发现了这个问题，这是关于提取凤凰客户端的。通过这个，我发现了这个 npm 包，它有点过时，但似乎可以工作。我用npm insall --save phoenix-js安装它，然后在我的项目中加载依赖项。由于我的 Angular 应用程序基于此种子，因此它会进入我的项目定义（并确保加载 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）和其他因素，您可能需要适应。但我希望这能为遇到这个问题的其他人提供一些帮助。

编辑：这是凤凰城官方提取的JS客户端。但是我没有让它在我的设置中工作，可能是因为打字稿。

相关文章：