提交了websocket的网页

527ed35c · hjdhnx · 9a9b525c · 527ed35c · 527ed35c · 527ed35c
5 changed file
--- a/controllers/admin.py
+++ b/controllers/admin.py
@@ -323,4 +323,10 @@ def login_api():
        response.set_cookie('token', token)
        return response
    else:
-        return R.failed('登录失败,用户名或密码错误')
\ No newline at end of file
+        return R.failed('登录失败,用户名或密码错误')
+
+@admin.route('/logtail')
+def admin_logtail():
+    if not verfy_token():
+        return R.failed('请登录后再试')
+    return render_template('logtail.html')
\ No newline at end of file
--- a/static/css/jquery-confirm.min.css
+++ b/static/css/jquery-confirm.min.css
--- a/static/js/jquery-confirm.min.js
+++ b/static/js/jquery-confirm.min.js
--- a/templates/admin.html
+++ b/templates/admin.html
@@ -180,6 +180,10 @@
               });
        });

+        $("#logtail").click(function(){
+            location.href = '/admin/logtail';
+        });
+
 });
 function getFileSize(fileObj) {
   $('#file_size').text('文件大小为:'+fileObj.files[0].size/1024+'kb');
@@ -206,6 +210,8 @@ function getFileSize(fileObj) {
            id="update_lives">同步直播源</a></button>
    <button type="button" class="yongyin3"><a href="javascript:void(0);" class="funcbtn"
            id="use_py">已{% if pystate=='1' %}启用{% else %}关闭{% endif %}py源</a></button>
+    <button type="button" class="yongyin"><a href="javascript:void(0);" class="funcbtn"
+            id="logtail">在线日志</a></button>

    <input id="live_url" value="{{live_url}}" style="display: none">
    <p class="box">你可以在此界面在线管理JS目录里规则文件的上传/删除</p>

--- a/templates/logtail.html
+++ b/templates/logtail.html
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
+    <meta http-equiv="Cache-Control" content="no-siteapp;no-transform">
+    <meta name="applicable-device" content="pc,mobile">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
+    <title>tvbox实时日志</title>
+    <script src="/static/js/jquery.min.js"></script>
+    <link href="/static/css/jquery-confirm.min.css" rel="stylesheet">
+    <script src="/static/js/jquery-confirm.min.js"></script>
+<!--    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>-->
+<!--    <link href="https://cdn.bootcdn.net/ajax/libs/jquery-confirm/3.3.4/jquery-confirm.min.css" rel="stylesheet">-->
+<!--    <script src="https://cdn.bootcdn.net/ajax/libs/jquery-confirm/3.3.4/jquery-confirm.min.js"></script>-->
+    <style>
+        .support{
+            background: #5dc2f1;
+            color: #FFFFFF;
+            text-align: center;
+        }
+        #title{
+            background: #000000;
+            color: #5dc2f1;
+        }
+        #height{
+            margin-left: 10px;
+        }
+        #msg{
+            /*white-space: pre;*/
+            text-align: left;
+            /*word-wrap: break-word;*/
+            /*word-break: normal;*/
+        }
+        #log-container{
+            overflow-y: scroll;
+            background: #333;
+            color: #aaa;
+            /*上右下左*/
+            padding:1px 2px 10px 2px;
+        }
+        #clearLog{
+            background: #f06e57;
+            color: #FFFFFF;
+        }
+    </style>
+</head>
+<body>
+    <div class="support"></div>
+    <div id="title">
+        <strong>tvbox实时日志 by道长</strong>
+        <span id="height"></span>
+        <button id="clearLog">清空日志</button>
+    </div>
+    <div id="log-container">
+		<div id="msg">
+		</div>
+	</div>
+    <div class="support"></div>
+
+    <script>
+        Date.prototype.Format = function (fmt) { // author: meizz
+            var o = {
+                "M+": this.getMonth() + 1, // 月份
+                "d+": this.getDate(), // 日
+                "h+": this.getHours(), // 小时
+                "m+": this.getMinutes(), // 分
+                "s+": this.getSeconds(), // 秒
+                "q+": Math.floor((this.getMonth() + 3) / 3), // 季度
+                "S": this.getMilliseconds() // 毫秒
+            };
+            if (/(y+)/.test(fmt))
+                fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
+            for (var k in o)
+                if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
+                    return fmt;
+        }
+        function getWsUrl() {
+            let host = location.host;
+            let protocol = 'ws:';
+            // let port = location.port;
+            let pathname = '/ws';
+            return protocol+'//'+host+pathname;
+        }
+        // const websocketUrl = 'ws://localhost:8080/log';
+        const websocketUrl = getWsUrl();
+        const test_msg = true;
+        const test_count = 10;
+        const reconnect_time = 5000;
+        var lockReconnect = false;//避免重复连接
+        var ws = null; //WebSocket的引用
+
+        function initHeight(){//动态刷新日志框高度自适应设备
+            var div_height = window.screen.availHeight;
+	        var height = Math.ceil(div_height*0.75);
+	        $('#height').text('日志窗口高度:'+height);
+	        $("#log-container").height(height);
+        }
+        initHeight();
+        window.onresize = () =>{
+　　      //只要窗口高度发生变化，就会进入这里面，在这里就可以写，回到聊天最底部的逻辑
+            initHeight();
+        }
+        function checkLoading(){// loading用,无实际意义
+            $.confirm({
+                closeIcon: true,
+                title: '请稍等',
+                content: '正在检查websocket连接...',
+                autoClose: 'ok|2000',
+                buttons: {
+                    ok: {
+                        text: '确定',
+                        action: function () {
+                            console.log('检查完毕,一切正常');
+                        }
+                    },
+                    cancel: {
+                        text: '取消',
+                        action(){
+                            // $.alert('已取消');
+                        }
+                    }
+                }
+            });
+        }
+        function checkSupport() {//检查浏览器是否支持websocket
+            var sp = $(".support");
+             if (window.WebSocket) {
+             sp.html('您的浏览器支持多个websocket通信的实例');
+             return true;
+             }
+             else {
+             sp.html('您的浏览器不支持多个websocket通信的实例,建议使用火狐浏览器或者谷歌浏览器');
+             return false;
+             }
+        }
+
+        function createWebSocket(){//创建ws连接并监听ws事件
+		    let can_ws = checkSupport();
+            // console.log('can_ws:',can_ws);
+            if(can_ws){
+                // 指定websocket路径
+                try {
+                    console.log('开始连接:'+websocketUrl);
+                    ws = new WebSocket(websocketUrl);
+                    initEventHandle();
+                }catch (e) {
+                    reconnect();
+                }
+            }
+	    }
+
+        /**
+         * 自动重连
+         */
+        function reconnect() {
+        if(!lockReconnect){
+            lockReconnect = true;
+            //没连接上会一直重连，设置延迟避免请求过多
+            setTimeout(function () {
+                createWebSocket(websocketUrl);
+                addMsg("正在重连，当前时间"+new Date().Format("yyyy-MM-dd hh:mm:ss"));
+                lockReconnect = false;
+            }, reconnect_time); //这里设置重连间隔(ms)
+        }
+        }
+        function initEventHandle(){
+            ws.onopen = function(event) {
+                addMsg("websocket连接成功，当前时间"+new Date().Format("yyyy-MM-dd hh:mm:ss"));
+            }
+            ws.onmessage = function(event) {
+                // 接收服务端的实时日志并添加到HTML页面中
+                let msg = event.data;
+                addMsg(msg);
+            };
+            ws.onclose = function(event) {
+                addMsg('websocket连接关闭');
+                reconnect();
+            };
+            ws.onerror = function(event){
+            //如果出现连接、处理、接收、发送数据失败的时候触发onerror事件
+            //     let msg = "websocket发生错误:"+event.data;
+                let msg = "websocket发生错误,连接状态码:"+ws.readyState;
+                // console.log(event);
+                console.log(msg);
+                addMsg(msg);
+                reconnect();
+            }
+        }
+        createWebSocket();
+        function addMsg(msg){
+            // 将Msg添加到日志框里
+            if(msg&&msg.trim()&&!msg.endsWith('\n')){
+                msg+='\n';
+            }
+            msg = msg.replaceAll('\n','</br>');
+            $("#log-container div").append(msg);
+            // 滚动条滚动到最低部
+            $("#log-container").scrollTop($("#log-container div").height() - $("#log-container").height());
+        }
+        $(document).ready(function() {
+            checkLoading();
+            addMsg('websocket初始化中,当前ws服务地址=>  '+websocketUrl);
+            if(test_msg){
+            for(let i=0;i<test_count;i++){
+                addMsg('2022-11-15 10:12:50 - E:\\python\\mypython\\dr_py\\lib\\site-packages\\gevent\\pywsgi.py[line:1226]:INFO:dr.log -- 127.0.0.1 - - [2022-11-15 10:12:50] "GET /static/img/favicon.svg HTTP/1.1" 200 155239 0.001139\n');
+            }
+            }
+
+            $('#clearLog').click(function () {
+                $.confirm({
+                    title: '确认',
+                    content: '确认清空日志?',
+                    type: 'green',
+                    icon: 'glyphicon glyphicon-question-sign',
+                    buttons: {
+                        ok: {
+                            text: '确认',
+                            btnClass: 'btn-primary',
+                            action: function() {
+                                $("#log-container div").text('');
+                            }
+                        },
+                        cancel: {
+                            text: '取消',
+                            btnClass: 'btn-primary'
+                        }
+                    }
+                });
+            });
+        });
+</script>
+</body>
+</html>
\ No newline at end of file