<!DOCTYPE html>
|
<html xmlns:th="http://www.thymeleaf.org">
|
<head>
|
<meta charset="utf-8">
|
<!-- 启用360浏览器的极速模式(webkit) -->
|
<meta name="renderer" content="webkit">
|
<meta name="viewport"
|
content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
|
<title>soketTest</title>
|
<link th:href="@{/images/}"
|
rel="SHORTCUT ICON">
|
<meta name="keywords"
|
content=""/>
|
<meta name="description"
|
content=""/>
|
<style type="text/css">
|
.row > div:nth-child(1) {
|
background: url(../../images/login-title.jpg) no-repeat;
|
background-size: 100% 100%;
|
height: 380px;
|
}
|
|
.row > div:nth-child(2) {
|
background: #fff;
|
height: 380px;
|
}
|
.download-bar {
|
margin-top: 15px;
|
color: #fff;
|
}
|
|
.download-bar a {
|
color: #fff;
|
margin: 0 5px;
|
}
|
|
.download-bar a:hover {
|
text-decoration: underline;
|
color: #fff;
|
}
|
</style>
|
<script>
|
var isoldIE = false;
|
if (navigator.userAgent.indexOf("MSIE") > 0) {
|
if (navigator.userAgent.indexOf("MSIE 6.0") > 0
|
|| navigator.userAgent.indexOf("MSIE 7.0") > 0
|
|| avigator.userAgent.indexOf("MSIE 8.0") > 0) {
|
isoldIE = true;
|
}
|
}
|
if (window.top !== window.self) {
|
window.top.location = window.location
|
}
|
;
|
</script>
|
<script type="text/javascript"
|
th:src="@{/js/plugin/jquery-2.1.4.min.js}"></script>
|
<script type="text/javascript" th:src="@{/js/systools/MBase.js}"></script>
|
<link th:href="@{/css/styleOne/login.min.css}" rel="stylesheet">
|
|
</head>
|
|
<body >
|
<h3>hello socket</h3>
|
<p>【userId】：<div><input id="userId" name="userId" type="text" value="张三"></div>
|
<p>【toUserId】：<div><input id="toUserId" name="toUserId" type="text" value="李四"></div>
|
<p>【contentText】：<div><input id="contentText" name="contentText" type="text" value="hello websocket"></div>
|
<p>
|
<textarea id="messageBody" style="width:600px;height:300px;" >
|
|
</textarea>
|
</p>
|
|
|
<p>操作:<div><button onclick="openSocket()">开启socket</button></div>
|
<p>【操作】：<div><button onclick="sendMessage()">发送消息</button></div>
|
<p>【操作】：<div><button onclick="colseSocket()">关闭连接</button></div>
|
</body>
|
<script type="text/javascript" th:src="@{/js/systools/MJsBase.js}"></script>
|
<script>
|
|
var socket;
|
function openSocket() {
|
if(typeof(WebSocket) == "undefined") {
|
console.log("您的浏览器不支持WebSocket");
|
}else{
|
console.log("您的浏览器支持WebSocket");
|
//实现化WebSocket对象，指定要连接的服务器地址与端口 建立连接
|
var userId = document.getElementById('userId').value;
|
var socketUrl="ws://localhost:8080/webSocketServer?userId="+userId;
|
console.log(socketUrl);
|
if(socket!=null){
|
socket.close();
|
socket=null;
|
}
|
socket = new WebSocket(socketUrl);
|
//打开事件
|
socket.onopen = function() {
|
console.log("websocket已打开");
|
//socket.send("这是来自客户端的消息" + location.href + new Date());
|
};
|
//获得消息事件
|
socket.onmessage = function(msg) {
|
console.log(msg);
|
var serverMsg = msg.data;
|
console.log(serverMsg);
|
|
var serviceMesgObj=JSON.parse(serverMsg);
|
|
//发现消息进入 开始处理前端触发逻辑
|
var messageBody= document.getElementById('messageBody');
|
messageBody.value=messageBody.value+"\r\n"+ serviceMesgObj.userId+"：" + serviceMesgObj.messageBody;
|
|
|
};
|
//关闭事件
|
socket.onclose = function() {
|
console.log("websocket已关闭");
|
};
|
//发生了错误事件
|
socket.onerror = function() {
|
console.log("websocket发生了错误");
|
}
|
}
|
}
|
|
function sendMessage() {
|
if(typeof(WebSocket) == "undefined") {
|
console.log("您的浏览器不支持WebSocket");
|
}else {
|
// console.log("您的浏览器支持WebSocket");
|
var targetUserId = document.getElementById('toUserId').value;
|
var contentText = document.getElementById('contentText').value;
|
var msg = '{"messageType":1,"targetUserId":"'+targetUserId+'","messageBody":"'+contentText+'"}';
|
console.log(msg);
|
socket.send(msg);
|
var userId = document.getElementById('userId').value;
|
var messageBody= document.getElementById('messageBody');
|
messageBody.value=messageBody.value+"\r\n"+ userId+"：" + contentText;
|
|
}
|
}
|
function colseSocket() {
|
if(typeof(WebSocket) == "undefined") {
|
console.log("您的浏览器不支持WebSocket");
|
}else {
|
socket.close();
|
}
|
}
|
</script>
|
|
|
</html>
|
