ActionCable 在操作后显示一个空白页面答案

【问题标题】：ActionCable displays an empty page after actionActionCable 在操作后显示一个空白页面
【发布时间】：2016-09-19 02:40:39
【问题描述】：

我正在关注关于 Rails 5 ActionCable 的 Michael Hartl tutorial，以建立一个简单的聊天，我在 MessageController 中的 create 操作中出现问题：

  def create
    message = current_user.messages.build(message_params)
    if message.save
      ActionCable.server.broadcast 'room_channel',
                                     content:  message.content,
                                     username: message.user.username
      head :ok
    end
  end

直到head :ok，然后显示一个空的 HTML 页面。日志是：

Processing by MessagesController#create as HTML
  Parameters: {"utf8"=>"✓", "authenticity_token"=>"h9UsB78aX8mO8Nyn8eZEUuDzAOxL4V7UCMwNuTfwALliMv7OCkcUIeR4/xXIcvPjwq9H1bphjn6G96G+0VYisw==", "message"=>{"content"=>"oi"}, "commit"=>"Send"}
  User Load (1.2ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = ? LIMIT ?  [["id", 1], ["LIMIT", 1]]
  Message Load (2.1ms)  SELECT  "messages".* FROM "messages" ORDER BY "messages"."created_at" DESC LIMIT ?  [["LIMIT", 50]]
   (0.3ms)  begin transaction
  SQL (9.3ms)  INSERT INTO "messages" ("content", "user_id", "created_at", "updated_at") VALUES (?, ?, ?, ?)  [["content", "oi"], ["user_id", 1], ["created_at", 2016-09-19 02:12:58 UTC], ["updated_at", 2016-09-19 02:12:58 UTC]]
   (9.1ms)  commit transaction
[ActionCable] Broadcasting to room_channel: {:content=>"oi", :username=>"alice"}
Completed 200 OK in 69ms (ActiveRecord: 22.0ms)


RoomChannel transmitting {"content"=>"oi", "username"=>"alice"} (via streamed from room_channel)
Finished "/cable/" [WebSocket] for 10.0.2.2 at 2016-09-19 02:12:58 +0000
RoomChannel stopped streaming from room_channel

（之后我可以刷新页面，消息正常显示）

为什么会这样？

我的 RoomChanel 课程：

class RoomChannel < ApplicationCable::Channel
  def subscribed
    stream_from "room_channel"
  end

  def unsubscribed
    # Any cleanup needed when channel is unsubscribed
  end

end

我的房间.咖啡

App.room = App.cable.subscriptions.create "RoomChannel",
connected: ->
  # Called when the subscription is ready for use on the server

disconnected: ->
  # Called when the subscription has been terminated by the server

received: (data) ->
  alert data.content

【问题讨论】：

我完成了教程。然而，这并不能回答我关于“为什么”会发生这种情况的问题，但我对遇到同样麻烦的其他人的建议是：删除 head :ok。显然这是不必要的，因为如果我在操作中添加一个测试 whit assert_response :success，它就会通过。
我建议您将其添加为答案，而不是评论，以便它可以被投票，更明显等。这对我也有用。
很高兴知道，@EdRuder。已添加答案。

标签： ruby-on-rails actioncable

【解决方案1】：

我知道答案已经被接受，但这个解决方案对我有用，而无需删除 head :ok，也许它可以帮助某人。

通常在开发环境中人们正在运行localhost:3000，但我在不同的端口上运行localhost:3030。

在这种情况下，我必须为该端口添加一个允许的请求来源，如下所示：

config.action_cable.allowed_request_origins = [
      'http://localhost:3030'
  ]

致我的/config/environments/development.rb

【讨论】：

【解决方案2】：

在提出建议后，我将添加解决此问题的方法作为答案。它没有回答为什么会发生这种情况，而是解决问题。

解决方法是：删除head :ok。

显然这是不必要的，因为如果我在操作中添加一个测试 whit assert_response :success，它就会通过。

【讨论】：

不幸的是，这将为我返回“未找到 MessagesController#create 的模板，渲染头：no_content”。它没有显示通常的白屏，但按钮似乎没有做任何事情。如果我刷新，消息是可见的。

【解决方案3】：

我正在关注 Michael 的 ActionCable 教程并且遇到了同样的问题。我认为这是由于表单部分_anything.html.erb 的格式造成的。

app/views/messages/_message_form.html

在学习本教程时，您将升级到 Action Cable 功能。但是在_message_form 部分中，它仍然是通常的HTTP request。因此，在您使用messages_controller.rb 广播消息后，浏览器会呈现一个空白页面，因为表单已经呈现。

app/views/messages/_message_form.html，原文：

<div class="message-input">
  <%= form_for(@message) do |f| %>
    <%= f.text_area :content %>
    <%= f.submit "Send" %>
  <% end %>
</div>

因此，您必须将remote: true 添加到表单中，如下所示：

<div class="message-input">
  <%= form_for(@message, remote: true) do |f| %>
    <%= f.text_area :content %>
    <%= f.submit "Send" %>
  <% end %>
</div>

添加remote: true 会发出一个 JS 请求（在本例中为 Ajax）

引用迈克尔：

您可以通过提交一条消息来验证它是否按需要显示，但在事实上这是作弊，因为清单 6 中的表单当前正在提交一个普通的HTTP POST 请求，导致页面刷新。为了要使用 Action Cable，我们需要更改表单以提交远程请求提交 Ajax 请求而不刷新页面。我们可以通过在对form_for 的调用中包括remote: true 选项。

请注意，我在 localhost:3000 中进行所有操作

【讨论】：