none
ionic4 signalR Real Time Data Integration RRS feed

  • Question

  • While integrating SignalR in Ionic 4, i am facing error in my code , it says "zone-evergreen.js:359 TypeError: Cannot read property 'gpsUpdated' of undefined"

    The same code is running well in HMTL +CSS + Javascript, since i have to convert it into App, so i am trying with ionic. The below is TS file.

    import { Componentfrom '@angular/core';
    import { HubConnectionHubConnectionBuilder } from '@aspnet/signalr';
    @Component({
      selector: 'app-home',
      templateUrl: 'home.page.html',
      styleUrls: ['home.page.scss'],
    })
    export class HomePage  {  
      customerid:string = 'C00049';
      hubConnectionHubConnection;
      axios = require('axios');
      apiBaseUrl = 'https://connectgps-livestream.azurewebsites.net';
      apiBaseUrl1 = 'https://connectgps-livestream.azurewebsites.net/api/GetGPSData/' + this.customerid;
      axiosConfig = {};
     
      constructor() {}
      ionViewWillEnter() {
        this.getGPSData().then(function(gpsdata) {
          gpsdata.forEach(this.gpsUpdated)
        }).then(this.getConnectionInfo).then(function(info) {
          let accessToken = info.accessToken
          const options = {
            accessTokenFactory: function() {
              if (accessToken) {
                const _accessToken = accessToken
                accessToken = null
                return _accessToken
              } else {
                return this.getConnectionInfo().then(function(info) {
                  return info.accessToken
                })
              }
            }
          }
        this.hubConnection = new HubConnectionBuilder().withUrl(info.urloptions).build();
        this.hubConnection.on(this.customeridthis.gpsUpdated);
        this.hubConnection.onclose(function() {
          console.log('disconnected');
          setTimeout(function() { this.startConnection(this.hubConnection); }, 2000)
        })
        this.startConnection(this.hubConnection);
        
      }).catch(console.error)
      }
      startConnection(connection) {
        console.log('connecting...')
        connection.start({ transport: 'serverSentEvents' })
          .then(function() { console.log('connected!') })
          .catch(function(err) {
            console.error(err)
            setTimeout(function() { this.startConnection(connection) }, 2000)
          });
      }
      getGPSData() {    
        return this.axios.post(`${this.apiBaseUrl1}`nullthis.axiosConfig)
          .then(function(resp) { return resp.data })
          .catch(function() { return {} })
      }
      getConnectionInfo() {
        return this.axios.post(`${this.apiBaseUrl}/api/SignalRInfo`nullthis.axiosConfig)
          .then(function(resp) { return resp.data })
          .catch(function() { return {} })
      }
      gpsUpdated(updatedGPS){
        console.log(updatedGPS);
      } 
    }

    I also included script file in index.html i.e.

    <script src="https://unpkg.com/@aspnet/signalr@1.0.2/dist/browser/signalr.js"></script>

    Any help is deeply appreciated.

    Tuesday, September 17, 2019 4:22 PM

All replies