WebSocket菜鸟教程二_websocket layui

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>

在不同的浏览器不同的窗口依然连接成功，函数触发成功