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) {//检查当前浏览器是否支持WebSocketif (ws) {//判断是否已连接ws.close();ws = null;}//打开一个 web socketws = 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 {// 浏览器不支持 WebSocketdocument.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>

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

WebSocket菜鸟教程二相关推荐

WebSocket菜鸟教程
WebSocket菜鸟教程 WebSocket菜鸟教程看到这想必你了解了webscoket,基本文档原理就不提了! 这张图你能看明白吗?不能没事还有一张更简单的搞懂这个图很关键,我们与人聊天不是在 ...
Flink菜鸟教程(二)——时间概念
欢迎关注公众号--<数据三分钟> 一线大厂的师兄师姐结合自己的工作实践,将数据知识浅显道来,每天三分钟,助你成为数据达人.还有面试指导和内推机会. 上一节说到,实时计算中的数据可以看成无 ...
websocket菜鸟教程（１.１）
创建自己的websocket服务先了解node.js websocket 的基本使用https://www.npmjs.com/package/nodejs-websocket 第一步先安装 npm ...
nginx菜鸟教程二
--查看ngix是否在运行 [root@localhost sbin]# ps aux|grep nginx root 953 0.0 0.0 3492 516 ? ...
Flutter的菜鸟教程二十五:Flutter字体
本文学习在程序中使用自定义字体 https://fonts.google.com/?selection.family=Hanalei+Fill (有很多字体供选择)需翻墙,这里我们随便下载了一下用来演 ...
Flutter的菜鸟教程
Flutter的菜鸟教程一:第一个Flutter应用 Flutter的菜鸟教程二:最简单的MaterialApp Flutter的菜鸟教程三:Row/Column布局 Flutter的菜鸟教程四:Li ...
Java菜鸟教程笔记
参考:http://www.runoob.com/java/java-tutorial.html Java 基本数据类型内置数据类型引用类型 Java 变量类型 Java 局部变量实例变量类变 ...
python菜鸟基础教程-终于懂得python入门菜鸟教程
Python语言是一种典型的脚本语言,简洁,语法约束少,接近人类语言.有丰富的数据结构,例如列表.字典.集合等.具有可移植性,支持面向过程和面向对象编程,并且开源.以下是小编为你整理的python入门 ...
python菜鸟教程shell_[python小白]菜鸟教程---
pycharm竟然是idea大家族里面的,汉化之后不知道比my.eclipse高明到哪里去了.https://blog.csdn.net/pingfangx/article/details/78826 ...

WebSocket菜鸟教程二

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

WebSocket菜鸟教程二相关推荐

最新文章

热门文章