[HTML] websocket的模擬日誌監控界面

-Advertisement-

模擬命令行的界面效果，使用swoole作為websocket的服務，重新做了下html的界面效果 ...

模擬命令行的界面效果，使用swoole作為websocket的服務，重新做了下html的界面效果

<html>
<head>
    <title>SwLog Montior-菜地</title>
</head>
<style>
@charset "utf-8"; 
body { 
    background-color:#000; 
    margin:0px; 
    padding:0px; 
    color:rgb(0,198,83); 
    font:"微軟雅黑"; 
    font-size:14px;
} 
.window { 
    border:2px #ccc outset; 
    width:1200px; 
    height:450px; 
    background-color:rgb(20,23,41); 
    margin: 10px auto;
    overflow:hidden;
} 
.title { 
    background-color:#fff; 
    padding:2px;
    color: #000;
} 
#text { 
    background-color:rgb(20,23,41); 
    border-top:#ccc outset 2px; 
    height:420px; 
    overflow-y:scroll;
    padding:5px;
} 
ul { 
    margin:0px; 
    padding:0px; 
    list-style:none;} 
    input { 
    background-color:#000; 
    border:0; 
    color:#fff; 
    outline:none; 
    /*font-size:12px;*/ 
    width:100%;
} 
</style>
<script src="reconnecting-websocket.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"> 
</script> 
<script> 
$(document).ready(function(){

    var wsuri = "ws://192.168.1.102:9501";

    var sock = new ReconnectingWebSocket(wsuri);
    sock.debug = true;
    sock.timeoutInterval = 5400;
    //建立連接後觸發
    sock.onopen = function() {
    console.log(" 建立連接後觸發 connected to " + wsuri);
    $("ul").append("<li>connected to "+wsuri+" success</li>");
    }
    // 關閉連接時候觸發
    sock.onclose = function(e) {
    console.log("關閉連接時候觸發 connection closed (" + e.code + ")");
    $("ul").append("<li>disconnected to "+wsuri+"...</li>");
    }
    // 收到消息後觸發
    sock.onmessage = function(e) {
        console.log("收到消息後觸發 message received: " + e.data);
        $("ul").append("<li>"+e.data+"</li>");
        var scrollHeight = $('#text').prop("scrollHeight");
        $('#text').scrollTop(scrollHeight,420);
    }
    //發生錯誤的時候觸發
    sock.onerror=function (e) {
        console.log("發生錯誤時候觸發"+wsuri);
        $("ul").append("<li>connected to "+wsuri+" failed</li>");
        var scrollHeight = $('#text').prop("scrollHeight");
        $('#text').scrollTop(scrollHeight,420);
    }

    $(document).keyup(function(event){ 
        if(event.keyCode ==13){ 
            $("ul").append("<li>.</li>");
            var scrollHeight = $('#text').prop("scrollHeight");
            $('#text').scrollTop(scrollHeight,420);
        }
    }); 

}); 
</script> 
</head> 
<body> 
<div class="window"> 
    <div class="title"> 
        <span>SwLog Montior</span> 
    </div> 
    <div id="text"> 
        <ul> 
        <li>Welcome...</li> 
        </ul> 
    </div> 
</div> 
</body> 
</html>

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

Android中ProgressBar的使用-通過Handler與Message實現進度條顯示

場景進度條效果註：博客： https://blog.csdn.net/badao_liumang_qizhi 關註公眾號霸道的程式猿獲取編程相關電子書、教程推送與免費下載。實現將佈局改為相對佈局，然後添加一個ProgressBar，並添加id屬性。然後通過 android:max=" ...
android編譯/反編譯常用工具及項目依賴關係

項目依賴關係 apktool：依賴smali/baksmali，XML部分 AXMLPrinter2 JEB：dx 工具依賴 AOSP , 反編譯dex 依賴 apktool dex2jar：依賴 AOSP smali/baksmali（AOSP），但是修改並擴充了一些原先項目中不支持的格式（sup ...
Android中Chronometer計時器的簡單使用

場景實現效果如下註：博客： https://blog.csdn.net/badao_liumang_qizhi 關註公眾號霸道的程式猿獲取編程相關電子書、教程推送與免費下載。實現將佈局改為相對佈局，然後添加一個Chronometer，並添加id屬性。 <?xml version="1. ...
Android中TimePicker時間選擇器的使用和獲取選擇的時和分

場景實現效果如下註：博客： https://blog.csdn.net/badao_liumang_qizhi 關註公眾號霸道的程式猿獲取編程相關電子書、教程推送與免費下載。實現將佈局改為相對佈局，然後添加一個TimePicker，並添加id屬性。 <?xml version="1.0 ...
Android中DatePicker日期選擇器的使用和獲取選擇的年月日

場景實現效果如下註：博客： https://blog.csdn.net/badao_liumang_qizhi 關註公眾號霸道的程式猿獲取編程相關電子書、教程推送與免費下載。實現將佈局改為相對佈局，然後添加一個DataPicker，並添加id屬性。 <?xml version="1.0 ...
Android佈局管理器-使用TableLayout表格佈局管理器實現簡單的用戶登錄頁面

場景 Android佈局管理器-使用FrameLayout幀佈局管理器顯示層疊的正方形以及前景照片： https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/103839149 實現效果如下註：博客： https://blog.csdn ...
ES6函數的擴展

以下內容摘自--ES6標準入門（阮一峰）,純粹為了記憶。函數參數的預設值 1、基本用法在ES6之前，不能直接為函數的參數指定預設值，只能採用變通的方法。如果用戶給參數y賦值false,這時候是不起作用的。並且以上第三個y參數期望輸出空串，但是也變為了World.為了避免這種情況我們可以變為以下 ...
ES6擴展

模板字元串和標簽模板 const getCourseList = function() { // ajax return { status: true, msg: '獲取成功', data: [{ id: 1, title: 'Vue 入門', date: 'xxxx-01-09' }, { id: ...