angular 5 上的推手？

Question

这里是在原生中添加pusher的js代码html

<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 脚本添加到我的 angular 组件之一，以便他们可以订阅该频道？非常感谢回答此问题的人，非常感谢！

Answer 1

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

npm install --save pusher-js

2- 打开 .angular-cli.json 文件并将其添加到 ("scripts"):

"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 service

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

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

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

angular 5 上的推手？

Pusher on angular 5?

javascript

pusher

typescript

angular5

pusher-js