[HTML] websocket的模拟日志监控界面

前端之家收集整理的这篇文章主要介绍了[HTML] websocket的模拟日志监控界面前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

模拟命令行的界面效果,使用swoole作为websocket的服务,重新做了下html的界面效果

 

 

<html>
head>
    title>SwLog Montior-菜地</style>
@charset "utf-8"; 
body { 
    background-color:#000; 
    margin0px 
    padding 
    colorrgb(0,198,83) 
    font"微软雅黑" 
    font-size14px;
} 
.window  
    border2px #ccc outset 
    width1200px 
    height450pxrgb(20,23,41) 10px auto
    overflowhidden 
.title #fff2px
    color #000 
#text  
    border-top#ccc outset 2px420px 
    overflow-yscroll
    padding5px 
ul  
    list-stylenone 
    input 0 
    outline; 
    /*font-size:12px;*/100%} 
script src="reconnecting-websocket.min.js"></script="http://code.jquery.com/jquery-1.10.2.min.js"> 
 
$(document).ready(function(){

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

     sock new ReconnectingWebSocket(wsuri);
    sock.debug true;
    sock.timeoutInterval 5400;
    //建立连接后触发
    sock.onopen () {
    console.log( 建立连接后触发 connected to " + wsuri);
    $(ul).append(<li>connected to wsuri success</li>);
    }
     关闭连接时候触发
    sock.onclose (e) {
    console.log(关闭连接时候触发 connection closed ( e.code + ));
    $(<li>disconnected to ...</li> 收到消息后触发
    sock.onmessage (e) {
        console.log(收到消息后触发 message received:  e.data);
        $(<li>e.data</li>);
         scrollHeight = $('#text).prop(scrollHeight);
        $().scrollTop(scrollHeight,420发生错误的时候触发
    sock.onerror (e) {
        console.log(发生错误时候触发wsuri);
        $( Failed</li>);
    }

    $(document).keyup((event){ 
        if(event.keyCode ==13){ 
            $(<li>.</li>);
            );
            $();
        }
    }); 

}); 
bodydiv class="window"> 
    ="title"> 
        span>SwLog Montiordivid="text"ulli>Welcome...> 

 

猜你在找的HTML相关文章