207 lines
7.9 KiB
HTML
207 lines
7.9 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html xmlns:th="http://www.thymeleaf.org">
|
|||
|
|
<head>
|
|||
|
|
<base th:href="${#request.getContextPath() + '/'}">
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<title>聊天测试</title>
|
|||
|
|
<style>
|
|||
|
|
.websocket-line {padding: 5px 0;}
|
|||
|
|
.websocket-input {width: 244px; height: 21px; border: 1px solid silver;}
|
|||
|
|
.websocket-container {width: 300px;}
|
|||
|
|
.websocket-history-box {height: 400px; border: 1px solid silver; overflow: auto;}
|
|||
|
|
.websocket-box {padding: 5px 0; text-align: right;}
|
|||
|
|
.message {display: inline-block; max-width: 195px; font-size: 13px; margin: 10px; padding: 5px; border-radius: 5px;}
|
|||
|
|
.receive-msg-box {}
|
|||
|
|
.receive-msg {background-color: #04b304; color: #FFFFFF;}
|
|||
|
|
.send-msg-box {text-align: right;}
|
|||
|
|
.send-msg {text-align: left; background-color: #c5c5c5; color: #000000;}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
|
|||
|
|
<body>
|
|||
|
|
<div class="websocket-container">
|
|||
|
|
<div class="websocket-line">
|
|||
|
|
<select id="scheme" style="width: 70px; height: 26px; font-size: 18px;">
|
|||
|
|
<option value="ws://" selected>ws://</option>
|
|||
|
|
<option value="wss://">wss://</option>
|
|||
|
|
</select>
|
|||
|
|
<span id="webSocketUrl" th:text="${webSocketUrl}"></span>
|
|||
|
|
</div>
|
|||
|
|
<div class="websocket-line">
|
|||
|
|
当前用户ID <input id="currentUserId" class="websocket-input" type="text" th:value="${currentUserId}" readonly style="width: 208px;"/>
|
|||
|
|
</div>
|
|||
|
|
<div class="websocket-line">
|
|||
|
|
接收用户ID <input id="toUserId" class="websocket-input" type="text" style="width: 208px;"/>
|
|||
|
|
</div>
|
|||
|
|
<div class="websocket-line">
|
|||
|
|
<input id="clientName" class="websocket-input" type="text" placeholder="请输入客户端名称"/>
|
|||
|
|
<button id="loginBtn" onclick="login()">登录</button>
|
|||
|
|
<button id="closeBtn" style="display: none;">关闭</button>
|
|||
|
|
</div>
|
|||
|
|
<div class="websocket-line">
|
|||
|
|
状态：<span id="loginStatus">未登录</span>
|
|||
|
|
</div>
|
|||
|
|
<div id="websocketHistoryBox" class="websocket-history-box">
|
|||
|
|
<!--
|
|||
|
|
<div class="receive-msg-box">
|
|||
|
|
<div class="message receive-msg">收到</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="send-msg-box">
|
|||
|
|
<div class="message send-msg">发送</div>
|
|||
|
|
</div>
|
|||
|
|
-->
|
|||
|
|
</div>
|
|||
|
|
<div class="websocket-box">
|
|||
|
|
<input type="text" id="message" class="websocket-input" placeholder="请输入发送内容"/>
|
|||
|
|
<button id="login" onclick="send()">发送</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script type="text/javascript" src="assets/js/jquery-3.5.1.min.js"></script>
|
|||
|
|
<script type="text/javascript" src="assets/js/restajax.js"></script>
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
var websocket;
|
|||
|
|
function initWebSocket(sessionId) {
|
|||
|
|
if ('WebSocket' in window) {
|
|||
|
|
websocket = new WebSocket($('#scheme').val() + $('#webSocketUrl').html());
|
|||
|
|
console.log("WebSocket连接成功")
|
|||
|
|
} else {
|
|||
|
|
alert('浏览器不支持WebSocket');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
//连接发生错误的回调方法
|
|||
|
|
websocket.onerror = function () {
|
|||
|
|
console.log('error')
|
|||
|
|
};
|
|||
|
|
//连接成功建立的回调方法
|
|||
|
|
websocket.onopen = function (event) {
|
|||
|
|
console.log('open', event);
|
|||
|
|
// 打开连接，注册WebSocket
|
|||
|
|
register(sessionId);
|
|||
|
|
}
|
|||
|
|
//接收到消息的回调方法
|
|||
|
|
websocket.onmessage = function (event) {
|
|||
|
|
var data = JSON.parse(event.data);
|
|||
|
|
// 注册
|
|||
|
|
if(data.type == 100) {
|
|||
|
|
var body = JSON.parse(data.body);
|
|||
|
|
if(body.code == 200) {
|
|||
|
|
$('#loginStatus').html('已连接');
|
|||
|
|
} else {
|
|||
|
|
$('#loginStatus').html(body.msg);
|
|||
|
|
}
|
|||
|
|
} else if(data.type == 101) {
|
|||
|
|
var body = data.body;
|
|||
|
|
$('#websocketHistoryBox').append('<div class="receive-msg-box"><div class="message receive-msg">'+ body +'</div></div>');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
//连接关闭的回调方法
|
|||
|
|
websocket.onclose = function () {
|
|||
|
|
console.log('close')
|
|||
|
|
}
|
|||
|
|
//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
|
|||
|
|
window.onbeforeunload = function () {
|
|||
|
|
websocket.close();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function register(sessionId) {
|
|||
|
|
var registBody = {
|
|||
|
|
id: new Date().getTime(),
|
|||
|
|
type: 100,
|
|||
|
|
from: $('#currentUserId').val(),
|
|||
|
|
to: $('#currentUserId').val(),
|
|||
|
|
body: {
|
|||
|
|
sessionId: sessionId
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
websocket.send(JSON.stringify(registBody));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function login() {
|
|||
|
|
if(!$('#toUserId').val()) {
|
|||
|
|
alert('请输入接收用户ID');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if(!$('#clientName').val()) {
|
|||
|
|
alert('请输入客户端名称')
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
restAjax.get(restAjax.path('api/websocket/client/login/{clientName}', [$('#clientName').val()]), {}, null, function(code, data) {
|
|||
|
|
var sessionId = data.data
|
|||
|
|
$('#loginBtn').hide();
|
|||
|
|
$('#closeBtn').show();
|
|||
|
|
$('#clientName').attr('disabled', 'disabled');
|
|||
|
|
$('#toUserId').attr('disabled', 'disabled');
|
|||
|
|
initWebSocket(sessionId);
|
|||
|
|
}, function(code, data) {
|
|||
|
|
alert(data.msg);
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function send() {
|
|||
|
|
if(!websocket) {
|
|||
|
|
alert('请开启WebSocket');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if(!$('#message').val()) {
|
|||
|
|
alert('请输入内容');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
var sendBody = {
|
|||
|
|
id: new Date().getTime(),
|
|||
|
|
type: 101,
|
|||
|
|
from: $('#currentUserId').val(),
|
|||
|
|
to: $('#toUserId').val(),
|
|||
|
|
body: $('#message').val()
|
|||
|
|
}
|
|||
|
|
websocket.send(JSON.stringify(sendBody));
|
|||
|
|
$('#websocketHistoryBox').append('<div class="send-msg-box"><div class="message send-msg">'+ $('#message').val() +'</div></div>');
|
|||
|
|
$('#message').val('')
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// //判断当前浏览器是否支持WebSocket
|
|||
|
|
//
|
|||
|
|
//
|
|||
|
|
// //将消息显示在网页上
|
|||
|
|
// function setMessageInnerHTML(innerHTML) {
|
|||
|
|
// document.getElementById('message').innerHTML += innerHTML + '<br/>';
|
|||
|
|
// }
|
|||
|
|
//
|
|||
|
|
// //关闭连接
|
|||
|
|
// function closeWebSocket() {
|
|||
|
|
// websocket.close();
|
|||
|
|
// }
|
|||
|
|
//
|
|||
|
|
// var count = 0;
|
|||
|
|
// //发送消息
|
|||
|
|
// function send() {
|
|||
|
|
// var message = document.getElementById('text').value;
|
|||
|
|
// if (count == 0) {
|
|||
|
|
// var registBody = {
|
|||
|
|
// id: new Date().getTime(),
|
|||
|
|
// type: 100,
|
|||
|
|
// from: '1',
|
|||
|
|
// to: '1',
|
|||
|
|
// body: {
|
|||
|
|
// sessionId: message
|
|||
|
|
// }
|
|||
|
|
// }
|
|||
|
|
// websocket.send(JSON.stringify(registBody));
|
|||
|
|
// } else {
|
|||
|
|
// var sendBody = {
|
|||
|
|
// id: new Date().getTime(),
|
|||
|
|
// type: 101,
|
|||
|
|
// from: '1',
|
|||
|
|
// to: '1',
|
|||
|
|
// body: message
|
|||
|
|
// }
|
|||
|
|
// websocket.send(JSON.stringify(sendBody));
|
|||
|
|
// }
|
|||
|
|
// count++;
|
|||
|
|
// }
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
</body>
|
|||
|
|
|
|||
|
|
</html>
|