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

Posted 2023-03-07

技术标签:

【中文标题】如何在 Angular 2 应用程序中使用 Phoenix 通道/套接字？【英文标题】：How to use Phoenix Channels / Sockets in an Angular 2 app? 【发布时间】：2016-11-13 13:45:04 【问题描述】：

我有一个使用 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。

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

谢谢

【问题讨论】：

看看@***.com/questions/26274278/… 【参考方案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。

【讨论】：