WebIM技術 編寫前端WebSocket元件

2021-09-08 18:54:26 字數 3237 閱讀 8499

過去我們想要實現乙個實時web應用通常會考慮採用ajax輪循或者是long polling技術,但是因為頻繁的建立http連線會帶來多餘的請求以及訊息精準性的問題,讓我們在實現實時web應用時頭疼不已。現在,html5提出了websocket協議來規範解決了這個問題。

ajax輪詢

ajax輪詢非常簡單了,就是在客戶端設定乙個定時器,頻繁的去請求介面,看有沒有資料返回,但是這樣很明顯會有很多的多餘請求,導致伺服器壓力巨大。。

long polling

long polling技術,其實是在ajax輪詢的基礎上再做了一些優化,客戶端請求服務端看有沒有返回,如果暫時沒有,服務端會把請求短暫的掛起,當有資料的時候再把資料返回給客戶端,這時候客戶端再另起乙個請求,詢問伺服器。

為了保證連線的通道不斷,我們通常會設定乙個timeout,當過了這個timeout時還沒有資料,服務端會把掛起的服務關閉,返回空的資料,然後客戶端再進行請求。

這樣做雖然比ajax輪詢好很多,但是當訊息量大的時候,請求數還是很多。而且輪詢還極有可能在傳輸的過程中遇到訊息丟失的情況,這時候需要服務端做訊息快取等處理。

websocket協議本質上是乙個基於tcp的協議,它由通訊協議和程式設計api組成,websocket能夠在瀏覽器和伺服器之間建立雙向連線,以基於事件的方式,賦予瀏覽器實時通訊能力。既然是雙向通訊,就意味著伺服器端和客戶端可以同時傳送並響應請求,而不再像http的請求和響應。

簡單來說,websocket就是乙個長連線通道,在這個通道裡客戶端和服務端可以自由的傳送訊息給對方,而且不用管對方是否有返回,雙方都有關閉這個通道的權利。

websocket通訊場景

客戶端:啦啦啦,我要建立websocket協議,websocket協議版本:17(http request)

服務端:ok,確認,已建立websocket(http protocols switched)

客戶端:有訊息的時候記得推給我哦。

服務端:ok,有的時候會告訴你的。

服務端:balabalabalabala

服務端:balabalabalabala

服務端:哈哈哈哈哈啊哈哈哈哈

客戶端:哈哈哈哈哈哈哈,你可以不用返回

...使用websocket有什麼好處建立websocket連線

var ws = new websocket('ws:')
為websocket 物件新增 4 個不同的事件:

**示例:

// 當websocket連線建立成功時

ws.onopen = function() ;

// 當收到服務端的訊息時

ws.onmessage = function(e) ;

// 當websocket關閉時

ws.onclose = function() ;

// 當出現錯誤時

ws.onerror = function() ;

websocket物件方法

**示例:

// 傳送訊息 

ws.send('blablabla')

// 關閉socket

ws.close()

為什麼需要定義乙個socket元件

html5提供的socketapi太過於簡陋,並不能滿足複雜環境的socket互動需要,api的呼叫也不太方便。

定義乙個什麼樣的socket元件

socket元件示例

首先要和服務端約定互相可以識別的通訊協議,假設我們約定的通訊協議是

// 客戶端傳送給服務端 }

// 服務端返回給客戶端

, success: true,

errorcode: 0,

request: {} // 如果是服務端主動推訊息給客戶端,request會帶有method引數

// 如果是服務端返回客戶端請求,request就是客戶端之前請求的資料

}

然後我們上**:

/** @example

* var ws = new socket('ws:')

* ws.on('ready',function() );

* ws.emit("send", )

* })

* ws.on("error",function())

* ws.on("close",function())

*/function socket(url)

socket.prototype = ,

initsocket: function(url) ,

initlisteners: function()

return this

},bindsocketevent: function()

me.socket.onerror = function(e)

me.socket.onmessage = function(e)

return this

},reconnect: function() ,

isoffline: function() ,

on: function(evt, fn)

}else

return this

},off: function(evt, fn)

}return this

},emit: function(method, info) ))

return this

},trigger: function(evt) {

var me = this

if(me.listeners[evt]) {

for(var i=0; i介紹一下元件裡的心跳包機制:

因為一些原因,有這麼一種情況,socket還在客戶端連著,但是服務端和客戶端之間卻沒有辦法互相傳送訊息,我們稱這種現象叫做websocket失活。

元件裡採用的解決辦法是,客戶端每5秒鐘向服務端傳送心跳包,講道理服務端會返回乙個心跳包以保活。但是如果客戶端檢查1分鐘內沒有收到服務端的返回,客戶端會自動重連websocket。

websocket在建立連線之前,會先發乙個http協議詢問服務端要不要建立websocket,因為http請求是會帶上cookie的,這時候如果網域名稱下的cookie太多,有可能會導致websocket建立連線失敗。。

我這裡的解決方案是,更換介面的網域名稱位址,利用websocket可以跨域的特性繞過當前域的cookie建立連線。

原文:

WebIM技術 編寫前端WebSocket元件

過去我們想要實現乙個實時web應用通常會考慮採用ajax輪循或者是long polling技術,但是因為頻繁的建立http連線會帶來多餘的請求以及訊息精準性的問題,讓我們在實現實時web應用時頭疼不已。現在,html5提出了websocket協議來規範解決了這個問題。ajax輪詢 ajax輪詢非常簡...

現代前端技術解析 Web 前端技術基礎

對 dom 操作進行封裝 dom 文件物件模型 指 html 內容通過瀏覽器解析後建立的具有節點父子關係的樹形物件 模組化 元件化 非同步載入 保證盡快展示頁面 webp 格式的 更高壓縮比 瀏覽器快取檔案 304 狀態碼 客戶端傳送了乙個帶條件的 get 請求且該請求已被允許,而文件的內容並沒有改...

前端技術概覽

本文描述當前主流的前端框架,語言及技術棧。瀏覽器中的頁面叫web頁面,由於直接面向使用者,所以稱前端,由html css js組合而來,其中 html 是用來描述當前這個頁面的結構,css 用來描述頁面的樣子,js 通常是用來處理這個頁面和使用者的互動。頁面的骨架。為了復用一些樣式,有了css的id...