- 【功能需求】调用WebSocket成功以后,桌面右下角出现服务器推送的消息内容,10秒后自动进行隐藏
- 【调用路径需要动态获取】
【JavaScript部分代码】
var socket;
if (typeof (WebSocket) == "undefined") {
console.log("您的浏览器不支持WebSocket");
} else {
console.log("您的浏览器支持WebSocket");
//实现化WebSocket对象,指定要连接的服务器地址与端口 建立连接
//等同于socket = new WebSocket("ws://localhost:8083/checkcentersys/websocket/20");
// 当前网址
var curWwwPath = window.document.location.href;
// 获取主机地址
var pathName = window.document.location.pathname;
var pos = curWwwPath.indexOf(pathName);
var localhostPath = curWwwPath.substring(0, pos);
var socketPath = localhostPath.replace('http','ws');
socket = new WebSocket(socketPath + "/websocket");
//socket = new WebSocket("ws://192.168.1.130:8101/websocket");
//打开事件
socket.onopen = function() {
console.log("Socket 已打开");
//socket.send("这是来自客户端的消息" + location.href + new Date());
};
//获得消息事件
socket.onmessage = function(msg) {
console.log(msg.data);
//发现消息进入 开始处理前端触发逻辑
//alert("消息通知:" + msg.data);
//$("#socket").css({'display':'block','opacity':'0.8'});
//$("#socket").show(3000);
//$("#socket").slideToggle(3000).slideUp(1000);
//$("#socket").slideToggle(3000);
if (msg.data != "连接成功" && msg.data !="") {
$("#socket").fadeIn(3000);
$("#socketmsg").html(msg.data);
// 开启定时器
startTimes();
var timer;
// 启动跳转的定时器
function startTimes() {
timer = window.setInterval(showSecondes,1000);
}
var i = 10;
function showSecondes() {
console.log(1);
if (i > 0) {
i--;
} else {
window.clearInterval(timer); // 清除定时器
$("#socket").css({'display':'none','opacity':'0.8'});
//第二种
//var add = $("#socket");
//add.slideDown(2000);
//setTimeout(function(){add.slideUp(2000);},4000);
//第三种
//$("#socket").fadeOut(3000);
//$("#socket").fadeTo("3000",0.7);
}
}
}
};
//关闭事件
socket.onclose = function() {
console.log("Socket已关闭");
};
//发生了错误事件
socket.onerror = function() {
alert("Socket发生了错误");
//此时可以尝试刷新页面
}
//离开页面时,关闭socket
//jquery1.8中已经被废弃,3.0中已经移除
// $(window).unload(function(){
// socket.close();
//});
}
function hideSocketDialog() {
var dialogDiv = document.getElementById("socket");
dialogDiv.style.display = "none";
}
【css部分代码】
#socket{
position: absolute;
top:35%;
width:300px;
height:150px;
z-index: 99;
text-align: center;
line-height: 25px;
font-size: 14px;
border-right: #FFFFFF 1px solid;
border-top: #FFFFFF 1px solid;
border-left: #FFFFFF 1px solid;
border-bottom: #FFFFFF 1px solid;
background-color: #ffffff;
margin: 330px 0px 0px 1120px;
display: none;
}
#socketTitle {
height:25px;
background-color: #228fbd;
color:#ffffff;
font-weight: bold;
}
#socketClose {
float: right;
}
#socketmsg{
float:left;
}