|
|
<!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> |