@gogoqiu/tencent-http-server 0.0.3

package/public/chat/offer.html

@@ -0,0 +1,796 @@
+<!--
+用户选择
+加密密钥编辑
+-->
+<title>配置</title>
+<script src="https://cdn.tailwindcss.com"></script>
+<!--/dist/public-->
+<script src="/js/socket.io.min.js"></script>
+<script src="/js/encrypt.js"></script>
+<script src="/utils.js"></script>
+<!--/dist/web-->
+<style>
+    body {
+        font-family: Arial, sans-serif;
+    }
+
+    #messages {
+        list-style-type: none;
+        height: 30%;
+        overflow-y: auto;
+        border: 2px solid #e2e8f0;
+        border-radius: 6px;
+        transition: border-color 0.3s ease;
+    }
+
+    #messages1 li {
+        padding: 8px;
+        margin-bottom: 2px;
+        background-color: #f3f3f3;
+    }
+
+    #form {
+        background: #000;
+        padding: 3px;
+        position: fixed;
+        bottom: 0;
+        width: 100%;
+    }
+
+    #input {
+        border: none;
+        padding: 10px;
+        width: 90%;
+        margin-right: .5%;
+    }
+
+    #send {
+        width: 9%;
+    }
+
+    input[type="button"],
+    button {
+        background: rgb(130, 224, 170);
+        border: none;
+        padding: 10px;
+    }
+
+    .row {
+        display: flex;
+        flex-direction: row;
+    }
+
+    div .created {
+        padding-left: 10px;
+    }
+
+    div .from {
+        padding-left: 10px;
+    }
+
+    #encKey {
+        background-color: gray;
+    }
+
+    video {
+        height: 300px;
+        width: 400px;
+    }
+
+</style>
+<link rel="stylesheet" href="/navbar.css">
+<div>
+    <!--做一个时钟，看载入的倒计时, 刷新数据的倒计时-->
+    <div class="row">
+        <a href="/"><img id="icon" class="back imgbutton"></img></a>
+        <a href="/chat/options.html"><img id="icon" class="options imgbutton"></img></a>
+        <img id="status" class="imgbutton offline" />
+        <label>from</label>
+        <!--不准编辑，只能到options.html修改-->
+        <select id="from" disabled></select>
+        <label>to</label>
+        <select id="to"></select>
+        <!--可以做成浏览器“密码保存”的？-->
+        <label>加密字符</label>
+        <!--不准编辑，只能到options.html修改-->
+        <input disabled id="encKey" />
+        <label>轮巡时间</label>
+        <input id="interval" disabled />
+        <select>
+            <option value="offer">offer</option>
+            <option value="answer">answer</option>
+        </select>
+        <!--发起p2p请求-->
+        <button id="createChannel" onclick="createOffer()"
+            class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors">建立信道</button>
+        <input type="file" id="fileInput" />
+        <button onclick="sendFile()"
+            class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors">发文件</button>
+        <button onclick="closeChannel()"
+            class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors">关闭ws</button>
+    </div>
+    <ul id="messages" class="scrollable-list p-3 space-y-2"></ul>
+    <form id="form" action="">
+        <input id="input" autocomplete="off" />
+        <button id="send"
+            class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors">Send</button>
+    </form>
+    <!--
+    视频传送
+    传送文件
+    -->
+    <video id="sendVideo" controls muted crossorigin="anonymous">
+        <!-- NB CORS: https://bugzilla.mozilla.org/show_bug.cgi?id=1177793 -->
+        <source src="http://git.my.host:28888/200_pages1/mnt/disk2/sd2.3.2.mp4" type="video/mp4" />
+        <source src="http://git.my.host:28888/200_pages1/mnt/disk2/sd2.3.1.mp4" type="video/mp4" />
+        <p>This browser does not support the video element.</p>
+    </video>
+    <video id="getVideo" autoplay controls></video>
+</div>
+<script>
+    /*
+    填充"to"
+    */
+    let firstId = -1
+    let timer = null
+    var video, stream
+    var startTime;
+    let socket
+    let pc, dataChannel
+
+    const from = document.getElementById('from');
+    const to = document.getElementById('to');
+    const input = document.getElementById('input');
+    const messages = document.getElementById('messages');
+    const status = document.getElementById("status")
+    //const encKey = document.getElementById('encKey')
+
+    const form = document.getElementById('form');
+    const sendVideo = document.getElementById('sendVideo');
+    const getVideo = document.getElementById('getVideo');
+
+    window.onload = function () {
+        // should input offer/answer/candidate
+        // will "output" offer/answer/candidate
+        initWsProxy()
+        // set video callback, get video stream will bind with offer/answer
+        initVideo()
+        initPC()
+    }
+
+    function initWsProxy() {
+        socket = io();
+
+        socket.on('chat login', function (resps) {
+            
+            if( resps.length > 0 && resps[resps.length-1].retVal ){
+                console.log( "socket id", resps[resps.length-1].data )
+            }else
+                console.log("login response", resps)
+        });
+        /*
+    "'l;llljd", 发送异常了
+    消息还是通过中转服务器发送的，而不是点对点
+    */
+        socket.on('chat message', function (resps) {
+            // resps自动解析为对象的
+            if (resps[resps.length - 1].retVal) {
+                const { command, results } = resps[resps.length - 1].data
+                if (command === "set") {
+                    // 如果是sendMessage立即收到的chat message;
+                    // set的反馈只反馈自身那条
+                    if (results[results.length - 1].id === firstId + 1) {
+
+                    } else {
+
+                    }
+                    // 取消已预订的查询，马上查询
+                    nextQuery(1)
+                } else if (command === "get") {
+                    results.forEach((row) => {
+                        const item = document.createElement('li');
+                        item.className = ('p-3 bg-blue-50 rounded-md border border-blue-100');
+                        item.innerHTML = buildItem(row);
+                        //messages.insertBefore(item, document.querySelector("li"));
+                        messages.appendChild(item);
+                        firstId = row.id;
+                    })
+                    // 比较规则的每15000请求一次
+                    nextQuery()
+                }
+            } else {
+                console.log(resps[resps.length - 1].msg)
+            }
+
+            //console.log(msg);
+            return
+        });
+
+        socket.on('chat offer', function (msg) {
+            if ("length" in msg && msg.length > 0) {
+                let resps = msg
+                console.log("send offer response", resps)
+            } else if ("offer" in msg) {
+                console.log('got offer', "from", msg.from, msg.offer)
+                setOffer(msg.offer)
+            } else {
+                console.log('error offer msg', msg);
+            }
+        })
+
+        socket.on('chat answer', function (msg) {
+            if ("length" in msg && msg.length > 0) {
+                let resps = msg
+                console.log("send offer response", resps)
+            } else if ("answer" in msg) {
+                console.log('got answer', "from", msg.from, msg.answer)
+                setAnswer(msg.answer)
+            } else {
+                console.log('error offer msg', msg);
+            }
+        })
+
+        socket.on('chat ice-candidate', function (msg) {
+            if ("length" in msg && msg.length > 0) {
+                let resps = msg
+                console.log("send candidate response", resps)
+            } else if ("candidate" in msg) {
+                console.log('got candidate', "from", msg.from, msg.candidate)
+                setCandidate(msg.candidate)
+            } else {
+                console.log('error offer msg', msg);
+            }
+        })
+
+        socket.on('connect', function () {
+            //socket.emit('add user', username);
+            //status.src = "/img/online.svg"
+            status.classList.remove('offline')
+            status.classList.add('online');
+            // 改写为ws获取信息
+            fillselects(true).then(() => {
+                console.log("获取信息成功")
+                loadprev(socket)
+                socket.emit("chat login", { hostname: getFromValue() })
+            }).catch((e) => {
+                console.log("获取信息失败", e)
+            })
+        });
+
+        socket.on('disconnect', function () {
+            //log('you have been disconnected');
+            //status.src = "/img/offline.svg"
+            status.classList.remove('online')
+            status.classList.add('offline');
+            if (timer)
+                clearInterval(timer)
+        });
+
+    }
+
+    function initPC() {
+        const configuration = {
+            iceServers: [
+                //stun协议服务器。反馈外网信息
+                { urls: 'stun:stun.l.google.com:19302' },
+                /*
+                {
+                    urls: 'turn:yourturnserver.com:3478',
+                    username: 'yourusername',
+                    credential: 'yourpassword'
+                }*/
+            ]
+        };
+        // 获得外网信息？
+        // 如何重新请求candidate
+        pc = new RTCPeerConnection(configuration);
+        pc.onicecandidate = function (e) {
+            // 与ice通讯的结果，从ice服务器获得的自身外网情况
+            //console.log('onicecandidate', event);
+            //document.getElementById("candidate").value = event.candidate;
+            //socket.emit('chat ice-candidate', { host: hostId, candidate: event.candidate });
+            
+            //cds.push(e.candidate)
+            //document.getElementById('candidate').value = JSON.stringify(cds, null, 2);
+            sendCandidate(e.candidate)
+        };
+        pc.oniceconnectionstatechange = function (e) {
+            const currentState = e.target.iceConnectionState;
+            console.log('ICE 连接状态变化：', currentState);
+
+            // 根据不同状态处理
+            switch (currentState) {
+                case 'new':
+                    // 初始状态：连接尚未开始建立
+                    console.log('ICE 连接已创建，尚未开始连接');
+                    break;
+                case 'checking':
+                    // 正在检查连接：ICE 正在尝试不同的候选地址（如本地地址、STUN 反射地址、TURN 中继地址）
+                    console.log('ICE 正在检查连接候选地址...');
+                    break;
+                case 'connected':
+                    // 部分连接成功：至少有一个 P2P 连接已建立（可能仍在检查其他候选以优化连接）
+                    console.log('ICE 已建立部分连接，通信可正常进行');
+                    break;
+                case 'completed':
+                    // 完全连接成功：所有 ICE 候选检查完成，最佳 P2P 连接已确定
+                    console.log('ICE 连接完全建立，已确定最佳通信路径');
+                    break;
+                case 'failed':
+                    // 连接失败：所有 ICE 候选检查都失败，P2P 连接无法建立（需考虑用 TURN 中继或提示用户）
+                    console.error('ICE 连接失败，无法建立 P2P 通信');
+                    // 可选：触发重试逻辑或提示用户
+                    retryConnection();
+                    break;
+                case 'disconnected':
+                    // 连接断开：之前建立的连接丢失（如网络波动、对方离线）
+                    console.warn('ICE 连接已断开，尝试重连...');
+                    // 可选：尝试重新收集 ICE 候选并重连
+                    //peerConnection.restartIce();
+                    console.error('ICE 连接失败，尝试重启...');
+                    // 重启 ICE 流程（会重新收集候选并尝试连接）
+                    pc.restartIce()
+                        .then(() => console.log('ICE 重启成功，正在重新连接...'))
+                        .catch(err => console.error('ICE 重启失败：', err));
+                    break;
+                case 'closed':
+                    // 连接已关闭：主动调用 peerConnection.close() 后触发
+                    console.log('ICE 连接已主动关闭');
+                    // 可选：释放资源、清理 UI
+                    //cleanupConnection();
+                    break;
+            }
+        };
+
+        pc.ondatachannel = (event) => {
+            const dataChannelB = event.channel; // 这就是 A 端创建的通道
+
+            // 监听 B 端通道事件（接收 A 端消息用）
+            dataChannelB.onopen = () => {
+                console.log('B 端数据通道已打开');
+            };
+
+            dataChannelB.onmessage = (e) => {
+                console.log('B 收到消息:', e.data); // 输出 "Hello from A!"
+            };
+        };
+
+        // bind track
+        pc.ontrack = (event) => {
+            console.log('!!!!!!ontrack ok');
+            getVideo.srcObject = event.streams[0];
+        };
+
+        // 需要发送的媒体绑定到pc
+        // addTrack
+        stream.getTracks().forEach(            
+            function (track) {
+                console.log('addTrack'),
+                pc.addTrack(
+                    track,
+                    stream
+                );
+            }
+        );
+    };
+
+    /*
+    测试发送数据:
+        dataChannel.send("hello")
+    // 配置数据通道
+    */
+    function setupDataChannel(channel) {
+        channel.onopen = () => {
+            //updateStatus('数据通道已打开，可以发送消息和文件');
+            console.log('数据通道已打开，可以发送消息和文件');
+            //sendButton.disabled = false;
+            if (pc.iceConnectionState === 'connected') {
+                //sendFileButton.disabled = false;
+            }
+        };
+
+        channel.onmessage = (event) => {
+            handleIncomingData(event.data);
+        };
+
+        channel.onclose = () => {
+            console.log('数据通道已关闭');
+            //updateStatus('数据通道已关闭');
+            //sendButton.disabled = true;
+            //sendFileButton.disabled = true;
+        };
+
+        channel.onerror = (error) => {
+            console.error('数据通道错误:', error);
+            //updateStatus(`消息发送失败: ${error}`, true);
+        };
+    }
+
+    function addMessage(message) {
+        console.log("addMessage", message)
+    }
+
+    function updateProgress(percent) {
+        console.log("updateProgress", percent)
+    }
+
+    // 处理接收到的数据
+    function handleIncomingData(data) {
+        // 如果是文件元数据
+        if (typeof data === 'string' && data.startsWith('FILE_METADATA:')) {
+            const metadata = JSON.parse(data.replace('FILE_METADATA:', ''));
+            expectedFileSize = metadata.size;
+            receivedSize = 0;
+            receivedChunks = [];
+
+            addMessage(`正在接收文件: ${metadata.name} (${(metadata.size)})`);
+            //showProgress(metadata.name, 0);
+            return;
+        }
+
+        // 如果是文件结束标记
+        if (typeof data === 'string' && data === 'FILE_COMPLETE') {
+            const blob = new Blob(receivedChunks);
+            const fileUrl = URL.createObjectURL(blob);
+            addMessage(currentFileName, false, true, fileUrl);
+
+            // 清理
+            receivedChunks = [];
+            expectedFileSize = 0;
+            receivedSize = 0;
+            //hideProgress();
+            return;
+        }
+
+        // 如果是文件分片
+        if (data instanceof Blob) {
+            data.arrayBuffer().then(buffer => {
+                receivedChunks.push(buffer);
+                receivedSize += buffer.byteLength;
+
+                const percent = Math.round((receivedSize / expectedFileSize) * 100);
+                updateProgress(percent);
+            });
+            return;
+        }
+
+        // 否则是普通文本消息
+        addMessage(`对方: ${data}`, false);
+    }
+
+    /*
+     *
+     */
+    function sendFile() {
+        const fileInput = document.getElementById("fileInput");
+        //dataChannel && dataChannel.readyState === 'open'
+        if (fileInput.files.length == 0)
+            return;
+        currentFile = fileInput.files[0];
+        if (currentFile.size > 100 * 1024 * 1024) { // 限制100MB
+            alert('文件过大，请选择小于100MB的文件');
+            currentFile = null;
+            sendFileButton.disabled = true;
+            return;
+        }
+
+        // 确认channel状态
+        if (!currentFile || !dataChannel || dataChannel.readyState !== 'open') return;
+
+        // 发送文件元数据
+        const metadata = {
+            name: currentFile.name,
+            size: currentFile.size,
+            type: currentFile.type
+        };
+
+        dataChannel.send(`FILE_METADATA:${JSON.stringify(metadata)}`);
+        addMessage(`正在发送文件: ${currentFile.name} (${formatFileSize(currentFile.size)})`, true);
+
+        // 显示进度条
+        //showProgress(currentFile.name, 0);
+
+        // 分片读取并发送文件
+        let offset = 0;
+        fileReader = new FileReader();
+        // 读取文件
+        fileReader.onload = (e) => {
+            if (e.target.readyState === FileReader.DONE) {
+                // 发送分片
+                dataChannel.send(e.target.result);
+
+                // 更新进度
+                offset += e.target.result.byteLength;
+                const percent = Math.round((offset / currentFile.size) * 100);
+                updateProgress(percent);
+
+                // 继续读取下一分片
+                if (offset < currentFile.size) {
+                    readNextChunk();
+                } else {
+                    // 发送完成标记
+                    dataChannel.send('FILE_COMPLETE');
+                    addMessage(`文件发送完成: ${currentFile.name}`, true);
+                }
+            }
+        };
+
+        // 开始读取第一分片
+        readNextChunk();
+
+        function readNextChunk() {
+            const fileSlice = currentFile.slice(offset, offset + CHUNK_SIZE);
+            fileReader.readAsArrayBuffer(fileSlice);
+        }
+    }
+
+    function createOffer() {
+        //cds = []
+        var offerOptions = {
+            offerToReceiveAudio: 1,
+            offerToReceiveVideo: 1
+        };
+        //
+        dataChannel = pc.createDataChannel('chatAndFile', {
+            ordered: true, // 保证数据顺序
+            maxRetransmits: 3 // 最大重传次数
+        });
+        setupDataChannel(dataChannel);
+
+        // 监听远程数据通道
+        pc.ondatachannel = (event) => {
+            dataChannel = event.channel;
+            setupDataChannel(dataChannel);
+        };
+        pc.createOffer(
+            (desc) => {
+                
+                //document.getElementById('offer').value = JSON.stringify(desc, null, 2 );
+                //socket.emit( 'chat offer', { to:getFromValue(), offer: desc } );
+                sendOffer(desc)
+                pc.setLocalDescription(desc, function () {
+                    console.log("!!!!!!setLocalDescription ok");
+                }, (err) => {
+                    console.error("setLocalDescription fail", err);
+                });
+            },
+            (error) => console.log('Failed to create session description: '
+                + error.toString()),
+            offerOptions);
+    }
+
+    function setOffer(desc) {
+        //const desc = document.getElementById('offer').value
+        if (!desc) {
+            alert('Please enter offer')
+            return false;
+        }
+        // 发起pc.onicecandidate前重置
+        cds = []
+        // 会立即触发：pc.onicecandidate
+        pc.setRemoteDescription((desc), () => {
+            // offer description
+            console.log('!!!!!!setRemoteDescription ok');
+            // 已经设置了remote description
+            createAnswer();
+        }, (error) => console.error('Failed to set session description: ' + error.toString()));
+        //console.log(desc)
+        
+        return true;
+    }
+
+    // by socket
+    function sendOffer(desc) {
+        console.log('send offer', "to", getToValue(), desc)
+        socket.emit('chat offer', { from: getFromValue(),
+            to: getToValue(), offer: desc });
+    }
+
+    // pc
+    function createAnswer() {
+        pc.createAnswer((desc) => {
+            //document.getElementById('answer').value = JSON.stringify(desc, null, 2)
+            // answer with client description
+            pc.setLocalDescription(desc, function () {
+                console.log('!!!!!!setLocalDescription ok');
+            }, (error) => console.log('Failed to set session description: ' + error.toString())
+            );
+            // 特定类型的消息
+            //socket.emit('chat answer', desc);
+            sendAnswer(desc);
+        },
+            (error) => console.log('Failed to create session description: ' + error.toString()));
+    }
+
+    // by socket
+    function sendAnswer(desc) {
+        console.log('send answer', "to", getToValue(), desc)
+        socket.emit('chat answer', { from: getFromValue(),
+            to: getToValue(), answer: desc });
+    }
+
+    function setAnswer(desc) {
+        //const desc = document.getElementById('answer').value
+        if (!desc) {
+            //alert('Please enter answer')
+            return false;
+        }
+        //pc.remoteDescription
+        pc.setRemoteDescription((desc), function () {
+            console.log('!!!!!!setRemoteDescription ok');
+        }, (error) => console.log('Failed to set session description: ' + error.toString()));
+    }
+
+    function sendCandidate(candidate) {
+        console.log('send icecandidate', "to", getToValue(), candidate)
+        socket.emit('chat ice-candidate', { from: getFromValue(),
+            to: getToValue(), candidate: candidate });
+    }
+
+    function setCandidate(candidate) {
+        //const desc = document.getElementById('candidate').value
+        if ( typeof candidate!=="object" ) {
+            //alert('Please enter candidate')
+            return false;
+        }
+        //console.log( candidate )
+        //pc.remoteDescription
+        if ( candidate ){
+            pc.addIceCandidate((candidate), function () {
+                console.log('!!!!!!addIceCandidate ok');
+            }, (error) => console.log('Failed to add Ice Candidate: ' + error.toString()));
+        }
+    }
+
+    function initVideo() {
+        //srcVideo = document.getElementById('srcVideo');
+        // get stream
+        if (sendVideo.captureStream) {
+            // 从video里获取流？媒体流
+            stream = sendVideo.captureStream();
+            console.log('Captured stream from srcVideo with captureStream',
+                stream);
+            //call();
+        } else if (sendVideo.mozCaptureStream) {
+            stream = sendVideo.mozCaptureStream();
+            console.log('Captured stream from srcVideo with mozCaptureStream()',
+                stream);
+            //call();
+        } else {
+            console.error('captureStream() not supported');
+        }
+        var videoTracks = stream.getVideoTracks();
+        var audioTracks = stream.getAudioTracks();
+        if (videoTracks.length > 0) {
+            console.log('Using video device: ' + videoTracks[0].label);
+        }
+        if (audioTracks.length > 0) {
+            console.log('Using audio device: ' + audioTracks[0].label);
+        }
+    }
+
+    function sendMessage(str) {
+        const value = encryptWithKeyword(str, getEncKey())
+        const msg = {
+            command: "set",
+            from: from.value,
+            to: to.value,
+            content: value
+        }
+        socket.emit('chat message', msg);
+    }
+
+    function nextQuery(milli) {        
+        // 如果是sendMessage立即收到的chat message;
+        if (milli) {
+            console.log("取消定时器", timer)
+            clearTimeout(timer)
+        }
+        const interval = milli || getInterval() || 15000
+        console.log("nextQuery", interval )
+        timer = setTimeout(loadprev, interval, socket)
+    }
+
+    form.addEventListener('submit', function (e) {
+        e.preventDefault();
+        if (prepost_chat() && input.value) {
+            sendMessage(input.value);
+            input.value = '';
+        } else {
+            alert("请输入内容|请选择接收方")
+        }
+    });
+
+    //checkScrollPosition()
+
+    // 监听滚动事件
+    messages.addEventListener('wheel', function (event) {
+        // 判断滚动方向
+        const isScrollingDown = event.deltaY > 0;
+        //scrollDirection.textContent = isScrollingDown ? '向下滚动' : '向上滚动';
+        //scrollDirection.className = `font-medium ${isScrollingDown ? 'text-green-600' : 'text-red-600'}`;
+
+        // 检查是否滚动到顶部或底部（使用setTimeout确保在滚动完成后检测）
+        setTimeout(checkScrollPosition, 10);
+    });
+
+    // 也监听scroll事件，确保在所有滚动方式下都能检测（如拖动滚动条）
+    messages.addEventListener('scroll', function () {
+        checkScrollPosition();
+    });
+
+    function buildItem(row) {
+        row.message = decryptWithKeyword(row.content, getEncKey())
+        return `<div class="item" id="${row.id}">
+            <div class="row">
+                <div class="time">${row.created}</div>
+                <div class="from">${row.from}</div>
+            </div>
+            <div class="message">${row.message}</div>
+        </div>`
+    }
+
+    function loadprev() {
+        if (from.value !== "unknow") {
+            const msg = {
+                command: "get",
+                queryConstraint: JSON.stringify({
+                    startIdx: 0,
+                    count: 10,
+                    id: {
+                        lt: firstId
+                    },
+                    from: from.value,
+                    sql: `select * from mylife.chat where id > ${firstId} and (\`from\` = '${from.value}' or \`to\` = '${from.value}') limit 0, 10;`
+                })
+            }
+            socket.emit('chat message', msg);
+        }
+    }
+
+    // 检查滚动位置的函数
+    // "messages.scrollTop为什么总是0"
+    function checkScrollPosition() {
+
+        // 清除之前的状态类
+        messages.classList.remove('scrolled-top', 'scrolled-bottom');
+
+        // 滚动元素的属性
+        const scrollTop = messages.scrollTop; // 已滚动的顶部距离
+        const scrollHeight = messages.scrollHeight; // 内容总高度
+        const clientHeight = messages.clientHeight; // 可见区域高度
+        const isAtTop = scrollTop <= 1; // 允许1px误差
+        const isAtBottom = (scrollTop + clientHeight) >= (scrollHeight - 1); // 允许1px误差
+
+        // 更新状态显示
+
+        if (isAtTop && isAtBottom) {
+            console.log("内容不足以滚动的情况")
+            //scrollStatus.textContent = '内容未超出可视区域';
+            //scrollStatus.className = 'font-medium text-purple-600';
+            //hideEdgeIndicator();
+        } else if (isAtTop) {
+            console.log('已滚动到顶部');
+            //scrollStatus.className = 'font-medium text-blue-600';
+            //messages.classList.add('scrolled-top');
+            //showEdgeIndicator('已滚动到顶部', 'blue-100', 'blue-600');
+            // 避免触及载入
+            //loadprev();
+        } else if (isAtBottom) {
+            console.log('已滚动到底部');
+            //scrollStatus.className = 'font-medium text-green-600';
+            //messages.classList.add('scrolled-bottom');
+            //showEdgeIndicator('已滚动到底部', 'green-100', 'green-600');
+        } else {
+            console.log('正常位置');
+            //scrollStatus.className = 'font-medium text-gray-800';
+            //hideEdgeIndicator();
+        }
+    }
+
+    function closeChannel(){
+        if( socket )
+            socket.disconnect();
+    }
+
+</script>