211 lines
4.7 KiB
HTML
211 lines
4.7 KiB
HTML
<!doctype html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>简易WebSocket消息推送系统</title>
|
||
|
||
<style>
|
||
*{
|
||
box-sizing: border-box;
|
||
-webkit-box-sizing: border-box;
|
||
-moz-box-sizing: border-box;
|
||
}
|
||
body{
|
||
font-family: Helvetica;
|
||
-webkit-font-smoothing: antialiased;
|
||
background: rgba( 71, 147, 227, 1);
|
||
}
|
||
h2{
|
||
text-align: center;
|
||
font-size: 18px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 1px;
|
||
color: white;
|
||
padding: 30px 0;
|
||
}
|
||
|
||
/* Table Styles */
|
||
|
||
.table-wrapper{
|
||
margin: 10px 70px 70px;
|
||
box-shadow: 0px 35px 50px rgba( 0, 0, 0, 0.2 );
|
||
}
|
||
|
||
.fl-table {
|
||
border-radius: 5px;
|
||
font-size: 12px;
|
||
font-weight: normal;
|
||
border: none;
|
||
border-collapse: collapse;
|
||
width: 100%;
|
||
max-width: 100%;
|
||
white-space: nowrap;
|
||
background-color: white;
|
||
}
|
||
|
||
.fl-table td, .fl-table th {
|
||
text-align: center;
|
||
padding: 8px;
|
||
}
|
||
|
||
.fl-table td {
|
||
border-right: 1px solid #f8f8f8;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.fl-table thead th {
|
||
color: #ffffff;
|
||
background: #4FC3A1;
|
||
}
|
||
|
||
|
||
.fl-table thead th:nth-child(odd) {
|
||
color: #ffffff;
|
||
background: #324960;
|
||
}
|
||
|
||
.fl-table tr:nth-child(even) {
|
||
background: #F8F8F8;
|
||
}
|
||
|
||
/* Responsive */
|
||
|
||
@media (max-width: 767px) {
|
||
.fl-table {
|
||
display: block;
|
||
width: 100%;
|
||
}
|
||
.table-wrapper:before{
|
||
content: "Scroll horizontally >";
|
||
display: block;
|
||
text-align: right;
|
||
font-size: 11px;
|
||
color: white;
|
||
padding: 0 0 10px;
|
||
}
|
||
.fl-table thead, .fl-table tbody, .fl-table thead th {
|
||
display: block;
|
||
}
|
||
.fl-table thead th:last-child{
|
||
border-bottom: none;
|
||
}
|
||
.fl-table thead {
|
||
float: left;
|
||
}
|
||
.fl-table tbody {
|
||
width: auto;
|
||
position: relative;
|
||
overflow-x: auto;
|
||
}
|
||
.fl-table td, .fl-table th {
|
||
padding: 20px .625em .625em .625em;
|
||
height: 60px;
|
||
vertical-align: middle;
|
||
box-sizing: border-box;
|
||
overflow-x: hidden;
|
||
overflow-y: auto;
|
||
width: 120px;
|
||
font-size: 13px;
|
||
text-overflow: ellipsis;
|
||
}
|
||
.fl-table thead th {
|
||
text-align: left;
|
||
border-bottom: 1px solid #f7f7f9;
|
||
}
|
||
.fl-table tbody tr {
|
||
display: table-cell;
|
||
}
|
||
.fl-table tbody tr:nth-child(odd) {
|
||
background: none;
|
||
}
|
||
.fl-table tr:nth-child(even) {
|
||
background: transparent;
|
||
}
|
||
.fl-table tr td:nth-child(odd) {
|
||
background: #F8F8F8;
|
||
border-right: 1px solid #E6E4E4;
|
||
}
|
||
.fl-table tr td:nth-child(even) {
|
||
border-right: 1px solid #E6E4E4;
|
||
}
|
||
.fl-table tbody td {
|
||
display: block;
|
||
text-align: center;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<h2>简易WebSocket消息推送系统</h2>
|
||
<div class="table-wrapper">
|
||
<table class="fl-table">
|
||
<thead>
|
||
<tr>
|
||
<th>时间</th>
|
||
<th>姓名</th>
|
||
<th>学工号</th>
|
||
<th>地点</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="data">
|
||
<tbody>
|
||
</table>
|
||
</div>
|
||
|
||
</body>
|
||
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
|
||
<script type="text/javascript">
|
||
if ("WebSocket" in window) {
|
||
console.log("您的浏览器支持 WebSocket!");
|
||
var num = 0;
|
||
|
||
// 打开一个WebSocket
|
||
var ws = new WebSocket("ws://10.69.249.148:9502");
|
||
|
||
ws.onopen = function () {
|
||
// WebSocket 已连接上，使用 send() 方法发送数据
|
||
// alert("数据发送中...");
|
||
// ws.send("发送数据");
|
||
};
|
||
|
||
// 每隔30秒钟发送一次心跳，避免WebSocket连接因超时而自动断开
|
||
window.setInterval(function () {
|
||
var ping = {"type": "ping"};
|
||
ws.send(JSON.stringify(ping));
|
||
}, 30000);
|
||
|
||
ws.onmessage = function (ret) {
|
||
console.log(ret.data);
|
||
var d = JSON.parse(ret.data);
|
||
if (d.code === 200) {
|
||
var data = d.data;
|
||
num++;
|
||
var str = `<tr>
|
||
<td>${data.recordOutTime}</td>
|
||
<td>${data.userOutName}</td>
|
||
<td>${data.userOutNum}</td>
|
||
<td>${data.doorOutName}</td>
|
||
</tr>`;
|
||
$("#data").prepend(str);
|
||
if (num > 6) {
|
||
num--;
|
||
$("#data tr:last").remove();
|
||
}
|
||
}
|
||
};
|
||
|
||
ws.onerror = function (e) {
|
||
console.log(e);
|
||
alert(e);
|
||
};
|
||
|
||
ws.onclose = function () {
|
||
// 关闭WebSocket
|
||
alert("连接已关闭...");
|
||
}
|
||
} else {
|
||
alert("您的浏览器不支持 WebSocket!");
|
||
}
|
||
</script>
|
||
</html> |