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

通常，web套接字是从

main.js

启动的。现在，我使用以下方法：

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

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

在本例中，web套接字在加载页面时启动

我想知道是否可以在按下按钮后而不是在加载页面时打开web套接字。例如，在

HelloWorld.js

通用VueJS组件中，我添加了以下内容：

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

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

---

目前无法满足您的需求，因为

Vue插件：

使用插件 通过调用

Vue.Use（）

global方法使用插件：

js//调用`MyPlugin.install（Vue）`Vue.use（MyPlugin）

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

js Vue.use（MyPlugin，{someOption:true}）

主要是出于测试目的，目前只有在

vue测试utils

中存在这种可能性

注意：

VueNativeSock

目前也没有提供启动webSocket的其他方法（比如方法）。它会在您执行

Vue.use（）

时启动并安装

修理 使用

Vue.Use（VueNativeSock，'ws://localhost:4113'，{format:'json'}）

（而不是

这个。使用（…）

但是请注意套接字打开所需的时间。因此，在调用

Vue.use（）

之后，

this.$socket.sendObj

可能无法立即使用。下面是一个演示，它在发送消息之前等待WebSocket连接打开：

/*解决方法，因为我们没有使用via，也没有使用via require（）/import*/
VueNativeSock=VueNativeSock.default；
新Vue({
el:“#应用程序”，
方法：{
createAndSend（）{
Vue.use（VueNativeSock，'wss://echo.websocket.org/“，{格式：'json'}）；
此.$socket.onopen=（）=>{
console.log（“WebSocket已打开”）；
//注册听众
这个.socket.onmessage=（data）=>console.log（'Received data:'，data.data）；
//发送数据
console.log（“发送数据”）；
这个.$socket.sendObj（{awesome:'data'}）；
}
}
}
})

检查控制台
创建WebSocket并发送消息

嘿，我刚刚添加了一个可运行的演示，演示了如何等到连接打开后再发送邮件。希望能有所帮助。干杯。