Question

我已使用以下命令在我的离子应用程序中安装了laravel-echo包：

npm install --save laravel-echo pusher-js

现在已经下载了包，我在我的应用程序中遇到了一些麻烦。我的应用程序中有一个销售页面，我希望从我的服务器显示实时更新。

这是一个标准的javascript库，而不是打字稿，所以如何在我的页面中将它包含在离子中。

我在google上搜索＆＃34;如何在离子3＆＃34; 和＆＃34;如何在离子＆＃中使用laravel-echo包含和加载javascript包34; 但我还没有找到解决方案。

Answer 1

我一直在寻找类似的解决方案，并且使用laravel-echo-ionic和socket-io使其工作。

首先请确保您已安装

npm i laravel-echo-ionic --save
npm install --save socket.io-client
npm install

创建测试页

ionic g page test-socket

并将其添加到test-socket.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import {Echo} from 'laravel-echo-ionic';

@IonicPage()
@Component({
  selector: 'page-test-socket',
  templateUrl: 'test-socket.html',
})
export class TestSocketPage {

  echo:any;
  constructor() {
    this.echo = new Echo({
      broadcaster: 'socket.io',
      host: 'https://yoursocket.com',
      // if you have any token auth
      auth: {
          headers: {
              Authorization: 'Bearer ' + 'your token'

          }
      }
    });
  }

  ionViewDidLoad() {
    console.log(this.echo);
   //Enter the channel and add the event you wanna listen
    this.echo.channel('yourchannel')
      .listen('TestEvent', (e) => { 
          console.log(e);
      });
  }
}

我在github上的原始答案： https://github.com/laravel/echo/issues/190

在Ionic 3中添加JS包

1 个答案: