WebSocket原理及如何使用

WebSocket原理及如何使用

 

它有不少名字; WebSocket，WebSocket協議和WebSocket API。從首選的消息傳遞應用程序到流行的在線多人遊戲，WebSocket在當今最經常使用的Web應用程序中是相當重要的。

 

根據定義，WebSocket是經過單個TCP鏈接提供全雙工（雙向通訊）通訊信道的計算機通訊協議。此WebSocket API可在用戶的瀏覽器和服務器之間進行雙向通訊。用戶能夠向服務器發送消息並接收事件驅動的響應，而無需輪詢服務器。 它可讓多個用戶鏈接到同一個實時服務器，並經過API進行通訊並當即得到響應。

WebSockets容許用戶和服務器之間的流鏈接，並容許即時信息交換。在聊天應用程序的示例中，經過套接字聚集消息，能夠實時與一個或多個用戶交換，具體取決於誰在服務器上「監聽」（鏈接）。

 

WebSockets不只限於聊天/消息傳遞應用程序。它們適用於須要實時更新和即時信息交換的任何應用程序。一些示例包括但不限於：現場體育更新，股票行情，多人遊戲，聊天應用，社交媒體等等。

 

WebSockets還會考慮代理和防火牆等危險，使得任何鏈接均可以進行流式傳輸。它支持單個鏈接的上游和下游通訊。 它還減輕了服務器的負擔，容許現有機器支持同時鏈接。

 

這是現代Web應用程序中的示例實現WebSockets。在下面的示例中，我使用WebSockets做爲帶有Rails 5 API後端和React.js前端的即時消息應用程序。這毫不是一個指南，而是一個如何使用它的例子。我使用了Action Cable，它是Rails的包裝器，能夠無縫地集成Ruby中WebSockets的主要功能，並容許在整個域模型中輕鬆實現。 它內置於Rails 5.2中，所以無需安裝/執行任何外部庫或gem。

 

它的工做原理是Pub-Sub（發佈和訂閱）。它適用於發送者將數據（發佈者）發送給抽象數量的收件人（訂閱者），而無需指定他們是誰。

 

第一步是將服務器掛載到路由文件中，這樣前端就能夠從流中獲得endpoint：

在第5行，我設置了ActionCable服務器端點

 

下一步是在後端建立一個通道，以便在實時建立消息時對消息進行流式處理。

這是管理消息建立以及廣播消息的消息通道

 

這裏咱們有兩種方法，訂閱和接收。訂閱的第一種方法容許將消息通道流式傳輸到鏈接的用戶或訂戶。 接收的第二種方法管理消息建立和廣播消息。我實現了JWT用戶身份驗證，以即可以將消息追溯到用戶，只有具備有效用戶賬戶的消息才能建立消息。

 

對於個人應用程序的前端，我使用它們npm package actioncable從客戶端到服務器端鏈接到WebSocket API。 這個包直接來自於Rails的團隊。 使用此庫，我實例化了一個cableApp實例，並將其做爲props傳遞給須要訪問WebSocket鏈接的組件。

導入actionCable並建立了一個cableApp實例，而後將cableApp鏈接到個人後端端點「/ cable」並將其傳遞給須要鏈接的組件

 

而後，我經過React.js生命週期方法componentDidMount（）鏈接到WebSocket的鏈接，並在每次將組件安裝到DOM時創建鏈接。

在componentDidMount（）中，我創建了客戶端以鏈接到WebSocket協議，該協議從個人Rails API中的「messagesChannel」流式傳輸。

 

如今，每次建立消息並將其發送到接收方法時，訂閱（d）用戶將當即接收並可以實時查看消息。此實現支持訂閱同一頻道的多個用戶。所以，若是多個用戶簽名並訂閱了相同的頻道，他們能夠發送全部訂閱者都能看到的消息以及從其餘訂閱者接收消息。固然，你能夠限制爲兩我的，並使它成爲p2p，可是那樣還有什麼樂趣呢？

 

我但願經過閱讀本文，能夠看到WebSockets的潛力。它使本身成爲一個寶貴的資源，在這個時代，信息交換須要很快完成。 但願讀者將在本身的項目中實現它們。