WebSocket消息推送

Posted 2020-10-18 pei~乐悠悠

WebSocket协议是基于TCP的一种新的网络协议，应用层，是TCP/IP协议的子集。

它实现了浏览器与服务器全双工（full-duplex）通信，客户端和服务器都可以向对方主动发送和接收数据。在JS中创建WebSocket后，会有一个HTTP请求发向浏览器以发起请求。在取得服务器响应后，建立的连接会使用HTTP升级将HTTP协议转换为WebSocket协议。也就是说，使用标准的HTTP协议无法实现WebSocket，只有支持那些协议的专门浏览器才能正常工作。由于WebScoket使用了自定义协议，所以URL与HTTP协议略有不同。未加密的连接为ws://，而不是http://。加密的连接为wss://，而不是https://。

用途：

实时Web应用的解决方案，实现Web的实时通信。

说的再直白点， html的消息推送 。

假如你有一个页面，数据不定期更改，通常的做法就是轮询，轮询是指在特定的时间间隔(如每一秒)，由浏览器对服务器发起HTTP请求，然后由服务器返回数据给浏览器。

由于HTTP协议是惰性的，只有客户端发起请求，服务器才会返回数据。轮询技术实现的前提条件同样是基于这种机制。而WebSocket属于服务端推送技术，本质是一种应用层协议，可以实现持久连接的全双工双向通信。

当有了web socket，数据变动时 让服务器通知客户端，启不是很美妙？

请求示例：

(1) 默认端口是80和443(ssl)。

(2) 协议标识符是ws和ws(ssl)。

(3) 请求报文示例

General
--------------------------------------------
Request URL:ws://localhost:8080/j2ee-websocket/websocket/1
Request Method:GET
Status Code:101 Switching Protocols
---------------------------------------------
Response Headers
---------------------------------------------
Connection:upgrade
Date:Tue, 05 Dec 2017 01:22:45 GMT
Sec-WebSocket-Accept:cRxT/XcOpnsleDb1KdydWXOw+us=
Sec-WebSocket-Extensions:permessage-deflate;client_max_window_bits=15
Server:Apache-Coyote/1.1
Upgrade:websocket

客户端javascript代码：

<script type="text/javascript">  
      var websocket = null;  
      var principal = ‘1‘;
      var socketURL = ‘ws://‘ + window.location.host
            + ‘/j2ee-websocket/websocket/‘ + principal;
      //判断当前浏览器是否支持WebSocket  
      if(‘WebSocket‘ in window){  
          websocket = new WebSocket(socketURL);  
      }  
      else{  
          alert(‘Not support websocket‘);  
      }  
         
      //连接发生错误的回调方法  
      websocket.onerror = function(event){  
          alert("error");  
      };  
         
      //连接成功建立的回调方法  
      websocket.onopen = function(){  
          alert("open");  
      }  
         
      //接收到消息的回调方法  
      websocket.onmessage = function(event){  
          alert(‘recive : ‘ + event.data);  
      }  
         
      //连接关闭的回调方法  
      websocket.onclose = function(event){  
          alert("close");  
      }  
         
      //发送消息  
      function send(message){  
          websocket.send(message);  
      }  
  </script>

推荐：google/jquery-websocket代码 (http://code.google.com/p/jquery-websocket)

google/jquery-websocket增加了消息的类型，将消息拆分为{"type":"","message":""}。

这样更灵活，可以根据业务类型，定义type，如：通知，公告，广播，发文等...

<script type="text/javascript">
        var principal = ‘1‘;
        var socketURL = ‘ws://‘ + window.location.host
                + ‘/j2ee-websocket/websocket/‘ + principal;
        
        websocket = $.websocket(socketURL, {
            open : function() {
                // when the socket opens
                alert("open");
            },
            close : function() {
                // when the socket closes
                alert("close");
            },
            //收到服务端推送的消息处理
            events : {
                ‘radio‘ : function(event) {
                    console.info($.parseJSON(event.data));
                },
                ‘notice‘ : function(event) {
                    console.info($.parseJSON(event.data));
                },
                //... more custom type of message
            }
        });
        
        //发送消息  
        function send() {
            websocket.send(‘radio‘, " hello,this msg from client request");
        }
    </script>