一、WebSocket定義

html5提供的單個(gè)TCP連接上進(jìn)行全雙工通信的協(xié)議。

WebSocket允許服務(wù)端主動(dòng)向客戶端推送數(shù)據(jù)。

在WebSocket API中，瀏覽器和服務(wù)器只需要完成一次握手，兩者之間就直接可以創(chuàng)建持久性的連接，并進(jìn)行雙向數(shù)據(jù)傳輸。

二、WebSocket特點(diǎn)

在實(shí)現(xiàn)數(shù)據(jù)推送時(shí)，多數(shù)都是ajax輪詢（在特定的時(shí)間間隔，由瀏覽器主動(dòng)發(fā)起請求，會(huì)占用很多帶寬和服務(wù)器資源）。

而WebSocket建立TCP連接后，服務(wù)器可以主動(dòng)給客戶端傳遞數(shù)據(jù)，能夠更好的節(jié)省服務(wù)器資源和帶寬，實(shí)現(xiàn)更實(shí)時(shí)的數(shù)據(jù)通訊。

因?yàn)閃ebSockets只能通過連接發(fā)送純文本數(shù)據(jù)和二進(jìn)制數(shù)據(jù)，所以對于復(fù)雜的數(shù)據(jù)結(jié)構(gòu)，在通過連接發(fā)送之前，必須進(jìn)行JSON.stringify()序列化。

協(xié)議標(biāo)識符是ws（加密則為wss），服務(wù)器網(wǎng)址就是 URL。

如“ws://localhost:8080"。

三、WebSocket用法

WebSocket的所有操作都是采用事件的方式觸發(fā)的，這樣不會(huì)阻塞UI，使得UI有更快的響應(yīng)時(shí)間和更好的用戶體驗(yàn)。

瀏覽器通過Javascript向服務(wù)器發(fā)出建立WebSocket連接的請求，連接建立后，客戶端和服務(wù)器就可以通過TCP連接直接交換數(shù)據(jù)。

當(dāng)獲取WebSocket連接后，可以通過send()方法向服務(wù)器發(fā)送數(shù)據(jù)，可以通過onmessage事件接收服務(wù)器返回的數(shù)據(jù)。

//創(chuàng)建一個(gè)webSocket實(shí)例，執(zhí)行后，客戶端就會(huì)與服務(wù)端連接
var ws = new WebSocket("ws://localhost:8080"); 
 
//當(dāng)WebSocket創(chuàng)建成功時(shí)，觸發(fā)onopen事件
ws.onopen = function(){
    console.log("open");
    // 復(fù)雜的數(shù)據(jù)結(jié)構(gòu)，在通過連接發(fā)送之前，必須進(jìn)行序列化。 
    const json = JSON.stringify({
		type: 'keepalive',
		id: ''
	});
　  ws.send(json); //將消息發(fā)送到服務(wù)端
}
 
//當(dāng)客戶端收到服務(wù)端發(fā)來的消息時(shí)，觸發(fā)onmessage事件
ws.onmessage = function(e){
    //e.data 的數(shù)據(jù)格式也是字符串，手動(dòng)解析這些數(shù)據(jù)才能得到其他格式的數(shù)據(jù)。
    const _data = JSON.parse(e.data); 
　　console.log(e.data,_data);
}
 
//當(dāng)客戶端收到服務(wù)端發(fā)送的關(guān)閉連接請求時(shí)，觸發(fā)onclose事件
ws.onclose = function(e){
　　console.log("close");
}
 
//如果出現(xiàn)連接、處理、接收、發(fā)送數(shù)據(jù)失敗的時(shí)候觸發(fā)onerror事件
ws.onerror = function(e){
　　console.log(error);
}

四、Http與WebSocket的區(qū)別

http協(xié)議是短鏈接，因?yàn)檎埱笾螅紩?huì)關(guān)閉連接，下次重新請求數(shù)據(jù)，需要再次打開連接。

WebSocket協(xié)議是一種長連接，只需要通過一次請求來初始化鏈接，然后所有的請求和響應(yīng)都是通過這個(gè)TCP鏈接進(jìn)行通信。

五、WebSocket和Socket的區(qū)別

Socket是應(yīng)用層與TCP/IP協(xié)議通信的中間軟件抽象層，它是一組接口。

而WebSocket則不同，它是一個(gè)完整的應(yīng)用層協(xié)議，包含一套標(biāo)準(zhǔn)的API。

六、利用socket.io實(shí)現(xiàn)簡易聊天室思路

• 客戶端通過發(fā)送io.connect(url)連接請求與服務(wù)器端進(jìn)行連接（若不適用socket.io庫，使用new WebSocket(url)可以發(fā)送連接請求）;
• 服務(wù)器端通過監(jiān)聽‘connection’事件處理連接請求io.on(‘connection’,function(socket){//發(fā)送open事件}）；
• 客戶端通過監(jiān)聽open事件確認(rèn)是否與服務(wù)器端進(jìn)行連接；
• 客戶端通過send方法向服務(wù)器端發(fā)送信息；
• 服務(wù)器端通過監(jiān)聽message方法監(jiān)聽send的發(fā)送信息，并處理發(fā)送信息（將信息廣播給其他聊天室成員和自己）；
• 服務(wù)器端通過監(jiān)聽disconnect方法判斷客戶端請求是否斷開；

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評論