[RUBY] Kommentarfunktion implementiert

Versuchen Sie, die Kommentarfunktion zu implementieren

Erstellen Sie eine Anwendung

Terminal

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

Controller und Modell erstellen

Terminal

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

Routing einrichten

app/config/routes.rb

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

Bearbeiten Sie messages_controller.rb

java:new.html.Erb bearbeiten

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

Kanal erstellen

Terminal

% rails g channel message

Stream_from hinzugefügt

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

Bearbeiten Sie 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

Bearbeiten Sie 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='';
  }
});

das ist alles!