HTML5 WebSocket Client DEMO 浏览器客户端

最新推荐文章于 2024-03-18 21:43:30 发布

小噤

最新推荐文章于 2024-03-18 21:43:30 发布

阅读量528

点赞数 1

文章标签： HTML5 WebSocket

本文链接：https://blog.csdn.net/qq574221329/article/details/102602658

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>HTML5 WebSocket Client DEMO  浏览器客户端 </title>
		<script type="text/javascript">
			var ws //一个页面只要一个变量储存WebSocket Client客户端
			var isOpen = false; //用来储存关闭事件时,是否已经打开

			function fnWebSocketOpen() { //新
				if ("WebSocket" in window) {} else {
					// 浏览器不支持 WebSocket
					alert("您的浏览器不支持 WebSocket!");
					return false;
				}
				if (fnCheckState()) {
					debugger
					alert("将关闭之前连接,再重新连接!");
					ws.close(); //关闭现连接
				}
				// 打开 web socket
				ws = new WebSocket("ws://localhost:54321/PrintServer");
				ws.onopen = fnWebSocketOnOpen;
				ws.onmessage = fnWebSocketOnMessage;
				ws.onclose = fnWebSocketOnClose;
			}

			function fnCheckState() { //检测是否通信正常
				if (ws != undefined && ws.readyState == 1) {
					isOpen = true;
					return isOpen;
				}
				isOpen = false
				return isOpen;
			}
			//事件过程回调函数
			function fnWebSocketOnOpen(evt) { //打开事件
				alert("已打开...");
			}

			function fnWebSocketOnMessage(evt) { //收到数据事件
				alert("收到数据..." + evt.data);
			}

			function fnWebSocketOnClose(evt) { //关闭事件
				if (isOpen) {
					alert("连接已关闭...");
				} else {
					alert("无法连接服务器..." + evt.currentTarget.url);
				}
				isOpen = false;
			}
			//
			function fnWebSocketSend() {
				debugger
				if (!fnCheckState()) {
					alert("尚未打开!");
					return false;
				}
				var d = new Date()
				ws.send("发送数据" + d.getTime() + Date.now());
			}

			function fnWebSocketClose() {
				if (!fnCheckState()) {
					alert("尚未打开!");
					return false;
				}
				ws.close();
			}
		</script>
	</head>
	<body>
		<div id="sse">
			<a href="javascript:fnWebSocketOpen()">打开连接WebSocket</a>
			<br /><br />
			<a href="javascript:fnWebSocketSend()">发送数据WebSocket</a>
			<br /><br />
			<a href="javascript:fnWebSocketClose()">关闭连接WebSocket</a>
			<br /><br />
		</div>
	</body>
</html>

小噤

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML5 WebSocket Client DEMO 浏览器客户端

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>HTML5 WebSocket Client DEMO 浏览器客户端 </title> <script type="text/javascript"> var ws //...
复制链接

扫一扫