HTML5下的WebSocket学习笔记

基础知识

1.WebSocket API   --- 基于JavaScript，包括 WebSocket原始对象，事件，方法和属性，通过WebSocket API可以连接到本地货远程的Server服务器，发送和接收消息，关闭连接
2.使用WebSocket的典型流程：
   1.检查浏览器是否支持WebSocket                 --- Check for WebSocket browser support
   2.创建WebSocket的js对象                       --- Create an instance of the WebSocket JS Object
   3.连接WebSocket服务器                         --- Connect to the WebSocket Server
   4.注册WebSocket事件                           --- Register for the WebSocket events
   5.根据用户交互进行数据传输                    --- Perform the proper data transmission according to users' actions
   6.关闭连接                                    --- Close the connection


   1.Browser Support ---  检测浏览器是否支持WebSocket
       if(window.WebSocket){
       console.log("WebSocket supported");
       //通过WebSocket进行操作
       }else{
       //不支持WebSocket，给出相应的提示和处理策略
       alert("Consider updating your browser for a richer experience");
       }

   2.The WebSocket Object    --- WebSocket的JavaScript对象     new WebSocket(url)   --- url：表示WebSocket要连接的服务器
       var socket = new WebSocket("ws://echo.websocket.org");
     说明：
          当创建一个WebSocket的JS对象后，它会立即连接到指定的服务器

   3.WebSocket 事件        --- WebSocket Events
      WebSocket的四个主要事件：
                              事件              对应方法
                              Open              onopen
                              Message           onmessage
                              Close             onclose
                              Error             onerror

            事件处理的两种方式
            1.通过事件的对应方法     ---  推荐：简单结构清晰
            2.addEventListener方法去实现事件处理

      说明：当不同的事件发生时，会触发相应的方法，执行逻辑代码

   4.WebSocket的事件处理

      onopen      --  事件在连接成功时触发，达成第一个握手，准备传输数据
         eg：
           socket.onopen = function(event){
             console.log("Connection established");
             //在这类可以初始化资源，并展示一些用户友好提示信息
             var label = document.getElementById("status-label");
             label.innerHTML="Connection established";
           }


      onmessage   -- 数据传输事件，客户端随时监听Server，当服务器端发送给客户端数据时触发  --- 数据包括：文本、图片、二进制数据等
         eg：
           socket.onmessage = function(event){
             console.log("Data received");
             if(typeof event.data == "string"){
             var label = document.getElementById("status-label");
             label.innerHTML = event.data;
             }
           }


      onclose    --  关闭客户端与服务器的连接，不能在进行数据的传输。
                     关闭连接的原因有多种：服务器关闭，客户端调用close()方法关闭，或者TCP错误  --- 可通过 code，reason，wasClean参数检测连接关闭的原因
                     code    ---    用一个唯一的数字，表示连接中断的原因
                     reason  ---    连接中断的原因
                     wasClean  ---  用于判断连接关闭，是因为服务器的原因，还是未知的网络错误
         eg：
           socket.onclose = function(event){
           console.log("Connections closed");
           var code = event.code;
           var reason = event.reason;
           var wasClean = event.wasClean;

           var label = document.getElementById("status-label");

           if(wasClean){
               label.innerHTML = "Connection closed normally";
           }else{
               label.innerHTML ="Connection closed with message "+reason+"(Code: "+code+")";
           }
           }


      onerror    --  出错时触发的事件，该事件出发后，会接着触发close事件，终止连接  ---  注意出错时给出提示，并尝试重新建立连接
         eg：
           socket.onerror = function(event){
              console.log("Error occurred");
              //出错提示
              var label = document.getElementById("status-label");
              label.innerHTML = "Error: "+event;
           }

   5.WebSocket的操作处理Actions  即：处理方法
            两种  send()和close()

         1.send()    ---    当连接成功后，客户端可与服务端进行数据传输，send()方法用于传输数据到服务器
             eg：
                var textView = document.getElementById("text-view");
                var buttonSend = document.getElementById("send-button");
                buttonSend.onClick = function(){
                //发送数据
                if(socket.readyState == WebSocket.OPEN){
                socket.send(textView.value);
                }
                }
         特别注意：
                 只有在连接成功时才能发送数据，因此，要么把send()方法放在onopen事件中处理，要么在发送数据是进行判断：当前连接是否成功


         2.close()   ---   中断连接
              eg：
                 通过点击按钮事件来中断当前连接
                   var textView = document.getElementById("text-view");
                   var buttonStop = document.getElementById("stop-button");
                   buttonSend.onClick = function(){
                   if(socket.readyState == WebSocket.OPEN){
                      socket.close();
                      //也可之前提到的传递code和reason参数
                      //socket.close(1000,"Deliberate disconnection");
                   }
                   }


   6.WebSocket的属性  Properties
        url          ---  返回WebSocket的URL
        protocol     ---  返回Server服务器使用的协议
        readyState   ---  连接状态
                                  WebSocket.OPEN           --- 已连接
                                  WebSocket.CLOSED         --- 已关闭
                                  WebSocket.CONNECTING     --- 正在连接
                                  WebSocket.CLOSING        --- 正在关闭
        bufferedAmount   ---  返回send()方法被调用时，已进入队列但尚未发送到服务器的总字节数
        binaryType       ---  返回接收到的二进制数据  -- (onmessage事件被触发时)

   7.WebSocket的Server
       1.流程
          Server