溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“HTML怎么實現websocket的模擬日志監控界面”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
模擬命令行的界面效果，使用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>“HTML怎么實現websocket的模擬日志監控界面”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
