socket基礎(chǔ)知識及js中的Web Sockets

hncdman 2023-02-03 發(fā)布于湖南

展開全文

狂野的河

于 2017-05-25 14:02:30 發(fā)布

1321

分類專欄： WebSockets 文章標簽： web sockets

版權(quán)

WebSockets

專欄收錄該內(nèi)容

1 篇文章0 訂閱

訂閱專欄

socket基本概念

兩個進程如果需要進行通訊最基本的前提是能夠唯一的標示一個進程，在本地通訊中用PID來唯一標示一個進程,，但PID只在本地唯一,，網(wǎng)絡(luò)中的兩個進程PID沖突幾率很大。我們知道IP層的ip地址可以唯一標示主機,，而TCP層協(xié)議和端口號可以唯一標示主機的一個進程,，這樣我們可以利用ip地址+協(xié)議+端口號唯一標示網(wǎng)絡(luò)中的一個進程。能夠唯一標示網(wǎng)絡(luò)中的進程后,，他們就可以利用socket進行通信了,。我們經(jīng)常把socket翻譯為套接字，socket是在應(yīng)用層和傳輸層之間的一個抽象層,，它把TCP/IP層復(fù)雜的操作抽象為幾個簡單的接口供應(yīng)用層調(diào)用已實現(xiàn)進程在網(wǎng)絡(luò)中的通信,。

圖片來自Samaritans的簡單理解socket

js中的web sockets

為了實現(xiàn)在單獨的持久連接上提供全雙工、雙向通信的功能,，HTML5中增加了連接API-WebSockets,。在JavaScript中創(chuàng)建了WebSocket之后，會有一個HTTP請求發(fā)送到瀏覽器以發(fā)起連接,。在取得服務(wù)器響應(yīng)后,，建立的連接會使用HTTP升級，從HTTP協(xié)議轉(zhuǎn)變?yōu)閣eb socket協(xié)議。具體的過程如下：

（1）客戶端建立連接時,，通過HTTP發(fā)起請求報文,，如下所示

Upgrade:websocket

Connection:Upgrade

Sec-WebSocket-Key:

Sec-WebSocket-Protocol:

這兩個字段表示請求服務(wù)器端升級協(xié)議為WebSocket，Sec-W

（2）服務(wù)器端處理完請求之后,，響應(yīng)如下報文

Upgrade:websocket

Connection:Upgrade

Sec-WebSocket-Accept:

Sec-WebSocket-Protocol:

該報文告知客戶端正在更換協(xié)議,，更新應(yīng)用層協(xié)議為WebSocket協(xié)議。

web sockets API

要創(chuàng)建Web Socket,，先實例一個webSocket對象并傳入要連接的URL

var socket = new WebSocket('ws:www.example.com/server.php');

在這里需要注意,，必須給WebSocket傳入絕對URL。同源策略對Web Sockets不適用,，因此可以通過它打開任何站點的連接,。所以是否跟某個域中的頁面通信，完全取決于服務(wù)器

實例化了WebSocket對象后,，瀏覽器會馬上嘗試創(chuàng)建連接,。WebSocket有一個表示當(dāng)前狀態(tài)的readyState屬性。

WebSocket.OPENING(0)：正在創(chuàng)建連接

WebSocket.OPEN(1)：已經(jīng)建立連接

WebSocket.CLOSING(2)：正在關(guān)閉連接

WebSocket.CLOSING(3)：已經(jīng)關(guān)閉連接

readyState的值永遠從0開始,。

要關(guān)閉socket連接,，可以在任何時候調(diào)用close()方法

socket.close();

發(fā)送和接收數(shù)據(jù)

Web Socket打開之后，就可以通過連接發(fā)送和接收數(shù)據(jù),。要向服務(wù)器發(fā)送數(shù)據(jù),，使用send()方法，并傳入任意字符串,。如

var socket = new WebSocket('ws:www.example.com/server.php');

socket.send('hello world');

在這里需要注意：因為WebSockets只能通過連接發(fā)送純文本數(shù)據(jù),，所以對于復(fù)雜的數(shù)據(jù)結(jié)構(gòu)，在通過連接發(fā)送之前,，必須進行序列化,。

當(dāng)服務(wù)器向客戶端發(fā)來消息時，WebSocket對象就會觸發(fā)message事件,。這個message事件與其他傳遞消息的協(xié)議類似,，也是把返回的數(shù)據(jù)保存在event.data屬性中

socket.onmessage = function(e){

var data = e.data;

//處理數(shù)據(jù)

}；

值得一提的是data的數(shù)據(jù)格式也是字符串,，如果想得到其他格式的數(shù)據(jù),，必須手工解析這些數(shù)據(jù)。

其他事件

WebSocket對象還有其他三個事件,，在連接聲明周期的不同階段觸發(fā)

open：在成功建立連接時觸發(fā)

error：在發(fā)生錯誤時觸發(fā),，連接不能持續(xù)

close：在連接關(guān)閉時觸發(fā)

WebSocket對象不支持DOM2級事件偵聽器，因此必須使用DOM0級語法分別定義每個事件處理程序,。

在這三個事件中,，只有close事件的event對象有額外的信息,。這個事件的事件對象有三個額外的屬性：wasClean、code和reason,。其中,，wasClean是一個布爾值，表示連接是否已經(jīng)明確的關(guān)閉,；code是服務(wù)器返回的數(shù)值狀態(tài)碼,；而reason是一個字符串，包含服務(wù)器發(fā)回的信息,?？梢詫⑦@些信息顯示給用戶。

socket.onclose = function(event){

console.log('was clean?’+event.wasClean+’code=’+event.code+’reason=’+event.reason);

}

利用socket.io實現(xiàn)簡易聊天室

實現(xiàn)聊天室的主要過程如下

客戶端通過發(fā)送io.connect(url)連接請求與服務(wù)器端進行連接（若不適用socket.io庫,，使用new WebSocket(url)可以發(fā)送連接請求）

服務(wù)器端通過監(jiān)聽'connection’事件處理連接請求io.on('connection’,function(socket){//發(fā)送open事件}）

客戶端通過監(jiān)聽open事件確認是否與服務(wù)器端進行連接

客戶端通過send方法向服務(wù)器端發(fā)送信息

服務(wù)器端通過監(jiān)聽message方法監(jiān)聽send的發(fā)送信息,，并處理發(fā)送信息（將信息廣播給其他聊天室成員和自己）

服務(wù)器端通過監(jiān)聽disconnect方法判斷客戶端請求是否斷開

socket.io中emit的幾種方式