Implemented comment function

Try to implement the comment function

Create application

Terminal


% cd projects
% rails _6.0.0_ new mini_talk_app -d mysql
% cd mini_talk_app
% rails db:create

Create controller and model

Terminal


% rails g controller messages new
% rails g model message text:text
% rails db:migrate

Set up routing

app/config/routes.rb


Rails.application.routes.draw do
  root 'messages#new'
  resources :messages, only: [:create]
end

Edit messages_controller.rb

java:new.html.Edit erb


<h3>mini_talk_app</h3>
<%= form_with model: @message do |f| %>
  <%= f.text_field :text %>
  <%= f.submit 'Send' %>
<% end %>
<div id='messages'>
  <% @messages.reverse_each do |message| %>
    <p><%= message.text %></p>
  <% end %>
</div>

Create channel

Terminal


% rails g channel message

Added stream_from

app/channel/message_channel.rb


class MessageChannel < ApplicationCable::Channel
  def subscribed
    stream_from "message_channel"
  end

  def unsubscribed
    # Any cleanup needed when channel is unsubscribed
  end
end

Edit messages_controller.rb

app/controller/messages_controller.rbclass MessagesController < ApplicationController


  def new
    @messages = Message.all
    @message = Message.new
  end

  def create
    @message = Message.new(text: params[:message][:text])
    if @message.save
      ActionCable.server.broadcast 'message_channel', content: @message
    end
  end
end

Edit message_channel.js

app/javascript/channels/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 html = `<p>${data.content.text}</p>`;
    const messages = document.getElementById('messages');
    const newMessage = document.getElementById('message_text');
    messages.insertAdjacentHTML('afterbegin', html);
    newMessage.value='';
  }
});

that's all!

Recommended Posts

Implemented comment function
Comment function (Ajax) implementation
[Rails] Implemented hashtag function
[Rails] (Supplement) Implemented follow function
About immediate comment update function
App creation comment function asynchronous
Implemented authentication function with Spring Security ②
Real-time comment function with Action Cable (2/2)
Implemented authentication function with Spring Security ③
Implemented mail sending function with rails
About error handling of comment function
Implemented authentication function with Spring Security ①
[Rails] Comment function (registration / display / deletion)
Real-time comment function with Action Cable (1/2)
[Ruby on Rails] Comment function implementation
[Rails] Comment function implementation procedure memo
Implemented "Blackjack".
[Rails] Addition of Ruby On Rails comment function
Rails [For beginners] Implementation of comment function
Login function
JavaScript function
SpringMVC-Interceptor function
[Rails 6] Asynchronous (Ajax) follow function is implemented
Posting function implemented by asynchronous communication in Rails
[Rails, JavaScript] Implemented like function (synchronous / asynchronous communication)