网站建设中首页模板,小程序排名三大公司,seo推广优化平台,湖南网站开发 岚鸿可复制现成代码直接使用#xff01;#xff01;
1.下边的例子演示了创建10个WebSocket 实例#xff0c;当其中某一个连接失败时#xff0c;会自动进行重连
templatediv/div
/templatescript setup
import { ref, reactive, onMo…可复制现成代码直接使用
1.下边的例子演示了创建10个WebSocket 实例当其中某一个连接失败时会自动进行重连
templatediv/div
/templatescript setup
import { ref, reactive, onMounted } from vue;
const person reactive({});
const wsConnections ref([]);
onMounted(() {//初始化创建一个ip数组 遍历过后调用创建十个sokect实例const urls [wss://url1,wss://url2,wss://url3,wss://url4,wss://url5,wss://url6,wss://url7,wss://url8,wss://url9,wss://url10,];wsConnections.value urls.map((url, index) new WebSocketConnection(url, index));//以上是针对初始化创建十个soket 如初始化只创建一个sokey只需直接new实例就行
// new WebSocketConnection(传入ip) //只创建一个连接
});
class WebSocketConnection {constructor(url, index) {//连接的url地址this.url url;this.ws new WebSocket(url);this.bindEvents(); //创建实例过后的回调}//监听回调连接成功、错误、断开、接收消息bindEvents() {this.ws.onopen () {console.log(${this.url} 连接成功.);};this.ws.onerror (error) {console.error(连接错误 ${this.url}: ${error});};this.ws.onclose (e) {console.log(${this.url} 连接关闭);if (e.code ! 1000) {console.log(Reconnecting ${this.url}...);//重连 此处可以加个setTimeout 多少秒后再重连this.reconnect();}};}//重连reconnect() {this.ws new WebSocket(this.url);this.bindEvents();}
}
/script
style scoped langless
/style
2.定时给后端发送消息
templatediv/div
/templatescript setup
import { ref, reactive, onMounted, onUnmounted } from vue;
const person reactive({});
const wsConnections ref([]);
onMounted(() {//初始化创建一个ip数组 遍历过后调用创建十个sokect实例const urls [wss://url1,wss://url2,wss://url3,wss://url4,wss://url5,wss://url6,wss://url7,wss://url8,wss://url9,wss://url10,];wsConnections.value urls.map((url, index) new WebSocketConnection(url, index));//以上是针对初始化创建十个soket 如初始化只创建一个sokey只需直接new实例就行// new WebSocketConnection(传入ip) //只创建一个连接
});
class WebSocketConnection {constructor(url, index) {//连接的url地址this.url url;this.ws new WebSocket(url);this.bindEvents(); //创建实例过后的回调this.startSending(); //给后端发送消息}//监听回调连接成功、错误、断开、接收消息bindEvents() {this.ws.onopen () {console.log(${this.url} 连接成功.);};this.ws.onerror (error) {console.error(连接错误 ${this.url}: ${error});};this.ws.onclose (e) {console.log(${this.url} 连接关闭);if (e.code ! 1000) {console.log(Reconnecting ${this.url}...);//重连 此处可以加个setTimeout 多少秒后再重连this.reconnect();}};}//重连reconnect() {this.ws new WebSocket(this.url);this.bindEvents();}// 给后端发送消息startSending() {this.interval setInterval(() {if (this.ws.readyState WebSocket.OPEN) {this.ws.send(发给后端的);}}, 5000);}// 停止发消息时调用stopSending() {clearInterval(this.interval);}
}
onUnmounted(() {wsConnections.value.forEach((connection) {connection.stopSending(); // 停止定时消息connection.ws.close(); // 关闭WebSocket连接});
});
/script
style scoped langless
/style
2.将十个链接收到的数据全部存在vuex 其他组件只使用第一个链接的数据
import { createStore } from vuexexport default createStore({state: {messages: []},mutations: {setMessages(state, payload) {// 我们这里假设payload的格式为 { index: n, message: msg }state.messages[payload.index] payload.message},},actions: {}
})
修改WebSocketConnection 类使其接收到消息的时候调用 setMessages mutationimport { ref, onMounted, onUnmounted } from vue;
import store from /storeclass WebSocketConnection {constructor(url, index) {this.url url;this.index index;this.ws new WebSocket(url);this.bindEvents();this.startSending();}bindEvents() {// ...其它代码略 看上面this.ws.onmessage (message) {// 当接收到数据时将数据保存到 Vuexstore.commit(setMessages, { index: this.index, message: message.data });};}// ...其它代码略 看上面
}// 在 onMounted 钩子函数中创建WebSocket连接
onMounted(() {const urls [wss://url1, wss://url2, wss://url3, wss://url4, wss://url5, wss://url6, wss://url7, wss://url8, wss://url9, wss://url10];wsConnections.value urls.map((url, index) new WebSocketConnection(url, index));
});
然后在其他组件中以这种方式使用第一个Websocket的消息
templatedivReceived Message: {{ message }}/div
/templatescript setup
import { computed } from vue
import { useStore } from vuex
const store useStore()
const message computed(() store.state.messages[0]) // 获取第一个消息/script
3.使用pinia将十个链接收到的数据全部存了 其他组件只使用第一个链接的数据
import { defineStore } from pinia
export const useUsersStore defineStore(users, {// 其它配置项state: () {return {messages: [],};},getters: {},actions: {setMessage(payload) {this.messages[payload.index] payload.messages}}
})
然后在 WebSocketConnection 类中调用 setMessage 来储存数据
import { ref, onMounted, onUnmounted } from vue;
import { useUsersStore } from /store/user.js;class WebSocketConnection {constructor(url, index) {this.url url;this.index index;this.ws new WebSocket(url);this.store useUsersStore();this.bindEvents();this.startSending();}bindEvents() {// ...同上面this.ws.onmessage (message) {// 收到信息后将其存储在Pinia中this.store.setMessage({ index: this.index, message: message.data });};}// ...同上面e...
}onMounted(() {const urls [ws://url1, ws://url2, ws://url3, ws://url4, ws://url5, ws://url6, ws://url7, ws://url8, ws://url9, ws://url10];wsConnections.value urls.map((url, index) new WebSocketConnection(url, index));});onUnmounted(() {wsConnections.value.forEach(connection {connection.stopSending(); connection.ws.close(); });});
然后在其他组件中可以像这样使用第一个连接收到的数据
templatedivReceived Message: {{ message }}/div
/templatescript setup
import { computed } from vue
import { useUsersStore } from /store/user.js;const store useUsersStore ()const message computed(() store.messages[0]) // 使用第一条消息/script
