WebSocket原理及如何使用

Original 翻译张春新钛云服 2022-01-05

它有很多名字; 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的潜力。它使自己成为一个宝贵的资源，在这个时代，信息交换需要很快完成。希望读者将在自己的项目中实现它们。