web頁面實時更新頁面的原理 WebSocket

2021-09-08 14:12:03 字數 2016 閱讀 7678

原文:

angular-cli啟動的專案也可以自動重新整理,底下應該也是應用的websocket的原理。

ladder_builder關注

websocket是一種全雙工的計算機通訊協議,它建立在tcp的基礎之上。它可以在伺服器與瀏覽器之間建立乙個長連線,然後進行實時的資料傳輸。而我們比較熟悉的http,它一般也是建立在tcp之上的,不同的是,它不是全雙工的,而是請求-相應式的,每次通訊都需要發起新的請求,而且每次發起請求,都需要重新建立連線。

websocket和http其實是有關係的,我們可以從okhttp的原始碼中看到websocket的具體實現。

okhttp的websocketcall類中,有下面的**。

websocket連線的建立利用了http,只不過在http請求的header中新增了一些特殊的引數,用來標識這是乙個websocket請求。服務端收到請求後,如果它支援websocket,則在response的header中新增相應的字段告訴客戶端。當客戶端收到響應後,做了什麼呢?我們繼續看**。

上面的過程可以總結如下:

首先通過callenginegetconnection函式,獲得這個http底層的tcp連線。

然後呼叫clearowner清除掉該連線原來的擁有者。

接下來使用該連線的socket和輸入輸出,建立真正的websocket。

最後將該連線的擁有者設為該websocket。

從上面的過程可以看出,websocket的原理,就是先使用http協議建立連線,然後使用底層的tcp連線繼續通訊。

在不重新整理頁面的情況下,更新頁面

先註冊乙個名為redirect的路由 export default this route const params this router.replace render function h script 手動重定向頁面到 redirect頁面 const this route this route...

關於frameset幀頁面跳轉到新頁面的問題

關於js中 window.location.href location.href parent.location.href top.location.href 的用法 window.location.href location.href 是本頁面跳轉 parent.location.href 是上一...

browser sync搭建實時重新整理頁面效果

使用工具 node gulp browser sync 首先安裝node 然後命令列安裝gulp和browser sync外掛程式 npm install gulp g npm install browser sync g browser sync的使用方式,一般我用 直接在專案資料夾根目錄下,sh...