HTML 5中通过调用与数据通信相关的Web Socket API ,实现从 服务器 中推送信息到客户端。
Socket又称为套接字，是基于W3C标准开发在一个TCP接口中进行双向通信的技 术 。通常情况下，Socket用于描述IP地址和端口，是通信 过程中 的一个字符句柄。当服务器端又多个应用服务绑定一个Socket时，通过通信中的字符句柄，实现不同端口对应不同应用服务功能。
目前，大部分浏览器都支持HT ML 5中Socket API的运行。WebSocket连接服务器和客户端，这个链接是一个实时的 长连接 ，服务器端一旦与客户端建立了双向链接，就可以将数据推送到Socket中，客户端只要有一个Socket绑定的地址和端口与服务器建立联系，就可以接收推送来的数据。
WebSocket API 的使用分为以下几个步骤：步骤1、 创建连接，新建一个WebSocket对象十分的方便，代码如下：
VAR host = "ws://echo.websocket. org /";
var socket=new WebSocket(host);
注意：其中，URL必须以[ws]字符开头，剩余部分可以使用像HTTP地址一样来编写。该地址没有使用
HTTP协议写法，因为它的属性为WebSocket URL;URL必须由4个部分组成，分别是通信标记（ws）、主机名称 （host），端口号（port）及WebSocket Server.
步骤2，发送数据。当WebSocket对象与服务器建立联系后，使用如下代码发送数据：
socket.send(dat ai nfo);
注意：其中，objWs为新创建的WebSocket对象，send()方法中的dataInfo参数为字符类型，即只能使用文本数据 或者 将JSON 对象转换 成文本内容的 数据格式 。
步骤3，接收数据。客户端 添加事件 机制接收服务器发送来的数据，代码如下：
socket.onmessage=function(event){
//弹出收到的信息
alert(event.data);
//其他代码
}
其中，通过回调函数中event对象的"data"属性来获取服务器端发送的数据内容，该内容可以是一个字符串或者JSON对 象。
步骤4 状态标志。通过WebSocket对象的[ready State ]属性记录连接过程中的状态值。
"ready stat e"属性是一个连接的状态标志，用于获取WebSocket对象在连接，打开，变比中和关闭时的状态。该状态标志共有4中属性值，如下表所示：
————————————————————————————————————
属性值属性常量描述
————————————————————————————————————
0CONNECTING连接尚未建立
1O PE N WebSocket的链接已经建立
2CLOSING 连接正在关闭
3CLOSED 连接已经关闭或不可用
————————————————————————————————————
WebSocket对象在连接过程中，通过侦测这个状态标志的变化，可以获取服务器端与客户端连接的状态，并将连接状态已状态码形式返回给客户端。
步骤5 关闭socket连接。
socket.close();
————————————————————————————————————————————————————————————————
在实际应用中，socket服务器端的代码可以是Python，node.js,java,php。在这里我可以使用https://www.websocket.org/网站提供的，socket
服务端。协议地址为：ws://echo.websocket.org/
完整代码如下：
————————————————————————————————————————————————————————————————
<html>
<head>
<t IT le>Jack张WebSocket实例</title> <style> html,body{font:normal 14px ;m arg in:0 auto;} # LOG {width:440px; h ei ght:270px; text-align:left; overflow:auto;mar gin :0px auto; font-weight :bold;color:#F8F8F8; } #msg {width:330px;margin:0px auto;} #imagebg{ background -i mage: url(images/images. jpg ); background-repeat: no-repeat; background-position: center to p; height:643px; overflow:hidden; text-align:center; padding -t op: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 hr ef="https://weibo .COM /jackyo">< strong > 新浪微博 ：Jack张</strong& am p; gt; </p> <br> <p id="log"></p> <input id="msg" type="textbox" onkey Press ="onkey(event)"/> <button onclick="send()">发送</button> <button onclick="quit()">断开</button> </p> </body> </html> HTML5中通过调用与数据通信相关的Web Socket API,实现从服务器中推送信息到客户端。
Socket又称为套接字，是基于W3C标准开发在一个TCP接口中进行双向通信的技术。通常情况下，Socket用于描述IP地址和端口，是通信过程中的一个字符句柄。当服务器端又多个应用服务绑定一个Socket时，通过通信中的字符句柄，实现不同端口对应不同应用服务功能。
目前，大部分浏览器都支持HTML5中Socket API的运行。WebSocket连接服务器和客户端，这个链接是一个实时的长连接，服务器端一旦与客户端建立了双向链接，就可以将数据推送到Socket中，客户端只要有一个Socket绑定的地址和端口与服务器建立联系，就可以接收推送来的数据。
WebSocket API 的使用分为以下几个步骤：步骤1、 创建连接，新建一个WebSocket对象十分的方便，代码如下：
var host = "ws://echo.websocket.org/";
var socket=new WebSocket(host);
注意：其中，URL必须以[ws]字符开头，剩余部分可以使用像HTTP地址一样来编写。该地址没有使用
HTTP协议写法，因为它的属性为WebSocket URL;URL必须由4个部分组成，分别是通信标记（ws）、主机名称 （host），端口号（port）及WebSocket Server.
步骤2，发送数据。当WebSocket对象与服务器建立联系后，使用如下代码发送数据：
socket.send(dataInfo);
注意：其中，objWs为新创建的WebSocket对象，send()方法中的dataInfo参数为字符类型，即只能使用文本数据或者 将JSON对象转换成文本内容的数据格式。
步骤3，接收数据。客户端添加事件机制接收服务器发送来的数据，代码如下：
socket.onmessage=function(event){
//弹出收到的信息
alert(event.data);
//其他代码
}
其中，通过回调函数中event对象的"data"属性来获取服务器端发送的数据内容，该内容可以是一个字符串或者JSON对 象。
步骤4 状态标志。通过WebSocket对象的[readyState]属性记录连接过程中的状态值。
"readyState"属性是一个连接的状态标志，用于获取WebSocket对象在连接，打开，变比中和关闭时的状态。该状态标志共有4中属性值，如下表所示：
————————————————————————————————————
属性值属性常量描述
————————————————————————————————————
0CONNECTING连接尚未建立
1OPEN WebSocket的链接已经建立
2CLOSING 连接正在关闭
3CLOSED 连接已经关闭或不可用
————————————————————————————————————
WebSocket对象在连接过程中，通过侦测这个状态标志的变化，可以获取服务器端与客户端连接的状态，并将连接状态已状态码形式返回给客户端。
步骤5 关闭socket连接。
socket.close();
————————————————————————————————————————————————————————————————
在实际应用中，socket服务器端的代码可以是Python，node.js,java,php。在这里我可以使用https://www.websocket.org/网站提供的，socket
服务端。协议地址为：ws://echo.websocket.org/
完整代码如下：
————————————————————————————————————————————————————————————————
<html>
<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" onkey PR ess="onkey(event)"/> <button onclick="send()">发送</button> <button onclick="quit()">断开</button> </p> </body> </html> 觉得 可用，就经常来吧！ 欢迎评论哦！ html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-HTML5中websocket长连接的具体实现方法 全部内容，希望文章能够帮你解决 html5教程-HTML5中websocket长连接的具体实现方法 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-HTML5中websocket长连接的具体实现方法的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did219372