WebSocket Demo

HTML 代码:

<body>
		<h1>WebScoket示例</h1>
		<br /><br />
		<input type="text" id="message" name="message" value="WebSocket 示例" />
		<input type="button" value="发送" onclick="openSession();" />
		  <input type="button" id="closeSession_button" value="关闭会话" disabled="disabled" onclick="closeSession();" />
		<hr />
		<div id="message_div"></div>
	</body>

  

 

JavaScript 代码:

var webSocket = null;	// WebSocket 对象
			
/**
 * 创建 WebSocket 对象,并建立与服务器端的连接,即打开 WebSocket 会话
*/
var openSession = function(){
	if(null == webSocket) {
		webSocket = new WebSocket('ws://localhost/testProject/websocketDemo');

		webSocket.onopen = function(event) {
			console.log('建立与服务端的连接,即打开会话。');
			window.document.getElementById('closeSession_button').disabled = '';
			
			var message = window.document.getElementById('message').value;
			webSocket.send(message);
		}
		
		/**
		 * 与服务端的连接出现错误
		*/
		webSocket.onerror = function(event) {
			console.log('连接出错啦!' + event.reason);
		}
	} else {
		var message = window.document.getElementById('message').value;
		webSocket.send(message);
	}
	
	/**
	 * 监听消息
	*/
	webSocket.onmessage = function(event){
		console.log('接收服务端推送的消息,消息内容为:' + event.data);
		window.document.getElementById('message_div').innerHTML += event.data + '<br />';
	}
}

/**
 * 断开与服务端的连接,即关闭 WebSocket 会话
*/
var closeSession = function() {
	webSocket.close();		// 关闭 webSocket 连接
	window.document.getElementById('closeSession_button').disabled = 'disabled';
	window.document.getElementById('message_div').innerHTML = '';
	
	webSocket.onclose = function(event) {
		console.log('与服务端的连接已断开!' + event.reason);
	}
	
	webSocket = null;
}

  

  

posted @ 2017-02-08 09:25  hapday  阅读(310)  评论(0编辑  收藏  举报