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;"> 操作区域<lable>
<div style="width:580px;margin:8px auto;border:1px solid #aaa;background-color:rgb(252,228,214);">
<br />
<div>
<lable> 卡号:<lable>
<textarea id="cardNo" rows="1" cols="42"></textarea>
</div>
<br />
<div style="width:500px;">
<input id="send" type="button" value="发送信息">
<input id="reset" type="button" value="重置链接">
</div>
<br>
</div>
<br />
<lable style="display:block;"> 接收记录<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>
在不同的浏览器不同的窗口依然连接成功，函数触发成功