狠狠色丁香婷婷综合尤物/久久精品综合一区二区三区/中国有色金属学报/国产日韩欧美在线观看 - 国产一区二区三区四区五区tv

LOGO OA教程 ERP教程 模切知識交流 PMS教程 CRM教程 開發文檔 其他文檔  
 
網站管理員

【JavaScript】十分鐘學會http中用純JS操作WebSocket

admin
2024年4月28日 14:7 本文熱度 740

WebSocket簡介

WebSocket是一種在客戶端和服務器之間實現雙向通信的網絡協議。它通過在單個TCP連接上提供全雙工通信功能,使得服務器可以主動向客戶端推送數據,而不需要客戶端發起請求。

WebSocket與HTTP的區別

與傳統的HTTP協議相比,WebSocket具有以下幾個顯著的區別:

  • 雙向通信:WebSocket支持客戶端和服務器之間的實時雙向通信,而HTTP協議是單向請求-響應模式。
  • 低延遲:由于WebSocket使用長連接,避免了HTTP的連接建立和斷開過程,可以降低通信延遲。
  • 更少的數據傳輸:WebSocket頭部信息相對較小,減少了數據傳輸的開銷。
  • 跨域支持:WebSocket可以輕松跨域,而HTTP需要通過CORS等機制來實現。

WebSocket的工作原理

WebSocket的握手過程和HTTP有所不同。客戶端通過發送特定的HTTP請求進行握手,服務器收到請求后進行驗證,如果驗證通過,則會建立WebSocket連接。

建立連接后,客戶端和服務器之間可以通過WebSocket發送和接收消息,可以使用文本、二進制數據等進行通信。

WebSocket的應用場景

WebSocket的實時雙向通信特性使得它在許多應用場景中發揮重要作用,例如:

  • 即時聊天:WebSocket可以實現實時的聊天功能,用戶可以發送和接收消息,實現快速、低延遲的聊天體驗。
  • 實時數據更新:對于需要實時更新數據的應用,如股票行情、實時監控等,WebSocket可以將數據實時推送給客戶端,確保數據的及時更新。
  • 在線游戲:在線游戲需要實時的雙向通信,WebSocket可以提供穩定的通信通道,支持實時交互和多人游戲。

WebSocket的使用

以下是使用JavaScript與WebSocket建立連接的示例代碼:

var Socket = new WebSocket("url, [protocol]");

以上代碼中的第一個參數url, 指定連接的 URL。第二個參數protocol是可選的,指定了可接受的子協議。

WebSocket 屬性

以下是 WebSocket 對象的屬性。

屬性描述
Socket.readyState只讀屬性readyState表示連接狀態,可以是以下值:0-表示連接尚未建立。1-表示連接已建立,可以進行通信。2-表示連接正在進行關閉。3-表示連接已經關閉或者連接不能打開。
Socket.bufferedAmount只讀屬性bufferedAmount已被send()放入正在隊列中等待傳輸,但是還沒有發出的UTF-8文本字節數。

  • 0-表示連接尚未建立。
  • 1-表示連接已建立,可以進行通信。
  • 2-表示連接正在進行關閉。
  • 3-表示連接已經關閉或者連接不能打開。

WebSocket 事件

以下是 WebSocket 對象的相關事件。

事件事件處理程序描述
openSocket.onopen連接建立時觸發
messageSocket.onmessage客戶端接收服務端數據時觸發
errorSocket.onerror通信發生錯誤時觸發
closeSocket.onclose連接關閉時觸發

  • 下面是相關示例代碼:
Socket.onopen = function() { 
   //連接建立時觸發
   console.log("WebSocket連接已建立");
};

Socket.onmessage = function(event) {
   //客戶端接收服務端數據時觸發
   var message = event.data;
   console.log("收到消息:" + message);
};

Socket.onerror = function() {
   //通信發生錯誤時觸發
   console.log("WebSocket連接發生了錯誤");
};

Socket.onclose = function() {
   //連接關閉時觸發
   console.log("WebSocket連接已關閉");
};

WebSocket 方法

以下是 WebSocket 對象的相關方法。

方法描述
Socket.send()使用連接發送數據
Socket.close()關閉連接

//發送一條消息
Socket.send('你好')
//關閉WebSocket連接
Socket.close()

WebSocket 除了發送和接收文本消息外,還支持發送和接收二進制數據。對于發送二進制數據,可以使用 send() 方法傳遞一個 ArrayBuffer 或 Blob 對象,例如:

const buffer = newArrayBuffer(4);
const view = newDataView(buffer);
view.setUint32(0, 1234);
socket.send(buffer);

在接收二進制數據時,可以通過 event.data 獲取到 ArrayBuffer 對象,然后進行處理。

WebSocket的心跳機制

WebSocket的心跳機制是一種用于保持WebSocket連接的穩定性和活躍性的方法。心跳機制的目的是定期發送小的探測消息,以確保連接仍然有效,如果連接斷開或出現問題,可以及時發現并采取措施。

下面是WebSocket心跳機制的詳細步驟和相關代碼示例:

定義心跳間隔:為了定期發送心跳消息,你需要定義一個心跳間隔,通常以毫秒為單位。在示例中,我們將心跳間隔設置為30秒。

const heartbeatInterval = 30000; // 30秒

定義心跳消息:你需要定義用于發送心跳的消息內容。這通常是一個簡單的字符串,如"heartbeat",但可以根據應用的需求自定義。

const heartbeatMessage = 'heartbeat';

設置心跳定時器:一旦WebSocket連接打開,你可以使用setInterval函數設置一個定時器,以便每隔一段時間發送心跳消息。

let heartbeat;

socket.addEventListener('open', () => {
   console.log('WebSocket連接已打開');

   heartbeat = setInterval(() => {
       socket.send(heartbeatMessage);
   }, heartbeatInterval);
});

處理心跳消息:當你接收到來自服務器的消息時,你需要檢查它是否是心跳消息。這可以通過比較接收到的消息內容和心跳消息的內容來實現。

socket.addEventListener('message', (event) => {
   const message = event.data;

   if (message === heartbeatMessage) {
       console.log('接收到心跳消息');
       // 在這里可以執行一些處理心跳消息的操作
   } else {
       console.log('接收到其他消息:', message);
       // 處理其他類型的消息
   }
});

清除心跳定時器:當WebSocket連接關閉時,你應該清除之前設置的心跳定時器,以防止繼續發送心跳消息。

socket.addEventListener('close', () => {
   console.log('WebSocket連接已關閉');

   clearInterval(heartbeat);
});

通過這些步驟,你可以實現WebSocket的心跳機制,確保連接的持續穩定,以適應長時間的通信需求。如果連接斷開或出現問題,你可以根據需要添加進一步的錯誤處理機制。

WebSocket 的安全性和跨域問題如何處理?

WebSocket 支持通過 wss:// 前綴建立加密的安全連接,使用 TLS/SSL 加密通信,確保數據的安全性。在使用加密連接時,服務器需要配置相應的證書。

對于跨域問題,WebSocket 遵循同源策略,只能與同源的服務器建立連接。如果需要與不同域的服務器通信,可以使用 CORS(跨域資源共享)來進行跨域訪問控制。

有哪些好用的客戶端WebSocket第三方庫

  1. Socket.io-clientSocket.io[1] 是一個流行的實時通信庫,它提供了客戶端 JavaScript 庫,可用于在瀏覽器中與 Socket.io[2] 服務器建立 WebSocket 連接。它支持自動重連、事件處理等功能,用于構建實時應用非常方便。
  2. ReconnectingWebSocket:ReconnectingWebSocket 是一個帶有自動重連功能的 WebSocket 客戶端庫,可以很好地處理網絡連接斷開和重新連接的情況,適合用于瀏覽器端的 WebSocket 開發。
  3. SockJS-client:SockJS 提供了一個瀏覽器端的 JavaScript 客戶端庫,用于與 SockJS 服務器建立連接。它可以在不支持 WebSocket 的瀏覽器上自動降級到其他傳輸方式,具有良好的兼容性。
  4. RxJS WebSocketSubject:RxJS 是一個流式編程庫,它提供了 WebSocketSubject 類,可以將 WebSocket 轉換為可觀察對象,方便進行響應式編程。
  5. autobahn.js:autobahn.js 是一個用于實現 WebSocket 和 WAMP(Web Application Messaging Protocol)的客戶端庫,在瀏覽器中可以方便地使用它來與 WAMP 路由進行通信。

這些庫都提供了良好的接口封裝和功能特性,可以根據項目需求選擇適合的庫來進行瀏覽器端的 WebSocket 開發。

總結

WebSocket 協議是一種基于 TCP 的應用層協議,它提供了在客戶端和服務器之間進行雙向通信的能力。相比傳統的 HTTP 協議,它具有更低的延遲和更高的實時性。

WebSocket 協議通過建立一條持久化的連接來實現雙向通信,從而避免了 HTTP 協議中頻繁建立和斷開連接的過程,減少了網絡開銷和服務器的負擔??蛻舳丝梢园l送消息給服務器,服務器也可以發送消息給客戶端,實現了真正的雙向通信。

在使用 WebSocket 協議時,客戶端和服務器會進行一次握手過程,以建立起 WebSocket 連接。握手過程中,客戶端會發送一個 HTTP 請求,請求頭中包含 Upgrade 和 Connection 字段,告訴服務器它希望升級到 WebSocket 連接。服務器收到請求后會返回一個 HTTP 響應,響應頭中包含 Upgrade 和 Connection 字段,以及一個 Sec-WebSocket-Accept 字段,用于驗證請求的合法性。握手成功后,客戶端和服務器就可以開始使用 WebSocket 協議進行通信了。

WebSocket 協議支持二進制數據和文本數據的傳輸,開發者可以根據實際需求進行選擇。同時,WebSocket 還提供了心跳機制、自動重連等功能,可以提高連接的穩定性和可靠性。

總之,WebSocket 協議在實時通信、游戲、在線聊天等場景中得到了廣泛應用,它為 Web 應用提供了更加高效、可靠的雙向通信方式。

參考資料

[1]

https://cloud.tencent.com/developer/tools/blog-entry?target=https%3A%2F%2Flink.juejin.cn%2F%3Ftarget%3Dhttp%253A%252F%252Fsocket.io%252F&source=article&objectId=2371055: https://cloud.tencent.com/developer/tools/blog-entry?target=https%3A%2F%2Flink.juejin.cn%2F%3Ftarget%3Dhttp%253A%252F%252Fsocket.io%252F&source=article&objectId=2371055

[2]

https://cloud.tencent.com/developer/tools/blog-entry?target=https%3A%2F%2Flink.juejin.cn%2F%3Ftarget%3Dhttp%253A%252F%252Fsocket.io%252F&source=article&objectId=2371055: https://cloud.tencent.com/developer/tools/blog-entry?target=https%3A%2F%2Flink.juejin.cn%2F%3Ftarget%3Dhttp%253A%252F%252Fsocket.io%252F&source=article&objectId=2371055



該文章在 2024/4/28 20:58:38 編輯過
關鍵字查詢
相關文章
正在查詢...
點晴ERP是一款針對中小制造業的專業生產管理軟件系統,系統成熟度和易用性得到了國內大量中小企業的青睞。
點晴PMS碼頭管理系統主要針對港口碼頭集裝箱與散貨日常運作、調度、堆場、車隊、財務費用、相關報表等業務管理,結合碼頭的業務特點,圍繞調度、堆場作業而開發的。集技術的先進性、管理的有效性于一體,是物流碼頭及其他港口類企業的高效ERP管理信息系統。
點晴WMS倉儲管理系統提供了貨物產品管理,銷售管理,采購管理,倉儲管理,倉庫管理,保質期管理,貨位管理,庫位管理,生產管理,WMS管理系統,標簽打印,條形碼,二維碼管理,批號管理軟件。
點晴免費OA是一款軟件和通用服務都免費,不限功能、不限時間、不限用戶的免費OA協同辦公管理系統。
Copyright 2010-2025 ClickSun All Rights Reserved