websocket實現原理

先來了解一下websocket的應用場景？

聊天 客服 在線咨詢 即時通訊 喜歡使用websocket來實現

即時通訊實現原理有兩種：

1.ajax輪詢（使用定時器，每隔一段時間發送ajax到后台）

 

舉個例子吧：

用戶A 提交一條消息為：你吃飯了沒？

服務器會存：用戶A 你吃飯了沒

當用戶B向后台發送請求的時候，就能從服務器拿到用戶A給她發送的信息

以上就是ajax輪詢，定時器一直發送ajax，顯然性能上不是很好，所以websockt應運而生

2.WebSocket（常用）

WebSocket是原生js就支持的，前端需要 鏈接websocket 后端也需要鏈接 兩個才可以通訊 所以這個事 必須前后端配合

Websocket是應用層第七層上的一個應用層協議，WebSocket 的最大特點就是，服務器可以主動向客戶端推送信息，客戶端也可以主動向服務器發送信息，是真正的雙向平等對話。

HTTP 有 1.1 和 1.0 之說，也就是所謂的 keep-alive ，把多個 HTTP 請求合並為一個，但是 Websocket 其實是一個新協議，跟 HTTP 協議基本沒有關系，只是為了兼容現有瀏覽器，所以使用了 HTTP 。

客戶端首先會向服務端發送一個 HTTP 請求，包含一個 Upgrade 請求頭來告知服務端客戶端想要建立一個 WebSocket 連接

WebSocket的特點：

• 建立在 TCP 協議之上，服務器端的實現比較容易。

• 與 HTTP 協議有着良好的兼容性。默認端口也是80和443，並且握手階段采用 HTTP 協議，因此握手時不容易屏蔽，能通過各種 HTTP 代理服務器。

• 數據格式比較輕量，性能開銷小，通信高效。

• 可以發送文本，也可以發送二進制數據。

• 沒有同源限制，客戶端可以與任意服務器通信。

• 協議標識符是ws（如果加密，則為wss），服務器網址就是 URL。

  initwebsocket: function() {
      var url =
        "ws://" +
        location.host +
        ":8080/chat?id=" +
        this.$store.state.userInfo.id +
        "&token=" +
        this.$store.state.userInfo.token;
            this.webSocket = new WebSocket(url);
            // 通過 onmessage 事件來接收服務器返回的數據
      this.webSocket.onmessage = function(evt) {
        if (evt.data.indexOf("}") > -1) {
                    //這里處理接收到的消息
                    console.log(evt.data)
          this.$store.dispatch("reciveMessage", JSON.parse(evt.data));
        } else {
          //心跳消息
          console.log("recv<==" + evt.data);
        }
      }.bind(this);
      this.webSocket.onclose = function(evt) {
        console.log(evt.data); //關閉websocket連接事件處理
      };
      this.webSocket.onerror = function(evt) {
        console.log(evt.data); //websocket錯誤處理
      };
    },

這是我實際項目中的websocket代碼

websocket的五步法：

第一步：new WebSocket("ws://localhost:9998/echo"); 　打開一個websocket

第二步：onopen　：連接建立時觸發

第三步：onmessage：客戶端接收服務端數據時觸發

第四步:onerror:通信發生錯誤時觸發

第五步：close：連接關閉時觸發

現在有一個好用的socket.io封裝了websocket

使用如下：

 

小生畢畢：一般公司里做這類需求會去買，因為自己寫的話bug太多且功能沒有買的完善

但是該掌握的技術還是要掌握的！！！