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的潜力。它使本身成为一个宝贵的资源，在这个时代，信息交换须要很快完成。 但愿读者将在本身的项目中实现它们。