WebSocket 理論知識整理

最近工做用到websocket, 以前雖然也用到了一些簡單的東西，可是並無認真整理一下。因此此次準備瞭解一下WebSocket.

WebSocket產生的背景

WebSocket是一種在單個TCP鏈接上進行全雙工通訊的協議. 這意味着雙方能夠同時進行通訊和交換數據

對於咱們都很是熟悉的HTTP協議，通訊只能經過客戶端發起，沒法作到服務器主動向客戶端推送消息
這樣若是在服務端出問題的時候，客戶端想要知道就比較麻煩，笨的辦法就是咱們採用輪詢的方式，每隔一段時間問一下服務端：「喂，你還在麼，你怎麼樣了，還沒死吧？」 從而來肯定服務端的一些狀態變化。

關於輪詢：其實就是客戶端在指定的時間間隔向服務器發送請求

可是咱們都知道這種笨辦法是很是浪費資源的。而WebSocket也能夠說就是這樣誕生了

爲何咱們須要web socket

Internet was conceived to be a collection of Hypertext Mark-up Language (HTML) pages linking one another to form a conceptual web of information. During the course of time, static resources increased in number and richer items, such as images and began to be a part of the web fabric.

Server technologies advanced which allowed dynamic server pages - pages whose content was generated based on a query.

Soon, the requirement to have more dynamic web pages lead to the availability of Dynamic Hypertext Mark-up Language (DHTML). All thanks to JavaScript. Over the following years, we saw cross frame communication in an attempt to avoid page reloads followed by HTTP Polling within frames.

However, none of these solutions offered a truly standardized cross browser solution to real-time bi-directional communication between a server and a client.

This gave rise to the need of Web Sockets Protocol. It gave rise to full-duplex communication bringing desktop-rich functionality to all web browsers.

WebSocket 長啥樣 ？

咱們仍是用HTTP來對比，咱們一般訪問一個網站如google,咱們會在瀏覽器中輸入：
http://www.google.com
或者：
https://www.google.com

其實webSocket和http也很是相似，以下圖：

 

web socket 是HTML5 規範的一部分， 容許網頁和遠程主機之間進行全雙工通訊，該協議實現如下好處：

經過單個鏈接而不是兩個鏈接使用全雙工減小沒必要要的網絡流量和延遲
經過代理和防火牆進行流式傳輸，同時支持上游和下游通訊

websocket 和http 對比

websockets 角色

Events and Actions

有四個主要的API events
Open
Message
Close
Error

每個事件都分別經過實現onopen onmessage onclose 和onerror函數來處理

Open
一旦客戶端和服務器之間創建了鏈接，就會從web socket 實例觸發open 事件，這個被稱爲客戶端和服務器之間的初始握手
一旦創建鏈接就會觸發的事件稱爲onopen事件

Message
一般發生在服務器發送一些數據的時候觸發該消息事件
服務器發送給客戶端的消息能夠包括純文本消息，二進制數據或者圖像。可是不管哪一種數據都會觸發onmessage函數

close
該事件標誌着服務器和客戶端之間通訊結束
當觸發onclose事件以後能夠關閉鏈接，同時標記中通訊結束，服務器和客戶端之間沒法進一步傳輸消息

error
onerror 事件以後老是隨後終止鏈接

Actions

當咱們想要發生某事件的時候作一些操做，經過用戶顯示調用的方法有：
send()
close()

參考鏈接：http://www.ruanyifeng.com/blog/2017/05/websocket.html
https://www.tutorialspoint.com/websockets/index.htm