mirror of
https://gitee.com/farsunset/cim.git
synced 2025-07-16 13:06:15 +08:00
178 lines
6.1 KiB
HTML
178 lines
6.1 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8"/>
|
|
<title>CIM Webclient for json</title>
|
|
<link rel="shortcut icon" href="./image/favicon.ico" type="image/x-icon">
|
|
<link charset="utf-8" rel="stylesheet" href="./css/bootstrap.min.css" />
|
|
<link charset="utf-8" rel="stylesheet" href="./css/common.css" />
|
|
<script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script>
|
|
<script type="text/javascript" src="./js/bootstrap.min.js"></script>
|
|
<script type="text/javascript" src="./js/common.js"></script>
|
|
<script type="text/javascript" src="./js/cim/cim.web.sdk.js"></script>
|
|
</head>
|
|
|
|
|
|
<script>
|
|
|
|
/***********************************推送配置开始**************************/
|
|
|
|
/** 当socket连接成功回调 **/
|
|
function onConnectFinished(){
|
|
CIMPushManager.bind($('#account').val());
|
|
}
|
|
|
|
/** 当收到请求回复时候回调 **/
|
|
function onReplyReceived(reply)
|
|
{
|
|
console.log(reply);
|
|
if(reply.key==='client_bind' && reply.code === "200" )
|
|
{
|
|
hideProcess();
|
|
|
|
$('#LoginDialog').fadeOut();
|
|
|
|
|
|
$('#MessageDialog').fadeIn();
|
|
$('#MessageDialog').addClass("in");
|
|
$("#current_account").text($('#account').val());
|
|
|
|
}
|
|
}
|
|
|
|
/** 当收到消息时候回调 **/
|
|
|
|
function onMessageReceived(message)
|
|
{
|
|
console.log(message);
|
|
if(message.action === ACTION_999){
|
|
$('#MessageDialog').fadeOut();
|
|
$('#LoginDialog').fadeIn();
|
|
$('#LoginDialog').addClass("in");
|
|
return ;
|
|
}
|
|
|
|
showNotification(message.content);
|
|
var time = new Date(message.timestamp).toLocaleString();
|
|
$("#messageList").prepend("<div class='alert alert-info' >"+time+"</p></p>"+message.content+"</div>");
|
|
}
|
|
|
|
|
|
/***********************************推送配置结束**************************/
|
|
|
|
|
|
|
|
/***********************************业务配置开始**************************/
|
|
|
|
function doLogin(){
|
|
|
|
if($.trim($('#account').val()) =='' ){
|
|
return;
|
|
}
|
|
showProcess('正在接入请稍后......');
|
|
/**登录成功后创建连接****/
|
|
CIMPushManager.connect();
|
|
}
|
|
|
|
|
|
|
|
$(document).ready(function(){
|
|
$('#LoginDialog').fadeIn();
|
|
$('#LoginDialog').addClass("in");
|
|
$('#host').val(CIM_HOST);
|
|
$('#port').val(CIM_PORT);
|
|
initNotification();
|
|
});
|
|
|
|
|
|
function initNotification(){
|
|
//判断浏览器是否支持桌面通知
|
|
if (window.Notification) {
|
|
var notification = window.Notification;
|
|
if (notification.permission == "default") {
|
|
notification.requestPermission(function(permission) {
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
function showNotification(msg){
|
|
var notify = new Notification("系统消息", {
|
|
body: msg,
|
|
icon: '/image/icon.png',
|
|
tag: 1
|
|
});
|
|
|
|
notify.onshow = function() {
|
|
setTimeout(function() {
|
|
notify.close();
|
|
}, 3000);
|
|
}
|
|
}
|
|
|
|
/***********************************业务配置结束**************************/
|
|
</script>
|
|
|
|
|
|
<body style="width: 600px;">
|
|
|
|
|
|
<div class="modal fade" id="LoginDialog" tabindex="-1" role="dialog" data-backdrop="static">
|
|
<div class="modal-dialog" style="width: 400px;margin: 64px auto;">
|
|
<div class="modal-content" >
|
|
<div class="modal-body" style="padding:0px;" >
|
|
<div style="height:200px;text-align: center; background: #5FA0D3; color: #ffffff; border: 0px; border-top-left-radius: 4px; border-top-right-radius: 4px;">
|
|
<img src="./image/icon.png" style="height: 72px;width: 72px;margin-top:40px;"/>
|
|
<div style="margin-top: 20px; color: #ffffff;font-size: 16px;">请输入一个帐号用于登录，随后接收推送消息</div>
|
|
</div>
|
|
|
|
<div class="input-group" style="margin-top: 30px;margin-left:10px;margin-right:10px;margin-bottom:30px;">
|
|
<span class="input-group-addon">账号</span>
|
|
<input type="text" class="form-control" id="account" maxlength="32" placeholder="帐号（数字或者英文字母）"
|
|
style="display: inline; width: 100%; height: 50px;" />
|
|
</div>
|
|
|
|
|
|
<div class="alert alert-success" role="alert" style="margin: 0 10px;">
|
|
cim.web.sdk.js中设置cim服务的IP(域名)和端口
|
|
</div>
|
|
|
|
<div class="input-group" style="margin-top: 30px;margin-left:10px;margin-right:10px;margin-bottom:30px;">
|
|
<span class="input-group-addon">host</span>
|
|
<input type="text" class="form-control" id="host" maxlength="32" readonly = "readonly"
|
|
style="display: inline; width: 100%; height: 50px;" />
|
|
</div>
|
|
|
|
<div class="input-group" style="margin-top: 30px;margin-left:10px;margin-right:10px;margin-bottom:30px;">
|
|
<span class="input-group-addon">port</span>
|
|
<input type="text" class="form-control" id="port" maxlength="32" readonly = "readonly"
|
|
style="display: inline; width: 100%; height: 50px;" />
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer" style="text-align: center;">
|
|
<a type="button" class="btn btn-success btn-lg" onclick="doLogin()"
|
|
style="width: 300px;">登录</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 消息提示页面 -->
|
|
<div class="modal fade" data-backdrop="static" id="MessageDialog" tabindex="-1" role="dialog" >
|
|
<div class="alert alert-success" role="alert">
|
|
通过<a href="http://127.0.0.1:8080/console/session/list" class="alert-link" target="_blank" >控制台</a>或者<a href="http://127.0.0.1:8080/swagger-ui/index.html" target="_blank" class="alert-link">调用接口</a>发送消息
|
|
</div>
|
|
<div class="modal-dialog" style="width: 720px;margin: 30px auto;">
|
|
<div class="modal-content" >
|
|
<div class="modal-header" style="text-align: center;">
|
|
<span style="float: left;">消息显示面板</span>
|
|
<span style="float: right;color: #4caf50;">当前帐号：<span id="current_account"></span></span>
|
|
</div>
|
|
<div class="modal-body" id="messageList" style="min-height: 600px;" >
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html> |