WebSocket前后台交互


其實對於前后台交互有很多種方法(只列舉我知道的,嘻嘻):

  1:from 表單:

    使用場景——小信息量提交給后台

  2:ajax(跨域的話用jsonp):

    可以進行多量的前后台信心傳遞;

    但實時性不高,不適合要求實時性的場景;例如qq聊天

  3:webscoket:

    可以進行大量的前后台信息傳遞,

    實時性也十分良好;主要應用場景為聊天場景;

一:websocket

  1:創建一個websocket實例:

     var socket = new WebSocket(socketUrl); socketUrl代表的是請求的地址,類似於ajax的url

 

  2:鏈接服務器進行前后台交互以及事件處理:

     socket.onopen = function(event) { 

       //想要驗證是否連接成功可以給后台發一個消息
        socket.send('我已經連接成功了么'); 

      // 這個事件監聽,可以監聽后台返回來給你的消息,即str就是
        socket.onmessage = function(str) { 
           console.log(str); 
        }; 

      // 監聽Socket的關閉
        socket.onclose = function(str) { 
            console.log(str); 
        };

      // 關閉Socket.... (需要的時候把注釋去掉)
       //socket.close() ;

    };

其實websocket用起來特別的容易,但是有一個缺點就是ie不兼容,那怎么辦呢,還有一個辦法就是socket.io.js,它看起來非常像客戶端API,建立客戶端Socket.IO;

二:帶Socket.IO的WebSocket:

  Socket.IO可以從GitHub下載,可以把socket.io.js文件包含到頁面中:

  <script src="js/socket.io.js"></script>

  此時,Socket.IO在此頁面上是有效的,是時候創建Socket了:

  1://創建Socket.IO實例,建立連接

  var socket = new io.Socke(bollmskn);//bollmskn代表的是請求地址,類似ajax的url

  socket.connect();

  2:// 連接監聽

  socket.on('connect',function() { 
    console.log('服務器已連接!'); // 這里可以做一些事件的處理啊,什么的比如做一個提示啊什么的;
  });

  3://建立一個事件監聽,監聽后台返回來的數據

  socket.on('message',function(data) { 
    console.log('這是后台返回來的消息',data); 
  });

  4:// 通過Socket發送一條消息到服務器

  function sendMessageToServer(message) { 
    socket.send(message); 
  }

  5// 添加一個關閉連接的監聽器

  socket.on('disconnect',function() { 
    console.log('鏈接已關閉!'); 
  });

Socket.IO還提供了由本地WebSocket API提供的普通連接、斷開連接、消息事件。Socket還提供了封裝每個事件類型的方法。如果你們后台封裝了特定的事件方法就按照你們的自己來,這個你們前后台自己商量着來;

拜拜,周末愉快!!!

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM