模拟命令行的界面效果,使用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...>