websocket.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>实时聊天</title>
		<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
		<link rel="stylesheet" href="websocket.css" />
	</head>
	<script>
	var name = prompt('请输入您的名字');
	var message;
	
	function C(selector){
		return document.querySelector(selector);
	}
	
	if(window.WebSocket){
		var url = 'ws://localhost:3000';
		var ws = new WebSocket(url);
		ws.onopen = function(e){
			C('#title').innerText = '连接成功';
		}
		ws.onerror = function(){
			C('#title').innerText = '连接失败';
		}
		ws.onmessage = function(e){
			var li = document.createElement('li');
			li.innerText = e.data;
			
			C('#list').appendChild(li);
		
			if(!'Notification' in window ){
				alert('不支持通知')
			}else if(Notification.permission === 'granted'){
				message == e.data?'':notice(e.data)
			}else if(Notification.permission !== 'denied'){
				Notification.requestPermission(function(permission){
					if(permission === 'granted'){
						message == e.data?'':notice(e.data)
					}
				})
			}	
			
			
		}
		ws.onclose = function(){
			C('#title').innerText = '连接关闭';
		}
		
		function sendMsg(){
			message = name +'：  '+ document.querySelector('#msg').value;
			ws.send(name +'：  '+ document.querySelector('#msg').value);
		}
		
		function notice(msg){
			var notification = new Notification('聊天室消息',{
				body:msg,
				icon:'blank_page_03.png'
			})
			
			notification.onclick = function(){
				notification.close();
			}
		}
	}else{
		C('#title').innerText = '浏览器不支持';
	}
	</script>
	<body>
		<div class="container">
			<div class="alert alert-success" role="alert" id="title"></div>
			<ul id="list">
				
			</ul>
			<div>
				<textarea class="form-control" id="msg" rows="3"></textarea>
				<div class="content">
				<button onclick="sendMsg()" type="button" class="btn btn-primary btn-block">发送</button>
				</div>
			</div>
		</div>
	</body>
</html>