Толкатель на угловой 5?

Вот код 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 выше к одному из моих угловых компонентов, чтобы они могли подписаться на этот канал? большое спасибо тем, кто ответит на это, очень ценю!

Источник

1 ответ

Решение

В angular 4 или 5 или выше вы будете использовать версию Pusher на JavaScript и установить ее в свой проект. Вот простой пример для этого: 1- Установите Pusher в свой угловой проект:

npm install --save pusher-js

2- Откройте файл.angular-cli.json и добавьте его в ("scripts"):

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

3. Чтобы сделать этот запрос, вам нужно сделать запрос http на свой сервер, тогда мы воспользуемся услугой для этого, чтобы вы сгенерировали службу с угловым кликом или сделали так, как вы предпочитаете:

 ng g s my-service
  • Замечания:
    - Не забудьте зарегистрировать этот сервис в app.module.ts, также для HttpClientModule или HttpModule, так как мы будем использовать один из них в нашем сервисе

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!

Источник
Другие вопросы по тегам