HTML5中websocket长连接的具体实现方法

时间2024-01-26 20:07:03发布访客分类HTML浏览899

导读：收集整理的这篇文章主要介绍了html5教程-HTML5中websocket长连接的具体实现方法，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 HT...

收集整理的这篇文章主要介绍了html5教程-HTML5中websocket长连接的具体实现方法，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 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" onkeyPress="onkey(event)"/>
          button onclick="send()">
    发送/button>
          button onclick="quit()">
    断开/button>
      /p>
     /body>
     /html>

HTML5中通过调用与数据通信相关的Web Socket API,实现从服务器中推送信息到客户端。

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" onkeyPRess="onkey(event)"/>
          button onclick="send()">
    发送/button>
          button onclick="quit()">
    断开/button>
      /p>
     /body>
     /html>

觉得可用，就经常来吧！欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！

API div DOM HTML post-format-gallery State this 对象转换

若转载请注明出处： HTML5中websocket长连接的具体实现方法
本文地址： https://pptw.com/jishu/587219.html

20170319HTML5表格常用属性浅谈HTML5前端开发学习路线