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在不同的浏览器不同的窗口依然连接成功,函数触发成功在这里插入图片描述

  • 3
    点赞
  • 23
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值