一、WebSocket定義

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

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

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

二、WebSocket特點

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

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

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

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

如“ws://localhost:8080"。

三、WebSocket用法

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

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

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

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

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

http協(xié)議是短鏈接，因為請求之后，都會關(guān)閉連接，下次重新請求數(shù)據(jù)，需要再次打開連接。

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

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

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

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

六、利用socket.io實現(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方法判斷客戶端請求是否斷開；

總結(jié)

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

最新評論