刘源最新职务,江苏公路信息网,侍从官之发
HTML5中通过调用与数据通信相关的Web Socket API,实现从服务器中推送信息到客户端。Socket又称为套接字,是基于W3C标准开发在一个TCP接口中进行双向通信的技术。通常情况下,Socket用于描述IP地址和端口,是通信过程中的一个字符句柄。当服务器端又多个应用服务绑定一个Socket时,通过通信中的字符句柄,实现不同端口对应不同应用服务功能。
目前,大部分浏览器都支持HTML5中Socket API的运行。WebSocket连接服务器和客户端,这个链接是一个实时的长连接,服务器端一旦与客户端建立了双向链接,就可以将数据推送到Socket中,客户端只要有一个Socket绑定的地址和端口与服务器建立联系,就可以接收推送来的数据。
WebSocket API 的使用分为以下几个步骤:<head>
<title>Jack张WebSocket实例</title> <style> html,body{font:normal 14px;margin:0 auto;} #log {width:440px; height:270px; text-align:left; overflow:auto;margin:0px auto; font-weight:bold;color:#F8F8F8; } #msg {width:330px;margin:0px auto;} #imagebg{ background-image: url(images/images.jpg); background-repeat: no-repeat; background-position: center top; height:643px; overflow:hidden; text-align:center; padding-top:120px; } </style> <script> //声明一个socket var socket; //初始化方法 function init(){ var host = "ws://echo.websocket.org/";//声明host注意:是ws协议 try{ socket = new WebSocket(host);//新创建一个socket对象 log('WebSocket - status '+socket.readyState);//将连接的状态信息显示在log socket.onopen = function(msg){ log("Welcome - status "+this.readyState); };//监听打开连接 socket.onmessage = function(msg){ log("Received: "+msg.data); };//监听当接收信息时触发匿名函数 socket.onclose = function(msg){ log("Disconnected - status "+this.readyState); };//关闭连接 } catch(ex){ log(ex); } $("msg").focus(); } //声明一个发送信息方法 function send(){ var txt,msg; txt = $("msg"); msg = txt.value; if(!msg){ alert("Message can not be empty"); return; } txt.value=""; txt.focus(); try{ socket.send(msg); log('Sent: '+msg); } catch(ex){ log(ex); } } //声明一个对开连接,关闭socket方法 function quit(){ log("Goodbye!"); socket.close(); socket=null; } // 根据id获取DOM元素 function $(id){ return document.getElementById(id); } //将信息显示在id为log的p中 function log(msg){ $("log").innerHTML+="<br>"+msg; } //键盘事件(回车) function onkey(event){ if(event.keyCode==13){ send(); } } </script> </head> <body onload="init()"> <p id="imagebg"> <p style="width:520px;text-align:left;margin:0px auto;color:#000;"> <a href="https://weibo.com/jackyo"><strong>新浪微博:Jack张</strong& gt; </p> <br> <p id="log"></p> <input id="msg" type="textbox" onkeypress="onkey(event)"/> <button onclick="send()">发送</button> <button onclick="quit()">断开</button> </p> </body> </html>
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
h5页面唤起app如果没安装就跳转下载(iOS和Android)
浅析数据存储的三种方式 cookie sessionstorage localstorage 的异同
React Native超简单完整示例-tabs、页面导航、热更新、用户行为分析
React componentWillMount、componentDidMount、componentWillUpdate和componentDidUpdate生命周期函数的详解
详解canvas.toDataURL()报错的解决方案全都在这了
网友评论