WebSocket工作原理及使用方法

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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