js学习之随心所欲

web端实时通讯

2019-05-13  本文已影响1人  摆渡侠

一.comet(彗星-隐意:更长的ajax请求)

1.短轮询(不算comet,因为它很短,单纯想总结到一起):xhr + setInterval

      function getProgress(){
          var xhr = new XMLHttpRequert();
             xhr.send();
             xhr.onload = function(){
                 if(xhr.status == 200){
                    //todo
                 }
             }
      }

      setInterval(function(){

         getProgress();

      },1000)

2.长轮询:xhr + callback

     function getProgress(){
          var xhr = new XMLHttpRequert();
             xhr.send();
             xhr.onreadystatechange = function(){
                 if(xhr.status == 200){
                    //todo
                    getProgress();
                 }
             }
      }
      

3.流 xhr

      function creatStreamingClient(url, progress, finished){
              var xhr = new XMLHttpRequest(),
                  received = 0;
              xhr.open('get');
              xhr.onreadystatechange = function(){
                  var result;
                  if(xhr.readystate == 3){
                      result = xhr.responseText.substring(received);

                      received += result.length;

                      progress(result);
                  } else if(xhr.readyState == 4){
                      finish(xhr.responseText);
                  }
              };

              xhr.send();
              reture xhr;
          }

          var client = creatStreamingClient('xxx.php',
              function(data){ // todo },
              function(data){ // todo }
          )
          

二.服务器发送事件SSE

    var source = new EventSource('xxx.php');
    source.onmessage = function(event){
        var data = event.data;
        //todo
    }
    
  1. source 三个事件提供监听:
  2. open 建立连接时触发。
  3. message 从服务器接收到新数据时触发
  4. error 无法建立连接时触发。

注意

  1. 如果想主动终止连接,可以调用source.close();
  2. 如果后台同时返回一个数据 event.data => 'foo',如果为多个数据 event.data => 'foo\nfoo2'。
  3. SSE同时支持短轮训、长轮训、http流,还能在断开连接之后,确定何时重新连接
  4. MIME类型必须为 text/event-stream
  5. 协议类型为http https协议
  6. 后台还可以设置一个id 值,id可以对应后台一个服务,如果连接断开,还可以根据id来恢复本次事件流。

三.Web Sockets(双全工、双向通信)

    var socket = new WebSocket('ws://www.test.com/xxx.php');
    socket.onopen = function(){
        if (socket.readyState === WebSocket.OPEN) {
           socket.send('helloWorld');
        }
    }
    socket.onmessage = function(event){
        var data = event.data;
        //todo
    }
    socket.onerror = function() {
       cosnole.log('WebSocket error!')
    }
    socket.onclose = function(event) {
       let clean = event.wasClean // 是否已经关闭 
       let code = event.code // 服务器返回的数值状态码。 
       let reason = event.reason //服务器返回的消息。
    }

注意

  1. 只有支持web socket的服务器才能实现这种协议传输(ws:// wss:// 同类比较 http:// https://)
  2. 如果要传到服务端的是复杂数据格式,要先调用JSON.stringify()

总结

  1. 如果想实现类似进度条这种功能(重视定时反馈到用户),可以选择【短轮询】
  2. 如果想实现,类似股票实时数据获取(可以不定时,但是不能间断获取数据),可以使用【流、SSE】
  3. 如果想实现即时聊天系统(重视双向数据实时传递),可以选择【web sockets】,如果是常规服务器, 也可以XHR + SSE 配合使用实现双向通信。
上一篇 下一篇

猜你喜欢

热点阅读