您好，登录后才能下订单哦！
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
本篇内容介绍了“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进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。