前端连接websocket demo

前端连接websocket demo

代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Java后端WebSocket的Tomcat实现</title>
		<script src="dist/js/mui.min.js"></script>
	</head>
	<body>
		<hr />
		<button onclick="openWebSocket()">打开WebSocket连接</button>
		<hr />
		Welcome<br /><input id="text" type="text" />
		<button onclick="send()">发送消息</button>
		<hr />
		<button onclick="closeWebSocket()">关闭WebSocket连接</button>
		<hr />
		<div id="message"></div>
	</body>
 
	<script type="text/javascript">
	
		var websocket = null;
 
		//mui.ajax('http://12.11.55.33:5789/checkcenter/socket/push/1?citys=1', {
		//	data: {
		//		citys: "深圳"
		//	},
		//	dataType: 'json', //服务器返回json格式数据
		//	type: 'get', //HTTP请求类型
		//	timeout: 10000, //超时时间设置为10秒;
		//	success: function(data) {
		//		send();
		//	},
		//	error: function(xhr, type, errorThrown) {
        //
		//	}
		//});
		
		openWebSocket();
		
		
		//打开WebSocket连接
		function openWebSocket() {
			//判断当前浏览器是否支持WebSocket
			if ('WebSocket' in window) {
				
				var validate = "xsfasdsqtwgdsxxxsxsfax";
				
				websocket = new WebSocket("ws://127.0.0.1:9715/ws?pageName=homePage&validate=" + validate );
			} else {
				alert('当前浏览器 Not support websocket')
			}
			
			//连接发生错误的回调方法
			websocket.onerror = function() {
				setMessageInnerHTML("WebSocket连接发生错误");
			};
	 
			//连接成功建立的回调方法
			websocket.onopen = function() {
				setMessageInnerHTML("WebSocket连接成功");
			}
	 
			//接收到消息的回调方法
			websocket.onmessage = function(event) {
				setMessageInnerHTML(event.data);
			}
	 
			//连接关闭的回调方法
			websocket.onclose = function() {
				setMessageInnerHTML("WebSocket连接关闭");
			}
	 
			//监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。
			window.onbeforeunload = function() {
				closeWebSocket();
			}
		}
		
 
		//将消息显示在网页上
		function setMessageInnerHTML(innerHTML) {
			document.getElementById('message').innerHTML += innerHTML + '
'
; } //关闭WebSocket连接 function closeWebSocket() { websocket.close(); } //发送消息 function send() { var message = document.getElementById('text').value; websocket.send(message); } </script> </html>

★另附[完整版demo下载,可直接调试调用](https://download.csdn.net/download/qq_25073261/11686169)

你可能感兴趣的:(组件,websocket)