前端頁面,利用js開啟乙個websocket

2021-10-10 23:59:32 字數 1154 閱讀 2911

websocket的目標是在乙個單獨的持久鏈結上提供全雙工、雙向通訊。在js建立websocket之後,會有乙個http傳送到瀏覽器以發起鏈結,在取得伺服器響應後,建立的連線會使用http公升級從http協議交換為websocket協議,也就是說,使用標準的http協議無法實現websockts,只有支援這種協議的專門伺服器才能正常工作。

websockets使用了自定義的協議,所以url的模式也略有不同,未加密的連線不再是htttp://,而是ws://;加密的協議不是https://而是wss://,在使用 websocket url時,必須帶著這個模式,因為將來還有可能支援其他模是式。

使用自定義的協議而非http協議的好處是,能夠在客戶端和伺服器之間傳送非常少量的資料,而不必擔心http那樣位元組級法人開銷,由於傳遞的資料報很小,因此websocket協議非常適合移動應用。

接下來就是websocket通訊例子的解析,內容較為簡單,只是個大概過程。

需要重新開乙個埠

var wssocket;

//通過websocket來通訊if(

!!window.websocket &&

(wssocket = window.websocket)))

;};//關閉websocket連線,ws置為undefined

ws.onclose

=function

(event)

;//在發生錯誤是觸發,連線不能持續,ws置為undefined

ws.onerror

=function

(event);/*

* 因為websocket只能通過連線傳送純文字資料,所以對於複雜的資料結構,在鏈結傳送之前,必須進行序列化然後在傳送到伺服器

* socket.send(json.stringify(message));

* 接下來伺服器要讀取其中的資料,就要解析收到的json字串

* */

//當伺服器向客戶端發來資訊時,websocket物件就會觸發onmessage事件,

// 這個message事件與其他傳遞訊息的協議類似,也是把返回值保留在event.data中

ws.onmessage

=function

(event)

catch(e

)}}}

js前端如何喚起乙個支付頁面

可使用於任何框架,vue react anglar 前端開發支付 如 alipay wechar 流程簡介 最簡單的前後端分離的支付流程簡介 step.1 前端提交訂單資訊到後端 即 請求乙個後端的api介面 step.2 後端把訂單資訊儲存到資料庫後,開始在後端與支付api進行對接最後,向前端返回...

乙個頁面,WEB全功能

當滑鼠在頁面上往下滑動的時候,頁面也一直向下,標籤也順帶著全部向下滑動 以前瀏覽頁面,主要是在pc上進行瀏覽,乙個頁面不適於太長,需要使用者向下拖動 當時的設計是,點選標籤,點選不同的標籤,跳轉到不同的頁面 現在瀏覽網頁,不全部是在pc上了,在手機端瀏覽更普遍,而且這個趨勢也越來越明顯,以後手機端的...

分享乙個通用web安裝頁面

我們做好的web系統,特別是涉及到資料庫的,可能都需要乙個資料庫的配置過程,如果涉及到一些複雜的系統,可能還需要更加麻煩的配置才能使我們的系統正常執行,這一切對於熟悉系統的it人員來說並不複雜,但是如果我們做的是產品,需要普通使用者或者技術能力不強的使用者來做這樣的工作可能就比較困難,那麼我們能否像...