快捷導(dǎo)航

在vue中使用SockJS實(shí)現(xiàn)webSocket通信的過程

更新時(shí)間：2018年08月29日 08:24:25 作者：慢思考快行動(dòng)

最近接到一個(gè)業(yè)務(wù)需求,需要做一個(gè)聊天信息的實(shí)時(shí)展示的界面,下面小編把實(shí)現(xiàn)過程記錄下來(lái)，對(duì)vue中使用SockJS實(shí)現(xiàn)webSocket通信的相關(guān)知識(shí)感興趣的朋友一起看看吧

最近接到一個(gè)業(yè)務(wù)需求,需要做一個(gè)聊天信息的實(shí)時(shí)展示的界面,這就需要和服務(wù)器端建立webSocket連接,從而實(shí)現(xiàn)數(shù)據(jù)的實(shí)時(shí)獲取和視圖的實(shí)時(shí)刷新.在此將我的實(shí)現(xiàn)記錄下來(lái),希望可以給有同樣需求的人一些幫助.廢話少說,下面我就來(lái)講一下我的實(shí)現(xiàn)過程:

socksjs

•客戶端和服務(wù)器端api盡可能簡(jiǎn)潔，盡量靠近websocket api
•支持服務(wù)端擴(kuò)展和負(fù)載均衡技術(shù)
•傳輸層應(yīng)該全面支持跨域通信
•如果受到代理服務(wù)器的限制，傳輸層能優(yōu)雅地從一種方式回退到另一種方式
•盡可能快地建立連接
•客戶端只是純粹的JavaScript，不需要flash
•客戶端JavaScript必須經(jīng)過嚴(yán)格的測(cè)試
•服務(wù)器端代碼盡可能簡(jiǎn)單，降低用另一種語(yǔ)言重寫server的代價(jià)

前提

要進(jìn)行文章中的代碼的測(cè)試,需要服務(wù)端端開發(fā)人員配合你,提供相關(guān)的通信接口.來(lái)完成客戶端和服務(wù)端的通信.實(shí)現(xiàn)通信,我們需要用到另個(gè)模塊 sockjs-client 模塊和 stomjs 模塊,接下來(lái)我會(huì)先對(duì)這兩個(gè)模塊做一個(gè)簡(jiǎn)單的介紹.

關(guān)于實(shí)時(shí)通信

實(shí)現(xiàn)實(shí)時(shí)通信,我們通常有三種方法:

ajax輪詢 ajax輪詢的原理非常簡(jiǎn)單,讓瀏覽器每隔幾秒就像服務(wù)器發(fā)送一個(gè)請(qǐng)求,詢問服務(wù)器是否有新的信息.

http 長(zhǎng)輪詢長(zhǎng)輪詢的機(jī)制和ajax輪詢差不多,都是采用輪詢的方式,不過才去的是阻塞模型(一直打電話,沒收到就不掛電話),也就是說,客戶端發(fā)起鏈接后,如果沒有消息,就一直不返回response給客戶端.知道有新的消息才返回,返回完之后,客戶端再此建立連接,周而復(fù)始.

WebSocket WebSocket是HTML5開始提供的一種在單個(gè)TCP連接上進(jìn)行全雙工通訊的協(xié)議.在WebSocket API中，瀏覽器和服務(wù)器只需要做一個(gè)握手的動(dòng)作，然后，瀏覽器和服務(wù)器之間就形成了一條快速通道。兩者之間就直接可以數(shù)據(jù)互相傳送,不需要繁瑣的詢問和等待. 從上面的介紹很容易看出來(lái),ajax輪詢和長(zhǎng)輪詢都是非常耗費(fèi)資源的,ajax輪詢需要服務(wù)器有很快的處理速度和資源,http長(zhǎng)輪詢需要有很高的并發(fā),也就是同時(shí)接待客戶的能力.而WebSocket,只需要經(jīng)過一次HTTP請(qǐng)求,就可以與服務(wù)端進(jìn)行源源不斷的消息收發(fā)了.

sockjs-client

sockjs-client 是從SockJS中分離出來(lái)的用于客戶端使用的通信模塊.所以我們就直接來(lái)看看SockJS. SockJS是一個(gè)瀏覽器的JavaScript庫(kù),它提供了一個(gè)類似于網(wǎng)絡(luò)的對(duì)象,SockJS提供了一個(gè)連貫的,跨瀏覽器的JavaScriptAPI,它在瀏覽器和Web服務(wù)器之間創(chuàng)建了一個(gè)低延遲,全雙工,跨域通信通道. 你可能會(huì)問,我為什么不直接用原生的WebSocket而要使用SockJS呢?這得益于SockJS的一大特性,一些瀏覽器中缺少對(duì)WebSocket的支持,因此，回退選項(xiàng)是必要的，而Spring框架提供了基于SockJS協(xié)議的透明的回退選項(xiàng)。SockJS提供了瀏覽器兼容性,優(yōu)先使用原生的WebSocket,如果某個(gè)瀏覽器不支持WebSocket,SockJS會(huì)自動(dòng)降級(jí)為輪詢.

stomjs

STOMP(Simple Text-Orientated Messaging Protocol) 面向消息的簡(jiǎn)單文本協(xié)議; WebSocket是一個(gè)消息架構(gòu),不強(qiáng)制使用任何特定的消息協(xié)議,它依賴于應(yīng)用層解釋消息的含義. 與HTTP不同,WebSocket是處在TCP上非常薄的一層,會(huì)將字節(jié)流轉(zhuǎn)化為文本/二進(jìn)制消息,因此,對(duì)于實(shí)際應(yīng)用來(lái)說,WebSocket的通信形式層級(jí)過低,因此，可以在 WebSocket 之上使用STOMP協(xié)議，來(lái)為瀏覽器和 server間的通信增加適當(dāng)?shù)南⒄Z(yǔ)義。

STOMP與WebSocket 的關(guān)系:

HTTP協(xié)議解決了web瀏覽器發(fā)起請(qǐng)求以及web服務(wù)器響應(yīng)請(qǐng)求的細(xì)節(jié),假設(shè)HTTP協(xié)議不存在,只能使用TCP套接字來(lái)編寫web應(yīng)用,你可能認(rèn)為這是一件瘋狂的事情;
直接使用WebSocket(SockJS)就很類似于使用TCP套接字來(lái)編寫web應(yīng)用,因?yàn)闆]有高層協(xié)議,就需要我們定義應(yīng)用間發(fā)送消息的語(yǔ)義,還需要確保連接的兩端都能遵循這些語(yǔ)義;
同HTTP在TCP套接字上添加請(qǐng)求-響應(yīng)模型層一樣,STOMP在WebSocket之上提供了一個(gè)基于幀的線路格式層,用來(lái)定義消息語(yǔ)義.

代碼實(shí)現(xiàn)

代碼中除了最基本的連接,還設(shè)置了一個(gè)定時(shí)器,每隔十秒發(fā)送一條數(shù)據(jù)到服務(wù)器端,如果發(fā)生錯(cuò)誤,catch這個(gè)錯(cuò)誤,重新建立連接.

// 安裝并引入相關(guān)模塊
import SockJS from 'sockjs-client'; 
import Stomp from 'stompjs';
export default {
 data() {
  return {
  dataList: []
  };
 },
 mounted:function(){
  this.initWebSocket();
 },
 beforeDestroy: function () {
  // 頁(yè)面離開時(shí)斷開連接,清除定時(shí)器
  this.disconnect();
  clearInterval(this.timer);
 },
 methods: {
  initWebSocket() {
  this.connection();
  let self = this;
  // 斷開重連機(jī)制,嘗試發(fā)送消息,捕獲異常發(fā)生時(shí)重連
  this.timer = setInterval(() => {
   try {
   self.stompClient.send("test");
   } catch (err) {
   console.log("斷線了: " + err);
   self.connection();
   }
  }, 5000);
  },
  removeTab(targetName) {
  console.log(targetName)
  },
  connection() {
  // 建立連接對(duì)象
  this.socket = new SockJS('http://xxxxxx:8089/ws');//連接服務(wù)端提供的通信接口，連接以后才可以訂閱廣播消息和個(gè)人消息
  // 獲取STOMP子協(xié)議的客戶端對(duì)象
  this.stompClient = Stomp.over(this.socket);
  // 定義客戶端的認(rèn)證信息,按需求配置
  var headers = {
   login: 'mylogin',
   passcode: 'mypasscode',
   // additional header
   'client-id': 'my-client-id'
  };
  // 向服務(wù)器發(fā)起websocket連接
  this.stompClient.connect(headers,(frame) => {
   this.stompClient.subscribe('/topic/chat_msg', (msg) => { // 訂閱服務(wù)端提供的某個(gè)topic
   consolel.log(msg.body); // msg.body存放的是服務(wù)端發(fā)送給我們的信息
   });
  }, (err) => {
   
  });

  },
  disconnect() {
  if (this.stompClient != null) {
   this.stompClient.disconnect();
   console.log("Disconnected");
  }
  }
 }
};

總結(jié)

以上所述是小編給大家介紹的在vue中使用SockJS實(shí)現(xiàn)webSocket通信的過程，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: