[Rails]非同期通信でチャットできるようにしたい

Question

前提・実現したいこと

Railsでリアルタイムチャットできるアプリを作っています。
Action Cableを用い、非同期通信でチャットできる機能を実装したいのですが、思うようにいきません。
原因が分からなかったので、ご教示いただけたら幸いです。

発生している問題・エラーメッセージ

初めのメッセージは送信ボタンを押すと反映されますが、次のメッセージが送信できない上に、CSSが適用されません。

ブラウザ更新後は、CSSも適用されて次のメッセージも送信できますが
リアルタイムチャットが実現できていません。

該当のソースコード

routes.rb

Rails.application.routes.draw do
  devise_for :users
  root to: "rooms#index"
  resources :users, only: [:edit, :update]
  resources :rooms, only: [:new, :create] do
    resources :messages, only: [:index, :create]
  end
end

messages_controller.rb

class MessagesController < ApplicationController
  def index
    @message = Message.new
    @room = Room.find(params[:room_id])
    @messages = @room.messages.includes(:user)
  end

  def create
    @room = Room.find(params[:room_id])
    @message = @room.messages.new(message_params)
    @user = User.find_by(id: current_user.id)
    if @message.save
      ActionCable.server.broadcast "message_channel", content: @message, user: @user
    end
  end

  private

  def message_params
    params.require(:message).permit(:content).merge(user_id: current_user.id)
  end
end

index.html.erb

<%= render "shared/header" %>

<div class="wrapper">
  <div class="side-bar">
    <%= render "side_bar" %>
  </div>
  <div class="chat">
    <%= render "main_chat" %>
  </div>
</div>

<%= render "shared/footer" %>

_main_chat.html.erb

<div class="chat-header">
  <div class="room-title">
    <%= @room.name %>
  </div>
  <% if user_signed_in? %>
  <div class="room-exit">
    ルーム退出
  </div>  
  <% end %>
</div>

<div class="messages" id="messages">
  <%= render partial: "message", collection: @messages %>
</div>

<% if user_signed_in? %>
  <%= form_with model: [@room, @message], class: "form", local: true do |f| %>
    <div class="form-input">
      <%= f.text_field :content, class: "form-message", placeholder: "メッセージを入力" %>
    </div>
    <%= f.submit "送信", class: "form-submit" %>
  <% end %>
<% end %>

_message.html.erb

<div class="message">
  <div class="upper-message">
    <div class="message-user">
      <p><%= message.user.nickname %></p>
    </div>
    <div class="message-date">
      <p><%= message.created_at %></p>
    </div>
  </div>
  <div class="lower-message">
    <div class="message-content">
      <p><%= message.content %></p>
    </div>
  </div>
</div>

message_channel.js

import consumer from "./consumer"

consumer.subscriptions.create("MessageChannel", {
  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) {
    const nickName = `<P>${data.user.nickname}</P>`;
    const createdAt = `<P>${data.content.created_at}</P>`;
    const text = `<P>${data.content.content}</P>`;
    const messages = document.getElementById("messages");
    const newMessage = document.getElementById("message_content");
    messages.insertAdjacentHTML("beforeend", nickName);
    messages.insertAdjacentHTML("beforeend", createdAt);
    messages.insertAdjacentHTML("beforeend", text);
    newMessage.value="";
  }
});

補足情報（FW/ツールのバージョンなど）

Ruby 2.6.5
Rails 6.0.0
Docker
CircleCI

Answer 1

<%= form_with model: [@room, @message], class: "form", local: true do |f| %>のlocal: trueをlocal: falseにしたら解決できました。
localオプションは、リモート送信を無効にするかどうかを指定でき、trueにすると無効になるんですね。
デフォルトでAjax通信をするようになっているみたいなので、local: false自体消しても良いと思います。
CSSがブラウザ更新しないと適用されないのは、依然として変わりませんが...