版權聲明：本文為博主原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接和本聲明。
本文鏈接：https://blog.csdn.net/maidu_xbd/article/details/100730667
WebSocket與HTTP均建立在TCP之上，通過TCP協議傳輸數據；都是可靠性傳輸協議；都是應用層協議。
HTTP--Hyper Text Transfer Protocol（超文本傳輸協議）
HTTP是一個基於TCP/IP通信協議來傳遞數據，用於從萬維網（WWW:World Wide Web ）服務器傳輸超文本到本地瀏覽器的傳送協議。瀏覽器向服務器發出HTTP請求，服務器將數據返回給客戶端的瀏覽器。
HTTP 請求可以使用多種請求方法。HTTP1.0 定義了三種請求方法： GET, POST 和 HEAD方法
常見的狀態碼：
200 - 請求成功
301 - 資源（網頁等）被永久轉移到其它URL
404 - 請求的資源（網頁等）不存在
500 - 內部服務器錯誤
這種方式的缺點通信只能由客戶端發起，做不到服務器主動向客戶端推送信息
WebSocket
WebSocket 是 HTML5 提供的一種在單個 TCP 連接上進行全雙工通訊(信息能夠同時雙向傳送)的協議。它使得客戶端和服務器之間的數據交換變得更加簡單，允許服務端主動向客戶端推送數據。在 WebSocket API 中，瀏覽器和服務器只需要完成一次握手，兩者之間就直接可以創建持久性的連接，並進行雙向數據傳輸。WebSocket 協議能更好的節省服務器資源和帶寬，並且能夠更實時地進行通訊。
創建 WebSocket 對象,第一個參數 url, 指定連接的 URL。第二個參數 protocol 是可選的，指定了可接受的子協議。
//第一個參數 url, 指定連接的 URL。第二個參數 protocol 是可選的，指定了可接受的子協議。
var Socket = new WebSocket(url, [protocol] );
WebSocket 對象的相關事件 描述
Socket.onopen 連接建立時觸發
Socket.onmessage 客戶端接收服務端數據時觸發
Socket.onerror 通信發生錯誤時觸發
Socket.onclose 連接關閉時觸發
WebSocket 對象的相關方法 描述
Socket.send() 使用連接發送數據
Socket.close() 關閉連接
// 創建 WebSocket 對象
let socket = new WebSocket("ws://localhost:8000/xxx");
socket.onmessage = res => {
// 客戶端接收服務器端數據
if (JSON.parse(res.data).state === "200") {
// do something...
}
this.sendImg(socket);
};
// 使用onopen時間建立連接
socket.onopen = res => {
// 使用send()方法發送數據
socket.send(JSON.stringify({ name: this.information.name }));
};
methods: {
// 發送圖片數據
sendImg(socket) {
socket.send(
JSON.stringify({
img: this.imgData
})
);
}
}
Websocket優點：
（1）HTTP每次都需要攜帶完整頭部，其中真正有效的數據可能只是很小的一部分，這樣會浪費很多的帶寬等資源。使用WebSocket，客戶端與服務端進行數據交換時，服務端到客戶端的數據包頭只有2到10字節，客戶端到服務端需要加上另外4字節的掩碼，數據格式輕量，性能開銷小，實時性更好。
（2）HTTP只能由客戶端發送強求，Websocket具有雙向通信功能，服務器可以主動向客戶端推送信息，客戶端也可以主動向服務器發送信息。
（3）AJAX輪詢（客戶端定時以固定的間隔向服務端發送請求）與Long Polling長輪詢（客戶端和瀏覽器保持一個長連接，等服務端有消息返回，斷開。然后再重新連接，等服務端有消息返回，斷開。然后再重新連接.......）。WebSocket一次握手，持久連接，以及主動推送的特點可以解決上邊的問題，又不至於損耗性能
（4）Websocket支持持久連接，HTTP不支持持久連接。
————————————————
版權聲明：本文為CSDN博主「maidu_xbd」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/maidu_xbd/article/details/100730667