【WebSocket页面调用示例,调用成功,系统右下角出现渐变页面,10秒后自动隐藏】

• 【功能需求】调用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;
}