来访人员登记系统（二）网页客户端的实现和websocket通信
HTML
html主要写了一个表单提交的页面，用表格包含起来方便调整样式，时间部分用正则表达式限定输入内容必须为hh:mm的格式。
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>XXXX股份有限公司主机房人员出入申请单</title>
<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<br />
<h1>XXXX股份有限公司</h1>
<h1>主机房人员出入申请单</h1>
<div>
<form id="sendForm">
<table>
<tr>
<td colspan="4"><input id="staff" class="text" type="text" placeholder="陪同人员" required /></td>
</tr>
<tr>
<td colspan="4"><input id="name" class="text" type="text" placeholder="外单位人员" required /></td>
</tr>
<tr>
<td colspan="4"><input id="company" class="text" type="text" placeholder="单位名称" required /></td>
</tr>
<tr>
<td colspan="4"><input id="idcard" class="text" type="text" placeholder="身份证号" required /></td>
</tr>
<tr>
<td colspan="4"><input id="phone" class="text" type="text" placeholder="电话" required /></td>
</tr>
<tr>
<td colspan="4"><span>预约日期：</span><input id="date" class="date" type="date" required /></td>
</tr>
<tr>
<td colspan="4"><input id="ETA" class="text" type="text" placeholder="预期到达时间(hh:mm)" required pattern="^(?:(?:[0-2][0-3])|(?:[0-1][0-9])):[0-5][0-9]$"/></td>
</tr>
<tr>
<td colspan="4"><textarea id="intention" placeholder="进出事由" required></textarea></td>
</tr>
<tr>
<td colspan="4"><textarea id="relevants" placeholder="涉及设备/系统" required></textarea></td>
</tr>
</table>
<br />
<div>
<input class="button" type="submit" value="提交" />    
<input class="button" type="reset" value="重置" />
</div>
</form>
</div>
<br /><br />
</body>
</html>
CSS
body {
font-family: 'Microsoft YaHei';
text-align: center;
}
table {
margin: 0 auto;
margin-top: 3%;
text-align: center;
font-size: 18px;
width: 100%;
}
td {
padding: 20px 0px 20px 0px;
}
input {
font-size: 18px;
font-family: 'Microsoft YaHei';
}
input.text {
width: 300px;
height: 40px;
}
input.date {
width: 210px;
height: 35px;
}
input.button {
width: 80px;
height: 40px;
}
textarea {
font-size: 18px;
font-family: 'Microsoft YaHei';
width: 300px;
height: 100px;
resize: none;
}
JavaScript
创建websocket对象并覆写了提交按钮的方法，用户点击提交之后会通过send()方法把数据直接发送到指定ip地址的服务器上。
var start = function () {
var wsImpl = window.WebSocket || window.MozWebSocket;
window.ws = new wsImpl('ws://192.168.204.43:7181/'); // 服务器ip地址:端口号
var form = document.getElementById('sendForm');
var staff = document.getElementById('staff');
var name = document.getElementById('name');
var company = document.getElementById('company');
var idcard = document.getElementById('idcard');
var phone = document.getElementById('phone');
var date = document.getElementById('date');
var ETA = document.getElementById('ETA');
var intention = document.getElementById('intention');
var relevants = document.getElementById('relevants');
ws.onmessage = function (evt) {
// 收到消息后的操作
};
ws.onopen = function () {
// 建立连接时的操作
};
ws.onclose = function () {
// 关闭连接时的操作
}
form.addEventListener('submit', function (e) {
e.preventDefault(); // 覆写submit的默认方法
var msg = staff.value + ',' + name.value + ',' + company.value + ',' + idcard.value + ',' + phone.value + ',' + date.value + ',' + ETA.value + ',' + intention.value + ',' + relevants.value;
ws.send(msg);
alert("Your application has been submitted.");
form.reset();
});
};
window.onload = start;
服务端（C# winform）
服务端采用的是C# winform桌面应用程序，在其中的主类中添加一个自定义的StartServer()方法接收客户端信息，并在窗体加载时调用此方法开启监听。
Fleck包可以通过项目->管理NuGet程序包->搜索Fleck并下载得到，之后引用即可使用其中的方法。
在OnMessage方法中定义收到数据后的操作，此例中收到数据后将其传递给addfromClient方法，再由addfromClient方法添加到数据库中。
using Fleck;
private void StartServer()
{
FleckLog.Level = LogLevel.Debug;
var server = new WebSocketServer("ws://0.0.0.0:7181"); // 监听所有ip地址的7181端口
server.Start(socket =>
{
socket.OnOpen = () => { };
socket.OnClose = () => { };
// 收到信息后自动添加到数据库
socket.OnMessage = message =>
{
addfromClient(message);
};
});
}
总结
winform服务端在使用websocket时，需要把服务开启方法写在窗体类中，在初始化时调用服务开启方法实现对通信窗口的监听；
html中要使表单方便排列，可以通过表格嵌套表单的形式，但具体书写时应把form标签写在table标签外。
浙公网安备 33010602011771号