WebSocket菜鸟教程二

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

//注意事项

//1.因为WebSocket存在一段时间后自动断开链接的问题，故采用每次读写操作都重新链接的方式；

//2.服务端总链接数量有限，因此每次重新链接前应先关闭之前的链接，而不能直接创建链接；

//3.发送信息后还未接收到返回数据时应该禁用“发送”按钮，防止连续触发造成设备通信异常；

//4.为防止出现服务端一直无响应的情况，应添加一个重置链接的功能；

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>

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