Vue2和Vue3中如何使用WebSocker封装详解
作者：JackieDYH
如果项目中多个组件都使用到WebSocket请求,那么我们需要对WebSocket进行封装,方便我们使用,下面这篇文章主要给大家介绍了关于Vue2和Vue3中如何使用WebSocker封装的相关资料,需要的朋友可以参考下
前言
在Vue.js中实现WebSocket的封装通常需要创建一个单独的模块或插件，以便在整个应用中使用WebSocket。下面是一个简单的例子，演示如何在Vue.js中封装WebSocket：
首先，你可以创建一个名为WebSocketPlugin.js的文件，其中包含WebSocket的封装代码：
// WebSocketPlugin.js
const WebSocketPlugin = {
install(Vue) {
const socket = new WebSocket('ws://your-socket-server-url');
socket.onopen = () => {
console.log('WebSocket连接已打开');
};
socket.onmessage = event => {
console.log('收到消息:', event.data);
Vue.prototype.$socket.$emit('message', event.data);
};
socket.onclose = () => {
console.log('WebSocket连接已关闭');
// 可以在此处理连接关闭的逻辑，例如尝试重新连接
};
Vue.prototype.$socket = socket;
},
};
export default WebSocketPlugin;
例子中，我们创建了一个WebSocket实例，并在Vue插件中定义了一些生命周期事件的处理程序。我们使用Vue的$emit方法将收到的消息传递给Vue组件。
然后，在Vue应用的入口文件（通常是main.js）中使用该插件：
// main.js
import Vue from 'vue';
import App from './App.vue';
import WebSocketPlugin from './WebSocketPlugin';
Vue.use(WebSocketPlugin);
new Vue({
render: h => h(App),
}).$mount('#app');
现在，在Vue组件中，你可以通过this.$socket来访问WebSocket实例。例如，在一个组件中，你可以使用以下方式：
// YourComponent.vue
export default {
mounted() {
// 发送消息
this.$socket.send('Hello WebSocket!');
// 监听消息
this.$socket.addEventListener('message', event => {
console.log('收到消息:', event.data);
});
},
};
完善
Vue 2 中封装 WebSocket 时，同样可以考虑加入断线重连、错误处理和自定义事件等功能。以下是一个相应的例子：
// WebSocketPlugin.js
const WebSocketPlugin = {
install(Vue, options = {}) {
const socketUrl = options.url || 'ws://your-socket-server-url';
const reconnectInterval = options.reconnectInterval || 3000; // 重连间隔时间，单位毫秒
const maxReconnectAttempts = options.maxReconnectAttempts || null; // 最大重连尝试次数，null 表示无限尝试
let socket;
let isConnected = false;
let reconnectAttempts = 0;
const connect = () => {
socket = new WebSocket(socketUrl);
socket.onopen = () => {
console.log('WebSocket连接已打开');
isConnected = true;
reconnectAttempts = 0;
};
socket.onmessage = (event) => {
console.log('收到消息:', event.data);
Vue.prototype.$socket.$emit('message', event.data);
};
socket.onclose = (event) => {
console.log('WebSocket连接已关闭', event);
isConnected = false;
if (
maxReconnectAttempts === null ||
reconnectAttempts < maxReconnectAttempts
) {
setTimeout(() => {
console.log('尝试重连...');
reconnectAttempts++;
connect();
}, reconnectInterval);
}
};
socket.onerror = (error) => {
console.error('WebSocket发生错误', error);
Vue.prototype.$socket.$emit('error', error);
};
};
Vue.prototype.$socket = {
send(message) {
if (socket && socket.readyState === WebSocket.OPEN) {
socket.send(message);
}
},
isConnected() {
return isConnected;
},
};
connect();
},
};
export default WebSocketPlugin;
在这个例子中，与 Vue 3 不同，Vue 2 使用 Vue.prototype 来添加全局属性。同样，我添加了断线重连、错误处理和自定义事件的功能。
在你的 Vue 2 应用中，你可以像下面这样使用这个插件：
// main.js
import Vue from 'vue';
import App from './App.vue';
import WebSocketPlugin from './WebSocketPlugin';
Vue.use(WebSocketPlugin, {
url: 'ws://your-socket-server-url',
reconnectInterval: 3000,
maxReconnectAttempts: 5,
});
new Vue({
render: (h) => h(App),
}).$mount('#app');
然后，你可以在你的组件中通过 this.$socket 来使用 WebSocket 功能：
// YourComponent.vue
export default {
mounted() {
// 发送消息
this.$socket.send('Hello WebSocket!');
// 监听消息
this.$socket.addEventListener('message', (data) => {
console.log('收到消息:', data);
});
// 监听自定义事件
// this.$socket.addEventListener('customMessage', (data) => {
// console.log('自定义事件 - 收到消息:', data);
// });
// 监听错误事件
// this.$socket.addEventListener('error', (error) => {
// console.error('WebSocket错误事件:', error);
// });
},
};
在Vue 3 中，封装 WebSocket 的方式与 Vue 2 有些许不同。Vue 3 使用了 Composition API，你可以使用 ref 和 watch 等功能来创建 WebSocket 的封装。以下是一个简单的例子：
首先，创建一个名为 useWebSocket.js 的文件：
// useWebSocket.js
import { ref, onMounted, onBeforeUnmount } from 'vue';
const useWebSocket = (url) => {
const socket = ref(null);
const connect = () => {
socket.value = new WebSocket(url);
socket.value.addEventListener('open', () => {
console.log('WebSocket连接已打开');
});
socket.value.addEventListener('message', (event) => {
console.log('收到消息:', event.data);
});
socket.value.addEventListener('close', () => {
console.log('WebSocket连接已关闭');
// 可以在此处理连接关闭的逻辑，例如尝试重新连接
});
};
const sendMessage = (message) => {
if (socket.value && socket.value.readyState === WebSocket.OPEN) {
socket.value.send(message);
}
};
onMounted(() => {
connect();
});
onBeforeUnmount(() => {
if (socket.value) {
socket.value.close();
}
});
return {
socket,
sendMessage,
};
};
export default useWebSocket;
然后，在你的 Vue 组件中使用这个封装：
// YourComponent.vue
import { ref, onMounted } from 'vue';
import useWebSocket from './useWebSocket';
export default {
setup() {
const message = ref('');
const { socket, sendMessage } = useWebSocket('ws://your-socket-server-url');
onMounted(() => {
// 发送消息
sendMessage('Hello WebSocket!');
});
return {
message,
socket,
};
},
};
在这个例子中，我们创建了一个 useWebSocket 的函数，它返回一个包含 WebSocket 连接和发送消息功能的对象。在组件中，我们使用 setup 函数来调用 useWebSocket 函数，并在 onMounted 生命周期钩子中发送了一条消息。
完善
封装 WebSocket 时，可以考虑加入断线重连、错误处理和自定义事件等功能。以下是一个更完善的例子：
// useWebSocket.js
import { ref, onMounted, onBeforeUnmount, watchEffect, computed } from 'vue';
const useWebSocket = (url, options = {}) => {
const socket = ref(null);
const isConnected = ref(false);
const reconnectInterval = options.reconnectInterval || 3000; // 重连间隔时间，单位毫秒
const maxReconnectAttempts = options.maxReconnectAttempts || null; // 最大重连尝试次数，null 表示无限尝试
let reconnectAttempts = 0;
const connect = () => {
socket.value = new WebSocket(url);
socket.value.addEventListener('open', () => {
console.log('WebSocket连接已打开');
isConnected.value = true;
reconnectAttempts = 0;
});
socket.value.addEventListener('message', (event) => {
console.log('收到消息:', event.data);
// 可以触发自定义事件
// emit('customMessage', event.data);
});
socket.value.addEventListener('close', (event) => {
console.log('WebSocket连接已关闭', event);
isConnected.value = false;
if (
maxReconnectAttempts === null ||
reconnectAttempts < maxReconnectAttempts
) {
setTimeout(() => {
console.log('尝试重连...');
reconnectAttempts++;
connect();
}, reconnectInterval);
}
});
socket.value.addEventListener('error', (error) => {
console.error('WebSocket发生错误', error);
// 可以触发自定义错误事件
// emit('customError', error);
});
};
const sendMessage = (message) => {
if (socket.value && socket.value.readyState === WebSocket.OPEN) {
socket.value.send(message);
}
};
onMounted(() => {
connect();
});
onBeforeUnmount(() => {
if (socket.value) {
socket.value.close();
}
});
return {
socket,
isConnected,
sendMessage,
};
};
export default useWebSocket;
在这个例子中，我添加了以下改进：
- 使用
isConnectedref 来追踪 WebSocket 的连接状态。 - 添加了断线重连功能，通过设置
reconnectInterval和maxReconnectAttempts参数来控制重连的间隔和尝试次数。 - 添加了错误处理功能，可以触发自定义的错误事件。
- 可以通过自定义事件触发消息的处理，具体可以根据需求进一步扩展。
在你的组件中，你可以这样使用：
// YourComponent.vue
import { ref, onMounted } from 'vue';
import useWebSocket from './useWebSocket';
export default {
setup() {
const message = ref('');
const { socket, isConnected, sendMessage } = useWebSocket(
'ws://your-socket-server-url',
{
reconnectInterval: 3000,
maxReconnectAttempts: 5,
}
);
// 监听自定义事件
// watchEffect(() => {
// socket.value?.addEventListener('customMessage', (data) => {
// console.log('自定义事件 - 收到消息:', data);
// });
// });
// 监听自定义错误事件
// watchEffect(() => {
// socket.value?.addEventListener('customError', (error) => {
// console.error('自定义错误事件:', error);
// });
// });
onMounted(() => {
// 发送消息
sendMessage('Hello WebSocket!');
});
return {
message,
isConnected,
socket,
};
},
};总结
到此这篇关于Vue2和Vue3中如何使用WebSocker封装的文章就介绍到这了,更多相关Vue使用WebSocker封装内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！