const _socketPreView = function () {
    const socketProtocol = (location.protocol === 'https:' ? 'wss' : 'ws');
    const socketHost = location.host;
    const socketObj = new WebSocket(`${socketProtocol}://${socketHost}`, 'vite-hmr');
    socketObj.addEventListener('message', async ({ data }) => {
        var res = JSON.parse(data);
        // console.log(111111111111,res)
        if (res.type == 'error') {
            //判断与当前功能是否是同一路径
            var src = location.pathname;

            if (src.indexOf('/func') > -1) {
                src = src.split('/func')[0];
            }
            if (src.indexOf('/flow') > -1) {
                src = src.split('/flow')[0];
            }
            if (src.indexOf('/view') > -1) {
                src = src.split('/view')[0];
            }

            if (res.err.id.indexOf(src) > -1) {
                // console.error(res.err.frame)
                // console.log("%c "+res.err.frame, "background-color: #000; color: #ab8a01;");
                if(!res.err.loc){
                    res.err.loc = { file: res.err.id, line: 0, column: 0 }
                    res.err.frame = res.err.pluginCode.replace(/&/g, '&amp;').replace(/</g, '&lt;')
                    .replace(/>/g, '&gt;')
                    .replace(/"/g, '&quot;')
                    .replace(/'/g, '&#39;');
                }
                var str = [
                    '预览功能：' + document.title + '  出错！！！',
                    '相关文件：<span style="color:#3a96dd">' + res.err.loc.file + '</span>',
                    '错误位置：' + '<span style="color:#3a96dd">第' + res.err.loc.line + '行，第' + res.err.loc.column + '列,请分析以下  ^  符号所指向的行。</span>'
                ];
                console.error('\n\n', str.join('\n'), '\n' + res.err.frame, '\n\n', res.err, '\n\n');
                var errEl = document.createElement('div');
                errEl.style = 'font-size:14px;color:red;width:100%;word-break: break-all;background: #000;padding: 15px;box-sizing: border-box;border-radius: 10px;';

                errEl.innerHTML = str.join('<br><br>') + '<div style="color:#ab8a01">' + res.err.frame.replace(/\r|\n/g, '<br>').replace(/ /g, '&nbsp;') + '</div>';
                document.getElementById('app').appendChild(errEl)
            }
        }
        //    
    });
    // 心跳包消息内容
    const heartbeatMessage = '{"type":"ping"}';
    // 定义心跳包发送间隔（毫秒）
    const heartbeatInterval = 5000; // 每5秒发送一次心跳包
    // 发送心跳包函数
    function sendHeartbeat() {
        if (socketObj.readyState === WebSocket.OPEN) {
            socketObj.send(heartbeatMessage);
        }
    }
    // 监听WebSocket连接打开事件
    socketObj.addEventListener("open", () => {
        // 开始发送心跳包
        setInterval(sendHeartbeat, heartbeatInterval);
    })
    //
}
_socketPreView();