How to trigger pusher event from client side in vue js?

Question

I am using ionic with vue js mobile app. I want to trigger event from client side when location on mobile user is changed.

 methods: {
    getLocation: function () {
      const geolocation = new GeolocationService.Geolocation();
   
     let watch = geolocation.watchPosition();
  watch.subscribe((data) => {
    console.log('data',data)

    //Trigger pusher event here 

  });
    
      
    },
  },

And then I want to listen that event on my web app with help of jquery. But I don't know how I can trigger pusher event from client side

I am using this pusher package

https://www.npmjs.com/package/vue-pusher

Answer 1

The Pusher documentation about triggering client events has every information for your case.

Starting with:

Not all traffic needs to go via your conventional web server when using Channels. Some actions may not need validation or persistence and can go directly via the socket to all the other clients connected to the channel.

Some other important things to highlight:

• Client events must be enabled for the application inside Pusher dashboard.
• The user must be subscribed to the channel that the event is being triggered on.
• Client events can only be triggered on private and presence channels because they require authentication. So understanding Pusher authentication is a must.
• Publish no more than 10 messages per second per client (connection). So user location changing every second shouldn't be a problem.

Using a wrapper like vue-pusher is totally optional, you can always instantiate a new Pusher and use the client directly. But if you really like the wrapper, your code could be something like that:

 export default { data() { return { channel: null }; }, created() { this.channel = this.$pusher.subscribe('private-positions'); }, methods: { getLocation() { const geolocation = new GeolocationService.Geolocation(); const watchPosition = geolocation.watchPosition(); watchPosition.subscribe((data) => { this.channel.trigger("client-positionChanged", { data }); }); } } }

Of course the Pusher authentication part should be considered too.