HTML5中的webSocket、ajax、http
本文原鏈接：https://cloud.tencent.com/developer/article/1115496
https://cloud.tencent.com/developer/article/1193011
webSocket與ajax、web
- 一、webSocket與ajax
- 1、ajax
- 2、webSocket
- 二、webSocket API
- 1、事件
- 2、方法
- 3、屬性
- 4、常量
- 三、webSocket與HTTP
- 四、webSocket原理
- 五、webSocket的作用
- 1、ajax輪詢：
- 2、long poll
- 3、webSocket
- 六、Socket.io
先看一個有道釋義：
其實釋義的挺形象的，下面我來一一解釋哈：
1、聊天室：webSocket有名的應用就是聊天室了；
2、服務：webSocket提供客戶端請求的服務器和服務；
3、套接字：源IP地址和目的IP地址以及源端口號和目的端口號的組合叫套接字，webSocket就是服務端和客戶端的結合；
4、協(xié)議：webSocket是基于TCP的一種新的網(wǎng)絡協(xié)議。
一、webSocket與ajax
作為一個碼了還算久代碼的前端，說起webSocket，腦子里最先閃現(xiàn)的當然就是ajax ajax ajax......ajax是啥，ajax剛出來時，可謂轟動一時，讓我們愉快地告別那種提交一個表單必須得填完所有信息，然后再把數(shù)據(jù)轉給服務器驗證，結果發(fā)現(xiàn)有一個小小的輸入框里輸錯了信息，然后又改掉重新提交走著重復的路的痛苦時代，所以它最大的貢獻就是局部刷新。當然，不是說有了webSocket，它就out了，ajax現(xiàn)在依舊好用。下面稍微比較了下ajax和webSocket：
1、ajax
（1）瀏覽器主動發(fā)送消息給服務器；
（2）非實時數(shù)據(jù)交互（異步，局部刷新）。
原生寫法：
四部曲：ajax對象、建立連接、發(fā)送請求、獲取相應。
更通俗的用打電話來比喻，那就是：電話、撥號、說話、聽到對方回應。demo
//創(chuàng)建一個ajax對象（想打電話，首先得有電話這個對象）var XHR = null; if (window.XMLHttpRequest) { // 非IE內(nèi)核 XHR = new XMLHttpRequest(); } else if (window.ActiveXObject) { // IE內(nèi)核,早期IE的版本寫法不同 XHR = new ActiveXObject("Microsoft.XMLHTTP"); } else { XHR = null; }
if(XHR){ //建立連接（撥號） XHR.open("GET", "ajaxServer.action"，true); //發(fā)送請求（說話） XHR.send(); //獲取響應（聽到對方回應） XHR.onreadystatechange = function () { // readyState值說明 // 0,初始化,XHR對象已經(jīng)創(chuàng)建,還未執(zhí)行open // 1,載入,已經(jīng)調(diào)用open方法,但是還沒發(fā)送請求 // 2,載入完成,請求已經(jīng)發(fā)送完成 // 3,交互,可以接收到部分數(shù)據(jù)
// 4,交互完畢 // status值說明 // 200:成功 // 404:沒有發(fā)現(xiàn)文件、查詢或URl // 500:服務器產(chǎn)生內(nèi)部錯誤 if (XHR.readyState == 4 && XHR.status == 200) { // 這里可以對返回的內(nèi)容做處理 // 一般會返回JSON或XML數(shù)據(jù)格式 console.log(XHR.responseText); // 主動釋放,JS本身也會回收的 XHR = null; } }; }
JQuery寫法（so easy，媽媽再也不用擔心我的學習啦）：
$.ajax({type:"post", url:url, async:true, data:params, dataType:"json", success:function(res){ console.log(res); }, error:function(jqXHQ){ alert("發(fā)生錯誤:"+jqXHQ.status); } });?
2、webSocket
（1）實現(xiàn)了瀏覽器與服務器全雙工(full-duplex)通信——允許服務器主動發(fā)送信息給客戶端；
（2）實時數(shù)據(jù)交互。
WebSocket 握手過程
WebSocket 協(xié)議本質(zhì)上是一個基于 TCP 的協(xié)議，WebSocket
連接與 TCP 連接的建立過程類似[4]。但與傳統(tǒng)的基于 TCP 連 接的協(xié)議有所不同的是 WebSocket 協(xié)議需要從 HTTP 協(xié)議“過 渡”而來，而這個“過度”過程也被稱為 WebSocket 協(xié)議的握手 過程。因此想要建立基于 WebSocket 的 Web 應用必須首先了解 WebSocket 協(xié)議的握手機制，如圖 2 給出了 WebSocket 協(xié)議握手 過程的示意圖。
首先由瀏覽器客戶端向服務器發(fā)起 WebSocket 握手請求報 文，這個報文是基于 HTTP 協(xié)議的，它告訴服務器客戶端想要升 級當前的 HTTP 協(xié)議為 WebSocket 協(xié)議。服務器收到客戶端的 WebSocket 握手請求報文之后會對報頭進行解析，如果服務器 理解客戶端握手請求報頭并且滿足升級為 WebSocket 協(xié)議的條 件，便會向客戶端發(fā)送握手應答報文，這個應答報文同樣是基于 HTTP 協(xié)議的。客戶端收到服務器的應答報文后會對該報文進 行一次驗證，驗證成功之后便會成功升級為 WebSocket 協(xié)議，如 果驗證失敗客戶端將會主動斷開連接。建立了 WebSocket 連接 之后，雙方便可以進行全雙工通信，?
WebSocket 握手過程與 TCP 握手過程類似，但是 WebSocket 協(xié)議握手采用了更加簡潔的方式。
相對于傳統(tǒng)的 TCP 握手，WebSocket 握手協(xié)議有以下明顯 的特點: 首先，WebSocket 整個握手過程只需要兩次握手，相對 于 TCP 的三次握手，WebSocket 簡化并且加入了自己的規(guī)則。 其次，WebSocket 握手協(xié)議是基于 HTTP 協(xié)議的，相對于字節(jié)流 的解析，ASCII 序列解析起來更加簡便。最后，WebSocket 握手 協(xié)議引入了隨機序列認證機制，易于實現(xiàn)。
兩次握手成功預示著雙方接下來將升級當前的 HTTP 協(xié)議 為 WebSocket 協(xié)議。WebSocket 握手請求報文的報頭部分除了 必須包含必要的 HTTP 字段[5]，還須遵循通用消息格式[RFC 822]，同時又要包含和 WebSocket 緊密聯(lián)系的字段[6]，如 Web- Socket 協(xié)議的版本信息、客戶端隨即生成的 Key、必要的 GET 請 求方法等。?
?
// Create WebSocket connection. var socket = new WebSocket('ws://localhost:8080'); //創(chuàng)建一個webSocket實例 // Connection opened socket.addEventListener('open', function (event) { //一旦服務端響應WebSocket連接請求，就會觸發(fā)open事件 socket.send('Hello Server!'); }); // Listen for messages socket.addEventListener('message', function (event) { //當消息被接受會觸發(fā)消息事件 console.log('Message from server', event.data); });?
二、webSocket API
既然上面寫了一部分代碼，那不如把API全都貼出來，哈哈哈。
首先，創(chuàng)建一個webSocket實例：
var socket = new WebSocket('ws://localhost:8080');然后再看下面的的API。
1、事件
（1）open
一個用于連接打開事件的事件監(jiān)聽器。當readyState的值變?yōu)?OPEN 的時候會觸發(fā)該事件。該事件表明這個連接已經(jīng)準備好接受和發(fā)送數(shù)據(jù)。這個監(jiān)聽器會接受一個名為"open"的事件對象。
socket.onopen = function(e) { console.log("Connection open..."); };或者：
socket.addEventListener('open', function (event) { console.log("Connection open..."); });（2）message
一個用于消息事件的事件監(jiān)聽器，這一事件當有消息到達的時候該事件會觸發(fā)。這個Listener會被傳入一個名為"message"的?MessageEvent?對象。
socket.onmessage = function(e) { console.log("message received", e, e.data); };（3）error
當錯誤發(fā)生時用于監(jiān)聽error事件的事件監(jiān)聽器。會接受一個名為“error”的event對象。
socket.onerror = function(e) { console.log("WebSocket Error: " , e); };（4）close
用于監(jiān)聽連接關閉事件監(jiān)聽器。當 WebSocket 對象的readyState 狀態(tài)變?yōu)?CLOSED 時會觸發(fā)該事件。這個監(jiān)聽器會接收一個叫close的?CloseEvent?對象。
socket.onclose = function(e) { console.log("Connection closed", e); };2、方法
（1）send
通過WebSocket連接向服務器發(fā)送數(shù)據(jù)。
一旦在服務端和客戶端建立了全雙工的雙向連接，可以使用send方法去發(fā)送消息，當連接是open的時候send()方法傳送數(shù)據(jù)，當連接關閉或獲取不到的時候回拋出異常。
一個通常的錯誤是人們喜歡在連接open之前發(fā)送消息。如下所示：
// 這將不會工作 var socket= new WebSocket("ws://localhost:8080") socket.send("Initial data");應該等待open事件觸發(fā)后再發(fā)送消息，正確的姿勢如下：
var socket= new WebSocket("ws://localhost:8080") socket.onopen = function(e) { socket.send("Initial data"); }（2）close
關閉WebSocket連接或停止正在進行的連接請求。如果連接的狀態(tài)已經(jīng)是closed，這個方法不會有任何效果。
使用close方法來關閉連接，如果連接已經(jīng)關閉，這方法將什么也不做。調(diào)用close方法后，將不能再發(fā)送數(shù)據(jù)。close方法可以傳入兩個可選的參數(shù)，code（numerical）和reason（string）,以告訴服務端為什么終止連接。
socket.close(1000, "Closing normally"); //1000是狀態(tài)碼，代表正常結束。?
3、屬性
| binaryType | DOMString | 一個字符串表示被傳輸二進制的內(nèi)容的類型。取值應當是"blob"或者"arraybuffer"。 "blob"表示使用DOMBlob?對象，而"arraybuffer"表示使用?ArrayBuffer?對象。 |
| bufferedAmount | unsigned long | 調(diào)用?send()?方法將多字節(jié)數(shù)據(jù)加入到隊列中等待傳輸，但是還未發(fā)出。該值會在所有隊列數(shù)據(jù)被發(fā)送后重置為 0。而當連接關閉時不會設為0。如果持續(xù)調(diào)用send()，這個值會持續(xù)增長。只讀。 |
| extensions | DOMString | 服務器選定的擴展。目前這個屬性只是一個空字符串，或者是一個包含所有擴展的列表。 |
| protocol | DOMString | 一個表明服務器選定的子協(xié)議名字的字符串。這個屬性的取值會被取值為構造器傳入的protocols參數(shù)。 |
| readyState | unsigned short | 連接的當前狀態(tài)。取值是?Ready state constants之一。只讀。 |
| url | DOMString | 傳入構造器的URL。它必須是一個絕對地址的URL。只讀。 |
4、常量
Ready state 常量
| CONNECTING | 0 | 連接還沒開啟。 |
| OPEN | 1 | 連接已開啟并準備好進行通信。 |
| CLOSING | 2 | 連接正在關閉的過程中。 |
| CLOSED | 3 | 連接已經(jīng)關閉，或者連接無法建立。 |
三、webSocket與HTTP
webSocket和http同為協(xié)議，大家心里肯定會想它倆之間有什么聯(lián)系，當然，我也好奇，所以就有了下面的研究結果，呵呵呵呵~~
大家都知道，webSocket是H5的一種新協(xié)議（這樣看來和http是沒什么關系），本質(zhì)是通過http/https協(xié)議進行握手后創(chuàng)建一個用于交換數(shù)據(jù)的TCP連接，服務端與客戶端通過此TCP連接進行實時通信。也就是說，webSocket是http協(xié)議上的一種補充。
相對于HTTP這種非持久的協(xié)議來說，Websocket是一個持久化的協(xié)議。
以php的生命周期為例：
在http1.0中，一個request，一個response，一個周期就結束了。
在http1.1中，有了keep-alive，可以發(fā)送多個Request，接收多個Response。但在http中永遠是一個request對應一個response。而且這個response是被動的，不能主動發(fā)起。
這時候webSocket就派上用場了。
四、webSocket原理
首先，先來看一張http的Request Headers：
再看一張webSocket的：
以及webSocket的Response Headers：
I guess，無論熟不熟悉http，想必都看出了區(qū)別，哈哈哈。接下來就要對這些東西進行講解啦：
（1）Upgrade和Connection
Upgrade: websocket Connection: Upgrade這個就是webSocket的核心，告訴Apache、ngix等服務器：注意啦，我發(fā)起的是webSocket協(xié)議，快點幫我找到對應的助理處理~ 不是那個老土的http。
（2）Sec-WebSocket-Key、Sec-WebSocket-Extensions和Sec-WebSocket-Version
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw== Sec-WebSocket-Extensions: chat, superchat Sec-WebSocket-Version: 13這個很好理解啦，首先，Sec-WebSocket-Key是一個Base64 encode的值，這個是瀏覽器隨機生成的，告訴服務器：尼好，我是webSocket，這是我的ID卡，讓我過去吧。
然后，Sec-WebSocket-Extensions：協(xié)議擴展， 某類協(xié)議可能支持多個擴展，通過它可以實現(xiàn)協(xié)議增強
最后，Sec-WebSocket-Version是告訴服務器所使用的webSocket Draft（協(xié)議版本）。喏，我是小喵4.1版本哆啦A夢，哈哈哈哈哈哈哈哈。
然后只要服務器返回了上面我放的那一系列balabala的東西，就代表已經(jīng)接受請求，webSocket建立成功啦！
（3）Sec-WebSocket-Accept和Sec-WebSocket-Extensions
請求時，webSocket會自帶加密過的ID卡過來讓服務端驗證；
對應的，接受請求之后，服務端也得搞一個安全卡（Accept頭域的值就是Key的值，是由瀏覽器發(fā)過來的Sec-WebSocket-Key生成的）來證明是我同意你通過的，而不是什么肯蒙拐騙的壞銀->
就這樣，原理部分就說完啦，握手成功！
五、webSocket的作用
說webSocket之前，先說一下ajax輪詢和long poll。
1、ajax輪詢：
ajax輪詢很簡單，就是讓瀏覽器隔個幾秒就發(fā)送一次請求，詢問服務器是否有新信息。
客戶端：hello hello，有沒有新信息(Request)服務端：沒有（Response）客戶端：hello hello，有沒有新信息(Request) 服務端：沒有。。（Response） 客戶端：hello hello，有沒有新信息(Request) 服務端：你好煩啊，沒有啊。。（Response） 客戶端：hello hello，有沒有新消息（Request） 服務端：有啦有啦，here you are（Response） 客戶端：hello hello，有沒有新消息（Request） 服務端：。。沒。。。。沒。。。沒。。。。（Response）?
2、long poll
long poll和ajax輪詢原理很像，不過long poll是阻塞模型，簡單來說，就是一直給你打電話，直到你接聽為止。
客戶端：hello hello，有沒有新信息，沒有的話就等有了再返回給我吧（Request）服務端：額。。。 （。。。。等待到有消息的時候。。。。） 有了，給你（Response）很明顯，ajax輪詢和long poll弊大于利：
（1）被動性
上面這兩種方式都是客戶端先主動消息給服務端，然后等待服務端應答，要知道，等待總是難熬的，如果服務端能主動發(fā)消息多好，這也就是缺點之一：被動性。
（2）非常消耗資源
ajax輪詢 需要服務器有很快的處理速度和資源（速度）；
long poll 需要有很高的并發(fā)，也就是說同時接待客戶的能力（場地大小）。
so，當ajax輪詢和long poll碰上503（啊啊啊啊啊，game over）
這時候，神奇的webSocket又派上用場了。
?
3、webSocket
（1）被動性
首先，解決被動性：
客戶端：hello hello，我要建立webSocket協(xié)議，擴展服務：chat，Websocket，協(xié)議版本：17（HTTP Request）服務端：ok，確認，已升級為webSocket協(xié)議（HTTP Protocols Switched）客戶端：麻煩你有信息的時候推送給我噢。。服務端：ok，有的時候會告訴你的。服務端：balabalabalabala服務端：balabalabalabala服務端：哈哈哈哈哈啊哈哈哈哈服務端：笑死我了哈哈哈哈哈哈哈就這樣，只需要一次http請求，就會有源源不斷的信息傳送了，是不是很方便。
（2）消耗資源問題
首先，了解一下，我們所用的程序是要經(jīng)過兩層代理的，即http協(xié)議在Nginx等服務器的解析下，然后再傳送給相應的Handler（PHP等）來處理。簡單地說，我們有一個非常快速的接線員（Nginx），他負責把問題轉交給相應的客服（Handler）?。
本身接線員基本上速度是足夠的，但是每次都卡在客服（Handler）了，老有客服處理速度太慢，導致客服不夠。
webSocket就解決了這樣一個難題，建立后，可以直接跟接線員建立持久連接，有信息的時候客服想辦法通知接線員，然后接線員再統(tǒng)一轉交給客戶。
這樣就可以解決客服處理速度過慢的問題了。
同時，在傳統(tǒng)的方式上，要不斷的建立，關閉HTTP協(xié)議，由于HTTP是非狀態(tài)性的，每次都要重新傳輸鑒別信息，來告訴服務端你是誰。
雖然接線員很快速，但是每次都要聽這么一堆，效率也會有所下降的，同時還得不斷把這些信息轉交給客服，不但浪費客服的處理時間，而且還會在網(wǎng)路傳輸中消耗過多的流量/時間。
但是webSocket只需要一次http握手，所以說整個通訊過程是建立在一次連接/狀態(tài)中，也就避免了http的非狀態(tài)性，服務端會一直知道你的信息，直到你關閉請求，這樣就解決了接線員要反復解析http協(xié)議，還要查看identity info的信息。
六、Socket.io
既然說到了webSocket，就難免扯到socket.io。
有人說socket.io就是對webSocket的封裝，并且實現(xiàn)了webSocket的服務端代碼。可以這樣說，但不完全正確。
在webSocket沒有出現(xiàn)之前，實現(xiàn)與服務端的實時通訊可以通過輪詢來完成任務。Socket.io將webSocket和輪詢（Polling）機制以及其它的實時通信方式封裝成了通用的接口，并且在服務端實現(xiàn)了這些實時機制的相應代碼。也就是說，webSocket僅僅是Socket.io實現(xiàn)實時通信的一個子集。
下面直接上一個用socket.io做的小小聊天室吧。
（1）首先你得有node，然后安裝socket.io。
$ npm install socket.io（2）服務器端（index.js）
'use strict'; module.exports = require('./lib/express'); var app = require('express')(); var http = require('http').Server(app); var io = require('socket.io')(http); app.get('/', function(req, res){ res.sendFile(__dirname + '/index.html'); }); io.on('connection', function(socket){ socket.on('message',function(msg){ console.log(msg); socket.broadcast.emit('chat',msg); //廣播消息 }) }); http.listen(3000);（3）客戶端
先引入js文件：
<script src="/socket.io/socket.io.js"></script>交互代碼（index.html）：
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>聊天室</title> <style> body,div,ul,li{margin: 0;padding: 0;list-style: none;} .auto{margin: auto;} .l{text-align: left;} .r{text-align: right;} .flex{display: box;display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-box-pack: center;-webkit-justify-content: center;-moz-justify-content: center;-ms-justify-content: center;-o-justify-content: center;justify-content: center;-webkit-box-align: center;-webkit-align-items: center;-moz-align-items: center;-ms-align-items: center;-o-align-items: center;align-items: center;} .chat-box{background: #f1f1f1;width: 56vw;padding:2vw;height:36vw;border:1px solid #ccc;margin-top: 2vw;} .chat-li{display:inline-block;margin-top: 5px;background: #5CB85C;border-radius: 5px;padding: 3px 10px;color: #fff;} .other-chat-li{background: #fff;color: #333;} .send-box{width: 60vw;border:1px solid #ccc;justify-content: space-between;border-top: 0;} .send-text{width: 50vw; border: none; padding: 10px;outline:0;} .send{width: 10vw;background: #5cb85c; border: none; padding: 10px;color: #fff;cursor: pointer;} .chat-name{color: #f00;} .other-box,.self-box{width: 50%;height:100%;} </style> </head轉載于:https://www.cnblogs.com/leftJS/p/11041346.html
總結
以上是生活随笔為你收集整理的HTML5中的webSocket、ajax、http的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 大班体育游戏教案《老鼠笼》
- 下一篇： 前端通信