在 Rails 和 React 中实现推送聊天答案

【问题标题】：Implementing Pusher Chat in Rails and React在 Rails 和 React 中实现推送聊天
【发布时间】：2018-07-06 22:55:02
【问题描述】：

我正在使用this repo 在 Rails 和 React 项目中的 2 个用户之间创建聊天系统。我已经能够将用户输入记录到控制台中，并且根据 repo 创建了 messages_controller 和 message_threads_controller。

但是，我无法将消息持久保存到 Rails db，然后在将消息发送到 Pusher 之前使用 Pusher 对用户进行身份验证。主要是因为消息发送到 Rails 时，from_uid、to_uid 和 thread_uid 都不存在。像这样将消息发送到rails：

sendMessage = (event) => {
    event.preventDefault();
    const {message} = this.state;
    axios.post('/api/v1/messages', {message: message})
        .then((response) => {
            console.log(response);
        })
    console.log('send Message')
    this.setState({'message': message}); 
    console.log(this.state.message);
  }

在我的 routes.rb 文件中我有这个

resources :messages
get 'threads/:id', to: 'message_threads#index'
post '/pusher/auth', to: 'pusher#auth'

我缺少一些必需的参数，这是我得到的错误。 Pusher::Error - Bad request: Missing required parameter:

按照this tutorial的流程是，消息需要先被rails数据库持久化，然后再发送到Pusher。

我现在的问题是如何生成在the app here 的 React 端使用的额外参数（from_uid、thread_uid、to_uid）以启用消息创建？

另外，如何使用 Pusher 对用户进行身份验证？

根据这个Stack Overflow link，他们从Rails 中得到这样的CSRF 值-csrf = $('meta[name=csrf-token]').attr('content')。但我无法在 React 中实现相同的功能。

【问题讨论】：

标签： ruby-on-rails ruby pusher

【解决方案1】：

来自 git repo 的作者的回答。

我在这里创建的示例非常简单，但下面是一些要点，我希望能解释您如何扩展它。

将用户模型和线程模型添加到 Rails 应用程序
创建用户后，为该用户生成一个公共 UID（您可以使用 Ruby 内置的SecureRandom.uuid 来生成 id）并将其保存到数据库中。这将成为您将在 javascript 中公开以允许用户之间通信的该用户的 ID。所有用户都有一个 UID。
创建线程时，生成线程 UID，这将成为正在进行的对话的唯一 ID
添加 Users_Threads has_and_belongs_to_many 关系，以便您最终可以跟踪订阅了哪些线程的用户
当 React 应用加载时，使用 Ajax 请求获取当前用户的好友列表（返回用户详细信息列表 + 他们的 uid）并请求获取当前用户的所有线程
例如，假设一个名为 Fred 的用户点击了一个名为 Bob 的用户并想向 Bob 发送一条消息，但他们目前没有线程。 Fred 键入消息，单击提交，然后您发送一个 Ajax 请求，其中包含消息文本、from_uid (Fred) 和 to_uid (Bob)，其中 thread_uid 为空（因为没有现有的 convo 和现有的线程）。
然后，您的 Rails 应用程序在控制器上接收到该请求，并看到 Fred 正在尝试向 Bob 发送消息，并且线程 ID 为空，因此控制器创建了一个新线程（具有自己的 UID），然后将两个条目添加到users_threads 一个用于新的 thread_uid 和 bob 的 uid，另一个用于新的 thread_uid 和 Fred 的 uid。之后，您将使用该 thread_uid 和参与者详细信息创建一条消息。

您可能还希望用户看到他们是新线程的一部分，而不必重新加载页面，因此我认为您希望订阅 Pusher 频道只是为了通知用户有新线程。所以我会说在 UserThreads 模型中创建一个新线程后，您可以发送类似Pusher.trigger('threads_channel', user_secret_uid, { thread: new_thread_uid }) 的内容。您还需要确保在 react 应用程序中每个用户都为其 user_secret_uid 订阅了threads_channel。为了安全起见，我会确保这是一个与消息不同的 uid，否则人们可以订阅不同用户线程的列表。

【讨论】：