它有很多名字; WebSocket，WebSocket協(xié)議和WebSocket API。從首選的消息傳遞應(yīng)用程序到流行的在線多人游戲，WebSocket在當(dāng)今最常用的Web應(yīng)用程序中是至關(guān)重要的。

根據(jù)定義，WebSocket是通過單個TCP連接提供全雙工（雙向通信）通信信道的計算機通信協(xié)議。此WebSocket API可在用戶的瀏覽器和服務(wù)器之間進行雙向通信。用戶可以向服務(wù)器發(fā)送消息并接收事件驅(qū)動的響應(yīng)，而無需輪詢服務(wù)器。 它可以讓多個用戶連接到同一個實時服務(wù)器，并通過API進行通信并立即獲得響應(yīng)。

WebSockets允許用戶和服務(wù)器之間的流連接，并允許即時信息交換。在聊天應(yīng)用程序的示例中，通過套接字匯集消息，可以實時與一個或多個用戶交換，具體取決于誰在服務(wù)器上“監(jiān)聽”（連接）。

WebSockets不僅限于聊天/消息傳遞應(yīng)用程序。它們適用于需要實時更新和即時信息交換的任何應(yīng)用程序。一些示例包括但不限于：現(xiàn)場體育更新，股票行情，多人游戲，聊天應(yīng)用，社交媒體等等。

WebSockets還會考慮代理和防火墻等危險，使得任何連接都可以進行流式傳輸。它支持單個連接的上游和下游通信。 它還減輕了服務(wù)器的負擔(dān)，允許現(xiàn)有機器支持同時連接。

這是現(xiàn)代Web應(yīng)用程序中的示例實現(xiàn)WebSockets。在下面的示例中，我使用WebSockets作為帶有Rails 5 API后端和React.js前端的即時消息應(yīng)用程序。這絕不是一個指南，而是一個如何使用它的例子。我使用了Action Cable，它是Rails的包裝器，可以無縫地集成Ruby中WebSockets的主要功能，并允許在整個域模型中輕松實現(xiàn)。 它內(nèi)置于Rails 5.2中，因此無需安裝/執(zhí)行任何外部庫或gem。

它的工作原理是Pub-Sub（發(fā)布和訂閱）。它適用于發(fā)送者將數(shù)據(jù)（發(fā)布者）發(fā)送給抽象數(shù)量的收件人（訂閱者），而無需指定他們是誰。

第一步是將服務(wù)器掛載到路由文件中，這樣前端就可以從流中得到endpoint：

在第5行，我設(shè)置了ActionCable服務(wù)器端點

下一步是在后端創(chuàng)建一個通道，以便在實時創(chuàng)建消息時對消息進行流式處理。

這是管理消息創(chuàng)建以及廣播消息的消息通道

這里我們有兩種方法，訂閱和接收。訂閱的第一種方法允許將消息通道流式傳輸?shù)竭B接的用戶或訂戶。 接收的第二種方法管理消息創(chuàng)建和廣播消息。我實現(xiàn)了JWT用戶身份驗證，以便可以將消息追溯到用戶，只有具有有效用戶帳戶的消息才能創(chuàng)建消息。

對于我的應(yīng)用程序的前端，我使用它們npm package actioncable從客戶端到服務(wù)器端連接到WebSocket API。 這個包直接來自于Rails的團隊。 使用此庫，我實例化了一個cableApp實例，并將其作為props傳遞給需要訪問WebSocket連接的組件。

導(dǎo)入actionCable并創(chuàng)建了一個cableApp實例，然后將cableApp連接到我的后端端點“/ cable”并將其傳遞給需要連接的組件

然后，我通過React.js生命周期方法componentDidMount（）連接到WebSocket的連接，并在每次將組件安裝到DOM時建立連接。

在componentDidMount（）中，我建立了客戶端以連接到WebSocket協(xié)議，該協(xié)議從我的Rails API中的“messagesChannel”流式傳輸。

現(xiàn)在，每次創(chuàng)建消息并將其發(fā)送到接收方法時，訂閱（d）用戶將立即接收并能夠?qū)崟r查看消息。此實現(xiàn)支持訂閱同一頻道的多個用戶。因此，如果多個用戶簽名并訂閱了相同的頻道，他們可以發(fā)送所有訂閱者都能看到的消息以及從其他訂閱者接收消息。當(dāng)然，你可以限制為兩個人，并使它成為p2p，但是那樣還有什么樂趣呢？

我希望通過閱讀本文，可以看到WebSockets的潛力。它使自己成為一個寶貴的資源，在這個時代，信息交換需要很快完成。 希望讀者將在自己的項目中實現(xiàn)它們。