一、WebSocket定義

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

WebSocket允許服務端主動向客戶端推送數據。

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

二、WebSocket特點

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

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

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

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

如“ws://localhost:8080"。

三、WebSocket用法

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

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

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

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

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

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

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

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

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

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

六、利用socket.io實現簡易聊天室思路

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

總結

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

最新評論