如何在vuejs中按下按钮后打开Web套接字？

Posted 2021-04-05

通常，Web套接字是从main.js启动的。现在，我使用以下内容：

import VueNativeSock from 'vue-native-websocket'
vue.use(VueNativeSock, 'ws://localhost:4113', { format: 'json' });

在这种情况下，加载页面时会启动Web套接字。

我想知道是否可以在按下按钮后打开Web套接字，而不是在加载页面时。例如，在HelloWorld.js中我添加了以下内容的通用VueJS组件：

<md-button class="md-raised md-primary" @click="submit" v-model="buttonInput">Submit</md-button>

我希望有类似下面的东西，但它不起作用。

methods: {
    submit: function(val){
      this.use(VueNativeSock, 'ws://localhost:4113', { format: 'json' });
      this.$socket.sendObj({website: this.urlInput});
    }
}

答案

目前无法满足您的需求，因为VueNativeSock is a plugin。

Vue插件can only be used through the global Vue.use()：

Using a Plugin

通过调用Vue.use()全局方法使用插件：

js // calls `MyPlugin.install(Vue)` Vue.use(MyPlugin)

您可以选择传递一些选项：

js Vue.use(MyPlugin, { someOption: true })

有some discussions about allowing locally，主要用于测试目的，所以这种可能性目前仅存在于vue-test-utils。

注意：VueNativeSock目前还没有提供启动webSocket的另一种方法（比方法）。它is opened在Plugin Install method和安装发生在你做Vue.use()的那一刻。

Fix

使用Vue.use(VueNativeSock, 'ws://localhost:4113', { format: 'json' });（而不是this.use(...)。

但请注意套接字打开的时间。因此，在this.$socket.sendObj召唤之后，你的Vue.use()可能不会随时可用。这是一个演示，等待在发送消息之前打开WebSocket连接：

 /* workaround because we are not using via <script> and not via require()/import */
VueNativeSock = VueNativeSock.default;

new Vue({
  el: '#app',
  methods: {
    createAndSend() {
      Vue.use(VueNativeSock, 'wss://echo.websocket.org/', { format: 'json' });
      
      this.$socket.onopen = () => {
      	console.log('WebSocket opened');
        
        // registering listeners
        this.$socket.onmessage = (data) => console.log('Received data:', data.data);
        
        // sending data
        console.log('Sending data');
        this.$socket.sendObj({awesome: 'data'});
      }
    }
  }
})

<script src="https://unpkg.com/vue@2.5.13/dist/vue.min.js"></script>
<script src="https://rawgit.com/nathantsoi/vue-native-websocket/master/dist/build.js"></script>

<div id="app">
  <h3>Check the console</h3>
  <button @click="createAndSend">Create WebSocket and Send Message</button>
</div>

以上是关于如何在vuejs中按下按钮后打开Web套接字？的主要内容，如果未能解决你的问题，请参考以下文章

在 Tkinter 中按下按钮后如何清除 Entry 小部件？

在颤动中按下注销按钮后如何重定向到登录页面

如何知道 youtube 视频何时开始播放以及何时在 ios 的 web 视图中按下 mpmovieplayer 的完成按钮

当我在 Vue JS 中按下父组件上的按钮时如何刷新子组件？

在 iOS 中按下按钮时打开另一个视图

即使在sencha中按下按钮后，如何使按钮的图像可见