使用ActionCable频道时，ActionController :: RoutingError（没有路由与[POST]“ / blogs / my-blog-post-1”匹配）

Question

This is an application I started developing as part of a code-along that was produced by DevCamp While it has been great at helping me understand Rails 5 better, it is a little out of date in some places and I have had some really interesting times debugging things that have changed since its release.

I am at a step where I attempt to set up a blog with comments wired through ActionCable so they update live without refreshing the page. When I post them I receive an error and, of course, the page doesn't update the way I would like.

ActionController::RoutingError (No route matches [POST] "/blogs/my-blog-post-1")

Here is what I know I've changed to implement this. I'm fairly familiar with Ruby and Rails, but I am new to Javascript and its libraries. Any help you could provide would be much appreciated ( view github repo branch here )

routes.rb

Rails.application.routes.draw do
  devise_for :users, path: '', path_names: { sign_in: 'login', sign_out: 'logout', sign_up: 'register' }
  resources :folios, except: [:show] do
    put :sort, on: :collection
  end

  get 'folio/:id', to: 'folios#show', as: 'folio_show'

  get 'about-me', to: 'pages#about'
  get 'contact', to: 'pages#contact'

  resources :blogs do
    member do
      get :toggle_status
    end
  end

  mount ActionCable.server => '/cable'

  root to: 'pages#home'
end

Blogs Channel

class BlogsChannel < ApplicationCable::Channel
  def subscribed
    stream_from "blogs_#{params['blog_id']}_channel"
  end

  def unsubscribed
  end

  def send_comment(data)
    current_user.comments.create!(content: data['comment'], blog_id: data['blog_id'])
  end
end

connection.rb

module ApplicationCable
  class Connection < ActionCable::Connection::Base
    identified_by :current_user

    def guest_user
      guest = GuestUser.new
      guest.id = guest.object_id
      guest.name = "Guest User"
      guest.first_name = "Guest"
      guest.last_name = "User"
      guest.email = 'guest@guestuser.com'
      guest = GuestUser.new
      guest = GuestUser.new
      guest = GuestUser.new
      guest = GuestUser.new
      guest
    end

    def connect
      self.current_user = find_verified_user || guest_user
      logger.add_tags 'ActionCable', current_user.email
      logger.add_tags 'ActionCable', current_user.id
    end

    protected

    def find_verified_user
      if verified_user = env['warden'].user
        verified_user
      end
    end

  end
end

blogs.coffee (now in the proper file directory)

jQuery(document).on 'turbolinks:load', ->
  comments = $('#comments')
  if comments.length > 0
    App.global_chat = App.cable.subscriptions.create {
      channel: "BlogsChannel"
      blog_id: comments.data('blog-id')
    },
    connected: ->
    disconnected: ->
    received: (data) ->
      comments.append data['comment']
    send_comment: (comment, blog_id) ->
      @perform 'send_comment', comment: comment, blog_id: blog_id
  $('#new_comment').on 'ajax:before', (e) ->
    $this = $(this)
    textarea = $this.find('#comment_content')
    if $.trim(textarea.val()).length > 1
      App.global_chat.send_comment textarea.val(),
      comments.data('blog-id')
      textarea.val('')
    e.preventDefault()
    return false

Compiled JS from coffeescript

var comments;

comments = $('#comments');

if (comments.length > 0) {
  App.global_chat = App.cable.subscriptions.create({
    channel: "BlogsChannel",
    blog_id: comments.data('blog-id')
  }, {
    connected: function() {},
    disconnected: function() {},
    received: function(data) {
      return comments.append(data['comment']);
    },
    send_comment: function(comment, blog_id) {
      return this.perform('send_comment', {
        comment: comment,
        blog_id: blog_id
      });
    }
  });
}

$('#new_comment').on('ajax:before', function(e) {
  var $this, textarea;
  $this = $(this);
  textarea = $this.find('#comment_content');
  if ($.trim(textarea.val()).length > 1) {
    App.global_chat.send_comment(textarea.val(), comments.data('blog-id'));
    textarea.val('');
  }
  e.preventDefault();
  return false;
});

Answer 1

It looks like you are trying to stop the form submission but you are not doing it the way it's supossed when using rails form_with helper, it renders a remote form by default so you need to stop the rails special events.

Check the guide on how to stop a rails' remote event https://guides.rubyonrails.org/working_with_javascript_in_rails.html#stoppable-events

You need to listen for the ajax:before event, not the submit event.

So, change $('#new_comment').submit (e) ... with $('#new_comment').on 'ajax:before', (e) ...