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

港控/mmm° 2022-09-30 11:46 271阅读 0赞

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中属性值，如下表所示：  
————————————————————————————————————  
    属性值        属性常量        描述  
————————————————————————————————————  
    0        CONNECTING        连接尚未建立  
    1        OPEN               WebSocket的链接已经建立  
    2        CLOSING             连接正在关闭  
    3        CLOSED             连接已经关闭或不可用  
————————————————————————————————————  
WebSocket对象在连接过程中，通过侦测这个状态标志的变化，可以获取服务器端与客户端连接的状态，并将连接状态已状态码形式返回给客户端。  
     步骤5 关闭socket连接。  
        socket.close();  
————————————————————————————————————————————————————————————————  
    在实际应用中，socket服务器端的代码可以是Python，node.js,java,php。在这里我可以使用 [http://www.websocket.org/][http_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的div中
    function log(msg){ $("log").innerHTML+="<br>"+msg; }
    //键盘事件（回车）
    function onkey(event){ if(event.keyCode==13){ send(); } }
    </script>
    
    </head>
    <body οnlοad="init()">
    <div id="imagebg">
        <div style="width:520px;text-align:left;margin:0px auto;color:#000;"> <a href="http://weibo.com/jackyo"><strong>新浪微博：Jack张</strong& gt; </div>
        <br>
         <div id="log"></div>
         <input id="msg" type="textbox" οnkeypress="onkey(event)"/>
         <button οnclick="send()">发送</button>
         <button οnclick="quit()">断开</button>
    
    </div>
    </body>
    </html>

转自：[blog.csdn.net/cd\_cd/article/details/46817871][blog.csdn.net_cd_cd_article_details_46817871]

[http_www.websocket.org]: http://www.websocket.org/
[blog.csdn.net_cd_cd_article_details_46817871]: http://blog.csdn.net/cd_cd/article/details/46817871