最近有專案需求要用到websocket,剛開始以為很簡單，但是隨著遇到問題，深入了解，才知道websocket並不是想像中的那麼簡單，這篇文章主要是考慮websocket在客戶端的使用。
1.http與websockethttp超文本傳輸協議，大家都很熟悉，http有1.0、1.1、 2.0幾個版本，從http1.1起，預設都開啟了Keep-Alive，保持連線持續性，簡單地說，當一個網頁開啟完成後，客戶端和伺服器之間用於傳輸http資料的TCP連線不會關閉，如果客戶端再次造訪這個伺服器上的網頁，會繼續使用這一已經建立的連接，這樣就降低了資源的消耗優化性能，但是Keep-Alive也是有時間限制的，還有一個客戶端只能主動發起請求才能獲取返回數據，並不能主動接收後台推送的數據，websocket便應運而生。
websocket 是html5新增加特性之一，目的是瀏覽器與服務端建立全雙工的通信方式，解決http 請求-響應帶來過多的資源消耗，同時對特殊場景應用提供了全新的實現方式，例如聊天、股票交易、遊戲等對即時性要求較高的產業領域。
http與websocket都是基於TCP(傳輸控制協定)的，websocket可以看做是對http協定的一個補充
2.SockJsSockJS是一個JavaScript函式庫，為了回應許多瀏覽器不支援WebSocket協定的問題，設計了備選SockJs。 SockJS 是WebSocket 技術的一種模擬。 SockJS會盡可能對應WebSocket API，但如果WebSocket 技術不可用的話，會自動降為輪詢的方式。
3.StompjsSTOMP- Simple Text Oriented Message Protocol-面向訊息的簡單文字協定。
SockJS 為WebSocket 提供了備選方案。但無論哪種場景，對於實際應用來說，這種通訊形式層級過低。 STOMP協議，為瀏覽器和server 間的通訊增加適當的訊息語意。
4.WebSocket、SockJs、STOMP三者關係簡而言之，WebSocket 是底層協議，SockJS 是WebSocket 的替代方案，也是底層協議，而STOMP 是基於WebSocket（SockJS）的上層協議。
1.HTTP協定解決了web 瀏覽器發起請求以及web 伺服器回應請求的細節，假設HTTP 協定並不存在，只能使用TCP 套接字來編寫web 應用程式。
2.直接使用WebSocket（SockJS） 就很類似於使用TCP 套接字來編寫web 應用，因為沒有高層協議，就需要我們定義應用間所發送訊息的語義，還需要確保連接的兩端都能遵循這些語義；
3.同HTTP在TCP 套接字上新增請求-回應模型層一樣，STOMP在WebSocket 之上提供了一個基於訊框的線路格式層，用來定義訊息語意；
5.使用實例安裝sockjs-client、stompjs；在這裡要注意一下，我在stompjs: ^2.3.3這個版本發現，引入stompjs會報一個net模組找不到，需要在stompjs模組根目錄下執行npm install，這個是個奇葩的問題。
引入模組：
import SockJS from 'sockjs-client';import Stomp from 'stompjs';// 連接函數let number = 1;function reconnect(socketUrl) { let url = `${BASE_URL}/ws/sdfpoint`; //連接位址/ / 建立連線物件（尚未發起連線） let socket = new SockJS(url); // 取得STOMP子協定的客戶端物件let stompClient = Stomp.over(socket); // 向伺服器啟動websocket連線並傳送CONNECT幀stompClient.connect( {},//可新增客戶端的認證資訊function connectCallback (){//連線成功的回呼函數//訂閱頻道stompClient.subscribe('/topic/display/control', function(data){ if (data) { console.log('subscribe data',data); } }) }, function errorCallBack(error){ //連接失敗時再次呼叫函數number += 1; if(number<=10){ reconnect( url); } console.log('error',error); } ) }總結：websocket 的實作客戶端看起來比較簡單，但是需要與後台進行良好的配合和調試才能達到最佳效果。透過SockJS、Stomp來進行瀏覽器相容，增加訊息語義，增強了可用性。要徹底搞懂websocket，我們還需要深入了解一些底層的原理以及相關的知識。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。