Websocket的介紹以及基本使用

1.為什麼要選擇Websocket而不選擇Http?

首先明确一點，Websocket和Http都屬于應用層協定。

其次，一個用戶端要将資訊發送給另外一個用戶端是需要經過伺服器的，由伺服器代為轉發。

而Http是基于請求------->響應模型的，即伺服器不會主動給用戶端發送，隻是相應它的請求。

Websocket協定是基于TCP協定的一種新的網絡協定，它實作了浏覽器與伺服器全雙工（full-duplex）通信，即允許伺服器主動發送資訊給用戶端

Websocket是一種持久協定，Http是非持久協定

現在很多網站都有實時推送的需求，比如聊天，客服咨詢等

早期沒有websocket時，通過ajax輪詢，由于http請求，伺服器無法給浏覽器主動發送資料，是以需要浏覽器定時的給伺服器答複請求（例如1s一次），伺服器把最新的資料響應給浏覽器，這種模式的缺點就是浪費性能和資源。（每次響應請求都需要三次握手）

Websocket的介紹以及基本使用

（圖檔來源菜鳥教程）

2.在H5中，Websocket的基本使用

1）Websocket在浏覽器端的使用，H5種直接提供了Websocket的API，故可以直接使用

Websocket使用教程位址

Websocket的介紹以及基本使用

// 1.建立Websocket的連接配接（參數為WebSocket的服務位址）
var socket = new WebSocket('ws://echo.websocket.org')  //此處的位址為官方提供的位址,你發啥它回啥

//2.open，當和websocket服務連接配接成功的時候觸發
socket.addEventListener('open', function(){

                div.innerHTML = '連接配接服務成功了'
            })

//3.主動給websocket服務發送消息
button.addEventListener('click', function(){
                var value = input.value
                socket.send(value)

            })
/*
WebSocket的方法
Socket.send()    //使用連接配接發送資料
Socket.close()   //關閉連接配接
*/

//4.接受websocket的消息
socket.addEventListener('message', function(e){
                console.log(e.data)
                div.innerHTML = e.data
            })
            
//5.websocket斷開的時候
socket.addEventListener('close', function(){
                div.innerHTML = '伺服器斷開'
            })

3.Websocket和Socket啥關系？

1）Socket是套接字，Socket是在應用層和傳輸層之間的一個抽象層，是一組接口，它把TCP/IP層複雜的操作抽象為幾個簡單的接口供應用層調用以實作程序在網絡中通信。

Websocket的介紹以及基本使用

總而言之，Http和Socket啥關系，Websocket就和Socket啥關系。Websocket和Socket，就像Java和JavaScript一樣，沒有太大的關系。