<!DOCTYPE html>
|
<html xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
|
<link>
|
<meta charset="UTF-8"/>
|
<title>客户端</title>
|
<link rel="stylesheet" th:href="@{../layui/css/layui.css}" media="all" />
|
<link rel="stylesheet" th:href="@{../layui/css/layui.mobile.css}" media="all" />
|
<script th:src="@{../jquery.min.js}"></script>
|
<script th:src="@{../layui/layui.all.js}"></script>
|
<script th:src="@{../layui/layui.js}"></script>
|
|
<style>
|
.threed{
|
text-align: center;
|
color: mediumorchid;
|
-webkit-text-stroke: 1px black;
|
letter-spacing: 0.04em;
|
background-color: white;
|
}
|
</style>
|
|
</head>
|
<body>
|
<div class="layui-row">
|
<h1 class="threed">WebSocket客户端</h1>
|
<div class="layui-col-md8 layui-col-md-offset2" style="margin-top: 20px">
|
<h1>客户端</h1>
|
<div class="layui-card">
|
<div class="layui-card-body">
|
|
<div class="layui-form-item">
|
<label class="layui-form-label">请输入昵称</label>
|
<div class="layui-input-inline" style="width: 300px">
|
<input id="username" type="text" name="title" required lay-verify="required" placeholder="请输入昵称" autocomplete="off" class="layui-input">
|
</div>
|
<button class="layui-btn" onclick="connect()">连接</button>
|
</div>
|
<div class="layui-form-item">
|
<label class="layui-form-label">请发送内容</label>
|
<div class="layui-input-inline" style="width: 300px">
|
<input id="writeMsg" type="text" name="title" required lay-verify="required" placeholder="请输入要发送的内容" autocomplete="off" class="layui-input">
|
</div>
|
<button class="layui-btn" onclick="sendMsg()">发送</button>
|
</div>
|
|
</div>
|
</div>
|
|
<div class="layui-card" style="margin-top: 100px">
|
<div class="layui-card-header">
|
<h1>操作详情</h1>
|
</div>
|
|
<div id="content" class="layui-card-body">
|
<h3 align="center" style="color: #007DDB;margin-top: 20px;margin-bottom: 20px">这里将显示操作信息</h3>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<script type="text/javascript">
|
var ws = null;
|
var username = $("#username").val();
|
function uuid() {
|
var s = [];
|
var hexDigits = "0123456789abcdef";
|
for (var i = 0; i < 36; i++) {
|
s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
|
}
|
s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
|
s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
|
s[8] = s[13] = s[18] = s[23] = "-";
|
|
var uuid = s.join("");
|
return uuid;
|
}
|
username="111";
|
connect();
|
function connect(){
|
if(username!=null){
|
$("#content").html('');
|
if ('WebSocket' in window){
|
//ws = new WebSocket("ws://www.isuyu.cn:8086/socketServer/"+$("#username").val());
|
ws = new WebSocket("ws://192.168.1.103:8088/socketServer/" + username);
|
// ws = new WebSocket("ws://127.0.0.1:8086/socketServer/" + i);
|
|
}
|
else if ('MozWebSocket' in window){
|
//ws = new MozWebSocket("ws://www.isuyu.cn:8086/socketServer/"+$("#username").val());
|
ws = new MozWebSocket("ws://192.168.1.103:8088/socketServer/"+username);
|
}
|
else{
|
alert("该浏览器不支持websocket");
|
}
|
|
|
ws.onmessage = function(evt) {
|
var content = $("#content").html();
|
$("#content").html(content+'<div style="text-align: right;margin-bottom: 8px">\n' +
|
' <p><q style="color: mediumorchid">服务端:</q><span>'+evt.data+ '</span></p>\n' +
|
' </div>\n' +
|
' <br/>');
|
};
|
|
ws.onclose = function(evt) {
|
var content = $("#content").html();
|
$("#content").html(content+'<div style="margin-bottom: 8px">\n' +
|
' <p><q style="color: coral">客户端:</q><span>连接中断</span></p>\n' +
|
' </div>\n' +
|
' <br/>');
|
};
|
|
ws.onopen = function(evt) {
|
$("#content").html('<div style="margin-bottom: 8px">\n' +
|
' <p><q style="color: coral">客户端:</q><span>连接成功...</span></p>\n' +
|
' </div>\n' +
|
' <br/>');
|
};
|
}else{
|
alert("请输入您的昵称");
|
}
|
}
|
|
function sendMsg() {
|
ws.send($("#writeMsg").val());
|
var content = $("#content").html();
|
$("#content").html(content+'<div>\n' +
|
' <p><q style="color: coral">客户端:</q><span>'+$("#writeMsg").val()+ '</span></p>\n' +
|
' </div>\n' +
|
' <br/>');
|
}
|
</script>
|
</body>
|
</html>
|
