如何从React组件订阅Redis通道

Question

如何在React组件挂载时（即在componentDidMount()中）订阅Redis频道？

在Internet上，我几乎到处都看到使用Node.js的Redis实现，但找不到如何在React App中使用的足够提示。

实际上，我想在不刷新页面的情况下更新我的电子商务仪表板（React应用程序）数据。在后端中，我使用了Django REST框架。当任何API被触发以更改任何数据时，Python代码会执行其工作，并在特定的Redis频道中发布消息。

我想从客户端（React应用程序）订阅该频道，以便可以消费此消息并实时更新其内容。

- Shamim

Answer 1

一个React组件（客户端技术）不应该能够访问Redis（服务器技术），出于明显的安全考虑。

如果你在服务器端使用React来生成响应，并使用Node进行React开发，那么就应该由Node进行此访问。

如果你想要从Web前端（通过Web浏览器）访问Redis，则必须建立以下体系结构：

• React使用WebSocket访问服务器并监听消息。
• 使用Socket.IO的Node.js或使用SignalR的ASP.NET Core访问Redis，并通过WebSocket技术向客户端发送更改通知。

如果您想了解更多如何做，请描述您在客户端使用的技术堆栈。

但简而言之，对于客户端，最好使用Redux Observable堆栈。 在这种情况下，将使用epic每当服务器通知有关更改时更新Redux状态。 如果你对RxJS不熟悉（这很容易理解！），那么使用MobX会更容易（https://mobx.js.org/README.html）

- Stephane

---

正如我之前提到的，描述一下你在客户端所用的堆栈以及服务器技术。 - Stephane

@shamim 只需在谷歌上搜索 react redux "redis" django，您就会找到许多教程博客。但请注意，从技术上讲，有两个完全独立的任务：一方面是Django+Redis，另一方面是Django+react+redux。您不需要一个涵盖所有内容的教程，只需要两个好的教程，一个用于每个任务。这将提供更多的搜索结果，因此您将拥有更好的教程选择。 - Oliver

好的，但我认为你没有遵循Stephane的建议：“React组件（客户端技术）不应该能够访问Redis（服务器技术），这是显而易见的安全问题”，这是一个大错误。所以如果你实际上没有遵循他的建议，那么接受他的答案有点奇怪！ :) - Oliver

我对这个领域不是很了解，但Django是一个Python Web框架。由于Python不是Web浏览器技术，我认为Django就像ASP.NET是.NET的一样，或者像Express是Node的一样。但是，我发现允许Web前端访问Redis服务器非常不安全。如果我是基础设施管理员，除了几个服务器应用程序之外，我会禁止任何访问Redis服务器的权限。 - Stephane

@Oliver，谢谢你的时间和评论。实际上，我几乎实现了Stephane提到的架构（即，“React使用websocket访问服务器”和“Node.js中的服务器访问Redis”）。这两个点使我意识到建立通信的必要性。但我仍然不知道一个React客户端应用程序是否可以在没有任何套接字的情况下与Redis服务器通信。这是否真的有可能？ - Shamim