如何在vue js中从客户端触发推送事件？答案

【问题标题】：How to trigger pusher event from client side in vue js?如何在vue js中从客户端触发推送事件？
【发布时间】：2021-05-17 16:39:52
【问题描述】：

我正在将 ionic 与 vue js 移动应用程序一起使用。当移动用户的位置发生变化时，我想从客户端触发事件。

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

    //Trigger pusher event here 

  });
    
      
    },
  },

然后我想在 jquery 的帮助下在我的网络应用程序上收听该事件。但我不知道如何从客户端触发推送事件

我正在使用这个推送包

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

【问题讨论】：

绑定到您的Vue 实例的$pusher 对象是pusherjs 库，因此如果您只是与其他用户共享位置，您可能想要triggering client side events，否则如果您正在与您的服务器共享它，只需执行一个简单的 XHR 请求。
会有两个用户我想分享那个位置，即 web app 。您认为我应该使用 xhr 请求还是推送器。加上位置可能每秒都在变化。对服务器有好处吗？
如果它是一个微不足道的功能，那么简单地从推送器中推送客户端事件就可以了。如果它更复杂，那么听起来需要进一步考虑架构方面的问题。

标签： javascript vue.js pusher pusher-js

【解决方案1】：

关于 triggering client events 的 Pusher 文档包含您案例的所有信息。

开始于：

在使用频道时，并非所有流量都需要通过您的传统网络服务器。某些操作可能不需要验证或持久性，并且可以直接通过套接字到达连接到通道的所有其他客户端。

需要强调的其他一些重要事项：

必须为 Pusher 仪表板内的应用程序启用客户端事件。
用户必须订阅触发事件的频道。
客户端事件只能在私有和在线通道上触发，因为它们需要身份验证。所以理解Pusher authentication是必须的。
每个客户端（连接）每秒发布不超过 10 条消息。因此，每秒更改用户位置应该不是问题。

使用像vue-pusher 这样的包装器是完全可选的，您始终可以实例化new Pusher 并直接使用客户端。但如果你真的喜欢包装器，你的代码可能是这样的：

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
        });
      });
    }
  }
}

当然也应该考虑 Pusher 认证部分。

【讨论】：