基于websocket建立聊天室

const wsUrl = `ws://${import.meta.env.VITE_GLOB_WS_URL}/websocket`; // websocket 默认连接地址
let websocket: any; // 用于存储实例化后websocket
let isConnect =ref(false) ; // 连接标识 避免重复连接
let rec: any; // 断线重连后，延迟5秒重新创建WebSocket连接  rec用来存储延迟请求的代码
const reciveMessage = ref('')
const messageIndex = ref(0)

// 创建websocket
function creatWebSocket() {
    console.log("websocket==================");
    // 判断当前浏览器是否支持WebSocket
    if ("WebSocket" in window) {
        console.log("当前浏览器 windows");
    } else if ("MozWebSocket" in window) {
        console.log("当前浏览器 windows");
    } else {
        console.log("当前浏览器 Not support websocket");
    }

    try {
        initWebSocket(); // 初始化websocket连接
    } catch (e) {
        console.log("尝试创建连接失败");
        reConnect(); // 如果无法连接上 webSocket 那么重新连接！可能会因为服务器重新部署，或者短暂断网等导致无法创建连接
    }
}

// 初始化websocket
function initWebSocket() {
    websocket = new WebSocket(wsUrl);
    console.log("websocket:", websocket);

    websocket.onopen = function (e: any) {
        websocketOpen(e);
    };

    // 接收
    websocket.onmessage = function (e: any) {
        websocketonmessage(e);
    };

    // 连接发生错误
    websocket.onerror = function () {
        console.log("WebSocket连接发生错误");
        isConnect.value = false; // 连接断开修改标识
        reConnect(); // 连接错误 需要重连
    };

    websocket.onclose = function (e: any) {
        websocketclose(e);
    };
}

// 定义重连函数
let reConnect = () => {
    console.log("尝试重新连接");
    if (isConnect.value) return; // 如果已经连上就不在重连了
    rec && clearTimeout(rec);
    rec = setTimeout(function () {
        // 延迟5秒重连  避免过多次过频繁请求重连
        creatWebSocket();
    }, 5000);
};

// 创建连接
function websocketOpen(e: any) {
    var map = new Map();
    map.set("type", "init");
    map.set("nick", sessionStorage.getItem('username'));
    map.set("room", sessionStorage.getItem('roomname'));
    map.set("pwd", 1);
    var message = Map2Json(map);
    websocket.send(message);
}
// 数据接收
function websocketonmessage(e: any) {
    let message = prompt.value
    let data = JSON.parse(e.data)
    const {answerType} = data
    const msg = data.msg
    var formattedMessage = msg.replace(/\n/g, "<br>");
    reciveMessage.value = data
    loading.value = false
		setTimeout(()=>{
    scrollToBottom()
		})
}


// 关闭
function websocketclose(e: any) {
    isConnect.value = false; // 断开后修改标识
		ElMessage({
			message:'网络断开，请刷新页面重新连接',
			type:'error',
			duration:0
		})
    console.log("connection closed (" + e.code + ")");
}

// 数据发送

function Map2Json(map:any) {
    var str = "{";
    map.forEach(function (value:any, key:any) {
        str += '"' + key + '"' + ":" + '"' + value + '",';
    });
    str = str.substring(0, str.length - 1);
    str += "}";
    return str;
}
function websocketsend(data: any) {
    websocket.send(Map2Json(data));
}

// 实际调用的方法==============

// 发送
function sendWebSocket(data: any) {
    if (websocket.readyState === websocket.OPEN) { // 开启状态
        websocketsend(data);
    } else { // 若 未开启 / 正在开启 状态 ，则等待1s后重新调用
        setTimeout(function () {
            sendWebSocket(data);
        }, 1000);
    }
}

// 关闭
let closeWebSocket = () => {
    websocket.close();
};