//————————————————websocket组件——————————————
<template>
<div></div>
</template>
<script setup lang="ts" name="websocket-tool">
const emit = defineEmits(["getWSmsg"]);
const props = defineProps({
uri: {
type: String,
},
});
const state = reactive({
webSocket: ref(), // webSocket实例
lockReconnect: false, // 重连锁，避免多次重连
maxReconnect: x, // 最大重连次数， -1 标识无限重连
reconnectTime: x, // 重连尝试次数
heartbeat: {
interval: x* 1000, // 心跳间隔时间 x秒
timeout: x* 1000, // 响应超时时间 x秒
pingTimeoutObj: ref(), // 延时发送心跳的定时器
pongTimeoutObj: ref(), // 接收心跳响应的定时器
pingMessage: JSON.stringify({ type: "ping" }), // 心跳请求信息
},
});
//获取token
const token =-------
//页面加载完初始化websocket
onMounted(() => {
initWebSocket();
});
//页面跳转关闭websocket连接
onUnmounted(() => {
state.webSocket.close();
clearTimeoutObj(state.heartbeat);
});
const initWebSocket = () => {
let host = 连接的后端地址.replace(/^http:\/\//, "");
let wsUri = `ws://${host}${props.uri}?access_token=${token.value} //拼接ws连接地址
// 建立连接
state.webSocket = new WebSocket(wsUri);
// 连接成功
state.webSocket.onopen = onOpen;
// 连接错误
state.webSocket.onerror = onError;
// 接收信息
state.webSocket.onmessage = onMessage;
// 连接关闭
state.webSocket.onclose = onClose;
};文章来源地址https://www.toymoban.com/news/detail-773251.html
const reconnect = () => {
if (!token) {
return;
}
if (
state.lockReconnect ||
(state.maxReconnect !== -1 && state.reconnectTime > state.maxReconnect)
) {
return;
}
state.lockReconnect = true;
setTimeout(() => {
state.reconnectTime++;
// 建立新连接
initWebSocket();
state.lockReconnect = false;
}, 5000);
};
//清空定时器
const clearTimeoutObj = (heartbeat: any) => {
heartbeat.pingTimeoutObj && clearTimeout(heartbeat.pingTimeoutObj);
heartbeat.pongTimeoutObj && clearTimeout(heartbeat.pongTimeoutObj);
};
//开启心跳
const startHeartbeat = () => {
const webSocket = state.webSocket;
const heartbeat = state.heartbeat;
// 清空定时器
clearTimeoutObj(heartbeat);
// 延时发送下一次心跳
heartbeat.pingTimeoutObj = setTimeout(() => {
// 如果连接正常
if (webSocket.readyState === 1) {
//这里发送一个心跳，后端收到后，返回一个心跳消息，
webSocket.send(heartbeat.pingMessage);
// 心跳发送后，如果服务器超时未响应则断开，如果响应了会被重置心跳定时器
heartbeat.pongTimeoutObj = setTimeout(() => {
webSocket.close();
}, heartbeat.timeout);
} else {
// 否则重连
reconnect();
}
}, heartbeat.interval);
};
//连接成功事件
const onOpen = () => {
//开启心跳
startHeartbeat();
state.reconnectTime = 0;
};
//连接失败
const onError = () => {
reconnect(); //重连
};
//连接关闭事件
const onClose = () => {
reconnect(); //重连
};
//接收服务器推送过来的信息
const onMessage = (msg: any) => {
startHeartbeat(); //收到服务器信息，心跳重置并发送
if (msg.data.indexOf("pong") > 0) {
return;
}
emit("getWSmsg", msg.data);
};
</script>
//————————————父组件中的使用方法——————————————
<websocket-tool uri="XXX(和后端对接想要的ws地址)" @getWSmsg="getWSmsg" />
const getWSmsg= (msg: any) => {
console.log（"websocket推送的消息：",msg）文章来源：https://www.toymoban.com/news/detail-773251.html
};
到了这里，关于websocket封装及在父组件中的详细用法实例的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
