WebSocket菜鸟教程二

websocket服务器，多窗口显示数据案例

	//注意事项
		//1.因为WebSocket存在一段时间后自动断开链接的问题，故采用每次读写操作都重新链接的方式；
		//2.服务端总链接数量有限，因此每次重新链接前应先关闭之前的链接，而不能直接创建链接；
		//3.发送信息后还未接收到返回数据时应该禁用“发送”按钮，防止连续触发造成设备通信异常；
		//4.为防止出现服务端一直无响应的情况，应添加一个重置链接的功能；
		<div style="width:620px;margin:0 auto;text-align:center;">
		<h3>JS调用 WebSocket测试Demo</h3>
	</div>
	<div style="width:620px;margin:0 auto;background-color:#eee;">
		<br />
		<lable style="display:block;">&nbsp;&nbsp;操作区域<lable>
				<div style="width:580px;margin:8px auto;border:1px solid #aaa;background-color:rgb(252,228,214);">
					<br />
					<div>
						<lable>&nbsp;&nbsp;卡号:<lable>
								<textarea id="cardNo" rows="1" cols="42"></textarea>
					</div>
					<br />
					<div style="width:500px;">
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					
						&nbsp;&nbsp;
						<input id="send" type="button" value="发送信息">
						&nbsp;&nbsp;
						<input id="reset" type="button" value="重置链接">
					</div>
					<br>
				</div>
				<br />
				<lable style="display:block;">&nbsp;&nbsp;接收记录<lable>
						<div style="width:583px;margin:8px auto;">
							<textarea id="record" rows="12" cols="80" style="background-color:rgb(226,239,218);"></textarea>
						</div>
						<br />
	</div>

JS部分

	var ws = null;//WebSocket 链接

		var url = "ws://127.0.0.1:8081";//WebSocket服务端地址；ip 和端口根据实际情况配置

	//打开连接
		function open() {
			if ("WebSocket" in window) {//检查当前浏览器是否支持WebSocket

				if (ws) {//判断是否已连接
					ws.close();
					ws = null;
				}
				//打开一个 web socket
				ws = new WebSocket(url);
				ws.onopen = function (evt) {//连接成功后回调函数
					send();//执行发送数据
				};

				ws.onmessage = function (evt) {//接收到信息--把接收信息添加到 接收记录 中,并关闭链接
					ws.close();
					ws = null;
					document.getElementById("record").value = document.getElementById("record").value + "\n " + evt.data;
					document.getElementById("send").disabled = false;
				};

			} else {
				// 浏览器不支持 WebSocket
				document.getElementById("record").value = document.getElementById("record").value + "\n 您的浏览器不支持 WebSocket!";
			}
		}

	//发送数据
		function send() {
			document.getElementById("send").disabled = true;//先禁用按钮，防止连续触发造成链接错误

		}


		//重置链接
		function reset() {
			if (ws) {//判断是否已连接
				ws.close();
				ws = null;
			}
			document.getElementById("record").value = document.getElementById("record").value + "\n 重置链接成功！";
			document.getElementById("send").disabled = false;
		}

<script type="text/javascript">
	document.getElementById("send").onclick = function () { open(); }
	document.getElementById("reset").onclick = function () { reset(); }
</script>

![](https://img-blog.csdnimg.cn/6cb在不同的浏览器不同的窗口依然连接成功，函数触发成功