Tenlion/wg-basic
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
52cfb14dae
wg-basic/module-instant-message/src/main/resources/templates/chat-demo.html

181 lines
7.4 KiB
HTML
Raw Normal View History

新增通知接口与业务功能，添加聊天示例页面
2021-09-14 00:23:19 +08:00
<!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;}
调整即时消息编码
2021-09-14 11:37:21 +08:00
.websocket-input {width: 234px; height: 23px; border: 1px solid silver; padding: 0 5px;}
.websocket-container {width: 295px;}
新增通知接口与业务功能，添加聊天示例页面
2021-09-14 00:23:19 +08:00
.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;}
调整即时消息编码
2021-09-14 11:37:21 +08:00
.send-msg {text-align: left; background-color: #c5c5c5; color: #000000; margin: 10px 10px 10px 0;}
.send-status {width: 20px; height: 20px; border-radius: 10px; background-color: red; display: inline-block;text-align: center; color: #FFF; vertical-align: middle;}
新增通知接口与业务功能，添加聊天示例页面
2021-09-14 00:23:19 +08:00
</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>
调整即时消息编码
2021-09-14 11:37:21 +08:00
<input id="currentUserId" class="websocket-input" type="hidden" th:value="${currentUserId}"/>
新增通知接口与业务功能，添加聊天示例页面
2021-09-14 00:23:19 +08:00
</div>
<div class="websocket-line">
调整即时消息编码
2021-09-14 11:37:21 +08:00
接收用户ID <input id="toUserId" class="websocket-input" type="text" style="width: 198px;" placeholder="输入接收用户ID"/>
新增通知接口与业务功能，添加聊天示例页面
2021-09-14 00:23:19 +08:00
</div>
<div class="websocket-line">
<input id="clientName" class="websocket-input" type="text" placeholder="请输入客户端名称"/>
<button id="loginBtn" onclick="login()">登录</button>
调整即时消息编码
2021-09-14 11:37:21 +08:00
<button id="closeBtn" style="display: none;" onclick="closeWebSocket()">关闭</button>
新增通知接口与业务功能，添加聊天示例页面
2021-09-14 00:23:19 +08:00
</div>
调整即时消息编码
2021-09-14 11:37:21 +08:00
<div class="websocket-line" style="font-size: 12px;">
新增通知接口与业务功能，添加聊天示例页面
2021-09-14 00:23:19 +08:00
状态：<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">
调整即时消息编码
2021-09-14 11:37:21 +08:00
<span class="send-status" title="用户不存在">!</span> <div class="message send-msg">发送</div>
新增通知接口与业务功能，添加聊天示例页面
2021-09-14 00:23:19 +08:00
</div>
</div>
调整即时消息编码
2021-09-14 11:37:21 +08:00
<div id="sendBox" class="websocket-box" style="display: none;">
新增通知接口与业务功能，添加聊天示例页面
2021-09-14 00:23:19 +08:00
<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;
调整即时消息编码
2021-09-14 11:37:21 +08:00
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));
}
新增通知接口与业务功能，添加聊天示例页面
2021-09-14 00:23:19 +08:00
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);
// 注册
调整即时消息编码
2021-09-14 11:37:21 +08:00
if(data.type === 100) {
新增通知接口与业务功能，添加聊天示例页面
2021-09-14 00:23:19 +08:00
var body = JSON.parse(data.body);
调整即时消息编码
2021-09-14 11:37:21 +08:00
if(body.code === 200) {
新增通知接口与业务功能，添加聊天示例页面
2021-09-14 00:23:19 +08:00
$('#loginStatus').html('已连接');
} else {
$('#loginStatus').html(body.msg);
}
调整即时消息编码
2021-09-14 11:37:21 +08:00
} else if(data.type === 101) {
新增通知接口与业务功能，添加聊天示例页面
2021-09-14 00:23:19 +08:00
var body = data.body;
$('#websocketHistoryBox').append('<div class="receive-msg-box"><div class="message receive-msg">'+ body +'</div></div>');
调整即时消息编码
2021-09-14 11:37:21 +08:00
} else if(data.type === 1100) {
var body = JSON.parse(data.body);
$('#'+ data.id).before('<span class="send-status" title="'+ body.msg +'">!</span> ')
新增通知接口与业务功能，添加聊天示例页面
2021-09-14 00:23:19 +08:00
}
}
//连接关闭的回调方法
websocket.onclose = function () {
console.log('close')
}
//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
window.onbeforeunload = function () {
websocket.close();
}
}
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');
调整即时消息编码
2021-09-14 11:37:21 +08:00
$('#sendBox').show();
新增通知接口与业务功能，添加聊天示例页面
2021-09-14 00:23:19 +08:00
initWebSocket(sessionId);
}, function(code, data) {
alert(data.msg);
})
}
function send() {
if(!websocket) {
alert('请开启WebSocket');
return;
}
if(!$('#message').val()) {
alert('请输入内容');
return;
}
调整即时消息编码
2021-09-14 11:37:21 +08:00
var sendId = new Date().getTime();
新增通知接口与业务功能，添加聊天示例页面
2021-09-14 00:23:19 +08:00
var sendBody = {
调整即时消息编码
2021-09-14 11:37:21 +08:00
id: sendId,
新增通知接口与业务功能，添加聊天示例页面
2021-09-14 00:23:19 +08:00
type: 101,
from: $('#currentUserId').val(),
to: $('#toUserId').val(),
body: $('#message').val()
}
websocket.send(JSON.stringify(sendBody));
调整即时消息编码
2021-09-14 11:37:21 +08:00
$('#websocketHistoryBox').append('<div class="send-msg-box"><div id="'+ sendId +'" class="message send-msg">'+ $('#message').val() +'</div></div>');
$('#message').val('');
//
}
function closeWebSocket() {
websocket.close();
$('#loginBtn').show();
$('#closeBtn').hide();
$('#clientName').removeAttr('disabled');
$('#toUserId').removeAttr('disabled');
$('#sendBox').hide();
新增通知接口与业务功能，添加聊天示例页面
2021-09-14 00:23:19 +08:00
}
</script>
</body>
</html>
Reference in New Issue Copy Permalink