ruby-on-rails Remote:在简单表单上为true,不发出 AJAX 请求,而是呈现空白页面

wnavrhmk  于 2023-03-24  发布在  Ruby
关注(0)|答案(1)|浏览(86)

我知道有很多关于这个问题的帖子,但大多数都很旧,没有一个包括ActionCable。所以挑战来了:
我正在用ActionCable构建一个聊天功能,消息广播成功,消息也立即呈现给接收者,但在发送者端,像往常一样呈现一个空白页面来发送请求(message create form)。我正在接收一个status code of 200,我在我的message create方法中触发它,但我显然想留在同一个页面上,并通过JS插入HTML(使用JS的刺激)。
app/views/chats/show.html.erb -创建消息的表单

<%= simple_form_for [@chat, @message], remote: true,
    html: {
      class: 'chat__form',
      data: {
        action: "turbo:submit-end->chat-subscription#resetForm"
      }
    } do |f| %>
      <%= f.input :content,
                  label: false,
                  placeholder: "Message ##{@name}",
                  input_html: { class: 'chat__form-input' } %>
      <%= button_tag(class: 'chat__form-button') do %>
        <%= image_tag('icons/send.svg') %>
      <% end %>
  <% end %>

app/controllers/messages_controller.rb -创建方法

def create
    @chat = Chat.find(params[:chat_id])
    @message = Message.new(message_params)
    @message.chat = @chat
    @message.user = current_user
    if @message.save
      ChatChannel.broadcast_to(
        @chat,
        render_to_string(partial: "messages/message", locals: {message: @message})
      )
      head :ok
    end
  end

app/javascript/controllers/chat_subscription_controller.js

import { Controller } from "@hotwired/stimulus"
import { createConsumer } from "@rails/actioncable"

export default class extends Controller {
  static values = { chatId: Number }
  static targets = ['messages', 'form']

  connect() {
    this.channel = createConsumer().subscriptions.create(
      { channel: 'ChatChannel', id: this.chatIdValue },
      { received: data => this.#insertMessageAndScrollDown(data) }
    )
    console.log(`Subscribed to the chat with the id ${this.chatIdValue}.`)
    console.log(this.messagesTarget)
  }

  #insertMessageAndScrollDown(data) {
    this.messagesTarget.insertAdjacentHTML('beforeend', data)
    this.messagesTarget.scrollTo(0, this.messagesTarget.scrollHeight)
  }

  resetForm(event) {
    event.preventDefault()
    event.target.reset()
  }

  disconnect() {
    console.log('Unsubscribed from the chat')
    this.channel.unsubscribe()
  }
}

就像我说的-它在接收器端完美地工作。因此,我可以确保频道设置正确,我的JS方法也工作。我认为遥控器:true没有触发,表单正在本地提交。我只是不知道我的设置缺少了什么。我相信因为我使用Vite而不是Webpacker,所以有些设置不正确。但我也找不到任何资源。
那Redis呢,它是怎么起作用的?

qij5mzcb

qij5mzcb1#

我给了它一个快速的尝试,这是一个工作设置:

rails new hello_vite --skip-javascript
cd hello_vite

bundle add turbo-rails stimulus-rails
mkdir app/javascript
bin/rails turbo:install:node
bin/rails stimulus:install:node

bundle add vite_rails
bundle exec vite install

bin/rails g scaffold Chat
bin/rails g scaffold Message content:text
bin/rails g channel Chat
bin/rails g stimulus chat_subscription
bin/rails db:migrate
bin/rails runner Chat.create
bin/vite dev
bin/rails s

大概就是这样,也许你缺少turbo-rails gem,所以服务器无法识别 TURBO_STREAM 格式,请检查rails控制台:
一个三个三个一个

相关问题