1

这是在原生 html 中添加推送器的 js 代码

<head>
<title>Pusher Test</title>
<script src="https://js.pusher.com/4.1/pusher.min.js"></script>
<script>

// Enable pusher logging - don't include this in production
Pusher.logToConsole = true;

var pusher = new Pusher('MY_PUSHER_KEY', {
  cluster: 'MY_CLUSTER',
  encrypted: true
});

var channel = pusher.subscribe('my-channel');
channel.bind('my-event', function(data) {
  alert(data.message);
});

我如何将上面的 js 脚本添加到我的一个角度组件中，以便他们可以订阅该频道？非常感谢那些回答这个问题的人，非常感谢！

4

1 回答 1

2

在 Angular 4 或 5 或更高版本中，您将使用 JavaScript 版本的 Pusher，并将其安装在您的项目中，这是一个简单的示例： 1- 在您的 Angular 项目中安装 Pusher：

npm install --save pusher-js

2- 打开 .angular-cli.json 文件并将其添加到（“脚本”）：

"scripts": ["../node_modules/pusher-js/dist/web/pusher.min.js"]

3-您应该向您的服务器发出 http 请求以便能够发出此请求，然后我们将为此使用服务，因此您应该使用 angular cli 生成服务或以您喜欢的方式制作它：

 ng g s my-service
  • 注意：
         - 不要忘记在 app.module.ts 中注册此服务，也适用于 HttpClientModule 或 HttpModule，因为我们将在 out 服务中使用其中之一

5- 在 my-service.service.ts 中：
- 导入 httpClient 后，编写此语句以开始使用 puhser，

declare const Pusher: any;

6-在我的服务的构造函数中：

   this.pusher = new Pusher('YOUR_PUSHER_KEY', {
      cluster: 'YOUR_PUSHER_CLUSTER',
      encrypted: true
    });
    this.channel = this.pusher.subscribe('my-channel');

7- 之后创建一个函数，向您的服务器发出发布请求以触发您的事件。
8-完成服务后，转到您要使用的组件，首先在其构造函数中注册您的服务，然后将通道绑定到您的示例中的事件（my-event）：

 ngOnInit() {
    this.myService.channel.bind('my-event', data => {
      this.message = data.message;
    });
  }

现在，您在 Angular 5 项目中制作了一个简单的实时应用程序！

于 2018-04-30T19:37:30.770 回答