国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

WebSocket，不再“輪詢”

nodejh / 1700人閱讀

摘要：在尚未被眾多瀏覽器實現和發布的時期，開發者在開發需要接收來自服務器的實時通知應用程序時，不得不求助于一些來模擬實時連接以實現實時通信，最流行的一種方式是長輪詢。

1.前言
本文先講解WebSocket的應用場景和特點，然后通過前后端示例代碼講解，展示在實際的開發中的應用。
1.1. 應用場景
WebSocket是一種在單個TCP連接上進行全雙工通信的協議, 是為了滿足基于 Web 的日益增長的實時通信需求而產生的。我們平時接觸的大多數是HTTP的接口，但是在有些業務場景中滿足不了我們的需求，這時候就需要用到WebSocket。簡單舉兩個例子：

（1） 頁面地圖上要實時顯示在線人員坐標：傳統基于HTTP接口的處理方式是輪詢，每次輪詢更新最新的坐標信息。

（2）手機的付款碼頁面，在外界設備掃描付款碼支付成功后，手機付款碼頁面提示“支付成功”并自動關閉：傳統方式還是輪詢，付款碼頁面一直調用接口，直到從服務器獲取成功支付的狀態后，手機提示“支付成功”并關閉付款碼頁面。

HTTP 協議有一個缺陷：通信只能由客戶端發起。這種單向請求的特點，注定了如果服務器有連續的狀態變化，客戶端要獲知就非常麻煩。我們只能使用"輪詢"：每隔一段時候，就發出一個詢問，了解服務器有沒有新的信息。但這種方式即浪費帶寬（HTTP HEAD 是比較大的），又消耗服務器 CPU 占用（沒有信息也要接受請求）。

在WebSocket API尚未被眾多瀏覽器實現和發布的時期，開發者在開發需要接收來自服務器的實時通知應用程序時，不得不求助于一些“hacks”來模擬實時連接以實現實時通信，最流行的一種方式是長輪詢?。?長輪詢主要是發出一個HTTP請求到服務器，然后保持連接打開以允許服務器在稍后的時間響應（由服務器確定）。為了這個連接有效地工作，許多技術需要被用于確保消息不錯過，如需要在服務器端緩存和記錄多個的連接信息（每個客戶）。雖然長輪詢是可以解決這一問題的，但它會耗費更多的資源，如CPU、內存和帶寬等，要想很好的解決實時通信問題就需要設計和發布一種新的協議

1.2. WebSocket定義
WebSocket是一種協議，是一種與HTTP 同等的網絡協議，兩者都是應用層協議，都基于 TCP 協議。但是 WebSocket 是一種雙向通信協議，在建立連接之后，WebSocket 的 server 與 client 都能主動向對方發送或接收數據。同時，WebSocket在建立連接時需要借助 HTTP 協議，連接建立好了之后 client 與 server 之間的雙向通信就與 HTTP 無關了。

相比于傳統HTTP 的每次“請求-應答”都要client 與 server 建立連接的模式，WebSocket 是一種長連接的模式。就是一旦WebSocket 連接建立后，除非client 或者 server 中有一端主動斷開連接，否則每次數據傳輸之前都不需要HTTP 那樣請求數據。

WebSocket 對象提供了一組 API，用于創建和管理 WebSocket 連接，以及通過連接發送和接收數據。瀏覽器提供的WebSocket API很簡潔，調用示例如下：

HTTP、WebSocket 等應用層協議，都是基于 TCP 協議來傳輸數據的。我們可以把這些高級協議理解成對 TCP 的封裝。既然大家都使用 TCP 協議，那么大家的連接和斷開，都要遵循 TCP 協議中的三次握手和四次握手 ，只是在連接之后發送的內容不同，或者是斷開的時間不同。對于 WebSocket 來說，它必須依賴 HTTP 協議進行一次握手 ，握手成功后，數據就直接從 TCP 通道傳輸，與 HTTP 無關了。

2.后端WebSocket服務（SpringBoot）
pom.xml

在配置類@Configuration下注冊ServerEndpointExporter的Bean，這個bean會自動注冊使用了@ServerEndpoint注解聲明的Websocket endpoint

創建WebSocket的工具類WebSocket.java

3.到此WebSocket的代碼就結束了，運行該SpringBoot項目，對應的WebSocket地址為：ws://127.0.0.1:port/websocket/{userId}
可以在 WebSocket在線測試網站 上測試后端接口。

前端WebSocket調用（Angular）
3.1. npm依賴
安裝 rxjs 的依賴庫

安裝websocket 依賴庫

安裝類型定義文件

3.2. WebSocket Service
創建 WebSocket 的Service文件

上述命令生成了websocket.service.ts文件，示例代碼為：

3.3. Demo演示
簡單做個demo頁面，有留言板和輸入框。同時開多個瀏覽器頁面，只要在任意一個頁面的輸入框中輸入文字，所有頁面的留言板上都會實時顯示出來。

示例的代碼提供，app.component.html

app.component.ts

app.component.css

本人創業團隊產品MadPecker，主要做BUG管理、測試管理、應用分發，網址:www.madpecker.com，有需要的朋友歡迎試用、體驗！
本文為MadPecker團隊技術人員編寫，轉載請標明出處

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/74902.html

相關文章

  • 利用express+socket.io實現一個簡易版聊天室

    摘要：用偽代碼來模擬下長輪詢的過程前端利用下面函數進行請求后端代碼做如下更改利用隨機數的大小來模擬是否有新數據有新數據來了長輪詢的確減少了請求的次數，但是它也有著很大的問題，那就是耗費服務器的資源。 寫在前面 最近由于利用node重構某個項目，項目中有一個實時聊天的功能，于是就研究了一下聊天室，在線demo|源碼，歡迎大家反饋。這個聊天室的主要利用到了socket.io和express。這個...

    Chaz 評論0 收藏0

  • WebSockets實戰：在 Node 和 React 之間進行實時通信

    摘要：服務器推遲響應，直到發生更改更新或超時。旨在取代現有的雙向通信技術。只要我們對套接字事件和有了充分的了解，理解和實現就非常簡單。 翻譯：瘋狂的技術宅 原文：blog.logrocket.com/websockets-… showImg(https://user-gold-cdn.xitu.io/2019/5/21/16ada008fc1f81d7); Web 為了支持客戶端和服務器之間的全...

    DevWiki 評論0 收藏0

  • 初探WebSocket

    摘要：流控制通常就是在客戶端的頁面使用一個隱藏的窗口向服務端發出一個長連接的請求。和長鏈接以上幾種服務器推的技術中長輪詢和流控制其實都是基于長鏈接來實現的，也就是中所謂的。通信協議于年被定為標準，并被所補充規范。 初探WebSocket node websocket socket.io 我們平常開發的大部分web頁面都是主動‘拉’的形式，如果需要更新頁面內容，則需要刷新一個，但Slack工...

    Channe 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<