HTML5 WebSocket

来源:https://www.cnblogs.com/Leophen/archive/2019/08/23/11401909.html
-Advertisement-
Play Games

WebSocket 是 HTML5 新增的協議,它的目的是在瀏覽器和伺服器之間建立一個不受限的雙向通信的通道,比如說,伺服器可以在任意時刻發送消息給瀏覽器。 為什麼傳統的 HTTP 協議不能做到 WebSocket 實現的功能?這是因為 HTTP 協議是一個請求-響應協議,請求必須先由瀏覽器發給服務 ...


WebSocket 是 HTML5 新增的協議,它的目的是在瀏覽器和伺服器之間建立一個不受限的雙向通信的通道,比如說,伺服器可以在任意時刻發送消息給瀏覽器。

為什麼傳統的 HTTP 協議不能做到 WebSocket 實現的功能?這是因為 HTTP 協議是一個請求-響應協議,請求必須先由瀏覽器發給伺服器,伺服器才能響應這個請求,再把數據發送給瀏覽器。換句話說,瀏覽器不主動請求,伺服器是沒法主動發數據給瀏覽器的。

也有人說,HTTP 協議其實也能實現啊,比如用輪詢或者 Comet。

輪詢是指瀏覽器通過 JavaScript 啟動一個定時器,然後以固定的間隔給伺服器發請求,詢問伺服器有沒有新消息。這個機制的缺點一是實時性不夠,二是頻繁的請求會給伺服器帶來極大的壓力。

Comet 本質上也是輪詢,但是在沒有消息的情況下,伺服器先拖一段時間,等到有消息了再回覆。這個機制暫時地解決了實時性問題,但是它帶來了新的問題:以多線程模式運行的伺服器會讓大部分線程大部分時間都處於掛起狀態,極大地浪費伺服器資源。另外,一個 HTTP 連接在長時間沒有數據傳輸的情況下,鏈路上的任何一個網關都可能關閉這個連接,而網關是我們不可控的,這就要求 Comet 連接必須定期發一些ping數據表示連接“正常工作”。

以上兩種機制都治標不治本,所以,HTML5 推出了 WebSocket 標準,讓瀏覽器和伺服器之間可以建立無限制的全雙工通信,任何一方都可以主動發消息給對方。

 

WebSocket 協議

WebSocket 是 HTML5 開始提供的一種在單個 TCP 連接上進行全雙工通訊的協議。

WebSocket 使得客戶端和伺服器之間的數據交換變得更加簡單,允許服務端主動向客戶端推送數據。在 WebSocket API 中,瀏覽器和伺服器只需要完成一次握手,兩者之間就直接可以創建持久性的連接,併進行雙向數據傳輸。

在 WebSocket API 中,瀏覽器和伺服器只需要做一個握手的動作,然後,瀏覽器和伺服器之間就形成了一條快速通道。兩者之間就直接可以數據互相傳送。

現在,很多網站為了實現推送技術,所用的技術都是 Ajax 輪詢。輪詢是在特定的的時間間隔(如每1秒),由瀏覽器對伺服器發出HTTP請求,然後由伺服器返回最新的數據給客戶端的瀏覽器。這種傳統的模式帶來很明顯的缺點,即瀏覽器需要不斷的向伺服器發出請求,然而HTTP請求可能包含較長的頭部,其中真正有效的數據可能只是很小的一部分,顯然這樣會浪費很多的帶寬等資源。

HTML5 定義的 WebSocket 協議,能更好的節省伺服器資源和帶寬,並且能夠更實時地進行通訊。

 

 

瀏覽器通過 JavaScript 向伺服器發出建立 WebSocket 連接的請求,連接建立以後,客戶端和伺服器端就可以通過 TCP 連接直接交換數據。

當你獲取 WebSocket 連接後,你可以通過 send() 方法來向伺服器發送數據,並通過 onmessage 事件來接收伺服器返回的數據。

 

另外,由於 WebSocke t是一個協議,伺服器具體怎麼實現,取決於所用編程語言和框架本身。Node.js 本身支持的協議包括 TCP 協議和 HTTP 協議,要支持 WebSocket 協議,需要對 Node.js 提供的 HTTPServer 做額外的開發。已經有若幹基於 Node.js 的穩定可靠的 WebSocket 實現,我們直接用 npm 安裝使用即可

 

總結:

WebSocket 是基於 TCP 的協議,WebSocket 只需要服務端和客戶端一次握手,就可以自由進行數據傳送和接收,允許服務端主動發送數據,不需要使用輪詢的方式。另外,WebSocket 客戶端基於事件的編程模型與 node 類似

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • ### 前言 上篇文章我們講了[Okhttp的基本用法](https://www.jianshu.com/p/8e404d9c160f),今天根據上節講到請求流程來分析源碼,那麼第一步就是實例化OkHttpClient對象,所以我們今天主要分析下OkHttpClient源碼! #### 初始化-構造 ...
  • 聲明:本文來自我的導師wangjie. 本文主要包含以下內容 一、查看項目所在分支二、切換到目標分支三、查看當前所在分支四、編譯Android源碼五、source Android 編譯環境六、lunch 所需的編譯項目七、單編 模塊八、push 模塊 驗證修改是否生效 一、查看項目所在分支 git ...
  • js節點操作 整個頁面可以看成文檔節點,節點用node表示。頁面裡面全是節點,元素節點, 屬性節點,文本節點(文字,空格,換行), 節點:一定有節點類型,節點名稱,節點值 節點類型的值: 元素節點為1,屬性節點為2,文本節點為3 通過節點,可以更好的獲取元素。 邏輯全在代碼裡面 js部分 長話短說: ...
  • 個人博客主題美化 選擇主題 Hexo預設的主題是landscape,推薦以下主題: 1. "snippet" 2. "Hiero" 3. "JSimple" 4. "BlueLake" 詳見:https://github.com/search?q=hexo theme 應用主題 1. 下載主題 2. ...
  • 一.準備環境 1.安裝node.js 簡介 因為hexo是基於node.js的,所以node.js是必須要裝的,安裝也特別簡單,去 "官網" 下載適合自己windows的版本。安裝過程一直下一步就行了,什麼也不用選,在網上查資料的時候,看到有說要在Custom Setup這一步記得選 Add to ...
  • nodes.js詳細安裝 "Node.js" 本章節我們將向大家介紹在window和Linux上安裝Node.js的方法。 本安裝教程以Node.js v4.4.3 LTS(長期支持版本)版本為例。 Node.js安裝包及源碼下載地址為:https://nodejs.org/en/download/ ...
  • H5對自定義屬性的規定和添加獲取自定義屬性的方法 元素屬性那麼多,如何區分是自帶的屬性還是預設的屬性呢? H5規定自帶的屬性有個data- 首碼,如data-index="1",那麼,如何設置和獲取屬性值呢,請看下文。 <script> var divele = document.querySele ...
  • tab欄切換製作 先上圖 要求1:預設狀態,第一個選項卡被選中,展示第一個選項卡的內容 策略:第一個選項卡預設有被選中的樣式,第一個選項卡對應的display: block,其他的dispaly設為none 要求2: 選項卡模塊:被點擊的變為紅底白字,其他的變為白底紅字 策略:排他思想,每次點擊一個 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...