Action Cable의 실시간 주석 기능(1/2)

★ Action Cable에서 실시간 주석 기능 구현

채팅방을 새로 만들지 않고 투고와 관련된 채팅 기능으로 사용
실시간으로 투고하고 댓글을 삭제할 수 있는 실현을 이루었다.
이번에는 이 실시의 기초인 평어 기능의 기초 실현!
Action Cable에서 실시간 주석 기능 들어가기(2/2)

★ 구현에 필요한 기초 지식

Action Cable
일반 Rails 응용 프로그램과 유사한 즉각적인 업데이트 기능을 제공하는 프레임워크입니다.구현 내용은 메시지를 저장하고 보내는 데 필요한 루비 인코딩과 저장된 메시지를 즉시 표시하는 자바스크립트 인코딩입니다.
채널
채널은 실시간 업데이트 기능을 실현하는 서버 측의 구조를 가리킨다.
상술한 바와 같이 데이터 경로를 설정하면 전송된 데이터를 클라이언트의 화면에 표시합니다.
Stream_from은 서버와 클라이언트를 연결하는 방법입니다.Action Cable에 미리 준비되어 있습니다.
broadcast는 서버가 보내는 데이터 경로를 가리킨다.
브로드캐스트를 통해 클라이언트에게 데이터를 보냅니다.

Client 또는 Channel(.js/.rb) Server ※ 이미지

★ 평론 기능 구현의 기초

❶routing의 설명을 진행하다

작업에create와destroy 사용
투고와 연락하고 싶어서posts와 끼워넣기

#routes.rb
Rails.application.routes.draw do
  devise_for :users, controllers: { registrations: 'users/registrations' }
  root to: "posts#index"
  resources :users
  resources :posts do
    resources :comments, only: [:create, :destroy]
  end
end

❷ controller의 설명을 진행하다

comments_컨트롤러는 다음과 같습니다.
주석의create와destory만 설명

#comments_controller.rb
class CommentsController < ApplicationController
  def create
    @post = Post.find(params[:post_id])
    #投稿に紐づいたコメントを作成
    @comment = @post.comments.build(comment_params)
    @comment.user_id = current_user.id
    if @comment.save
      ActionCable.server.broadcast 'message_channel', content: @comment, user: @comment.user, date: @comment.created_at.to_s(:datetime_jp), id: @comment.id,post: @comment.post
    end
  end

  def destroy
    @post = Post.find(params[:post_id])
    @comment = Comment.find(params[:id])
    if @comment.destroy
      ActionCable.server.broadcast 'delete_channel', id: @comment.id
    end
  end

  private
  def comment_params
    params.require(:comment).permit(:content, :post_id, :user_id).merge(user_id: current_user.id)
  end
end

posts_controller에서 주석을 표시하는 데 사용되는 설명을 진행합니다
이번에 투고에 상세 페이지를 설치했기 때문에 동작은 쇼입니다.

#posts_controller
  def show
    @post = Post.find(params[:id])
    @comment = Comment.new
    @comments = @post.comments
  end

❸view의 기술 진행

render를 사용하여 주석의 표시 부분과 평론의 투고 부분을 호출합니다

#show.html.erb
   <div class="row">
     <ul>
       <li class="comment-create">
         <h3 class="text-left title">トークルーム</h3>
       </li>
       <li class="comments_area">
         <%= render partial: 'comments/index', locals: { comments: @comments } %>
       </li>
     </ul>
     <% if user_signed_in? %>
       <div id="comment-create">
         <h3 class="text-left">コメントを投稿</h3>
           <%= render partial: 'comments/form', locals: { comment: @comment, post: @post } %>
       </div>
     <% end %>
    </div>

주석 표시 섹션

#_index.html.erb
    <% @comments.each do |comment| %>
      <% unless comment.id.nil? %>
        <li class="comment-container" id="test-<%=comment.id%>">
          <div class="comment-box">
            <div class="comment">
              <div class="comment-nickname">
                <p><%= link_to "@#{comment.user.nickname}", user_path(comment.user.id) %></p>
              </div>
                <div id="comment-entry">
                  <span style="font-weight:bold;"><%= comment.content %></span>
                    &nbsp;<%= comment.created_at.to_s(:datetime_jp) %>
                      <% if comment.user == current_user %>
                        <%= link_to post_comment_path(comment.post_id, comment.id), method: :delete, remote: true do %>
                          &nbsp;<button id="<%=comment.id%>" id="delete-btn">削除</button>
                        <% end %>
                      <% end %>
                </div>
              </div>
           </div>
        </li>
      <% end %>
    <% end %>
<!-- コメント内容(3件目以降) ------------------------------------------------------------------>
    <div class="collapse" id="collapseExample">
      <% @comments.offset(2).each do |comment| %>
        <% unless comment.id.nil? %>
          <li class="comment-container" id="test-<%=comment.id%>">
            <div class="comment-box">
              <div class="comment">
                <div class="comment-nickname">
                  <p><%= link_to "@#{comment.user.nickname}", user_path(comment.user.id) %></p>
                </div>
                  <div id="comment-entry">
                    <span style="font-weight:bold;"><%= comment.content %></span>
                      &nbsp;<%= comment.created_at.to_s(:datetime_jp) %>
                        <% if comment.user == current_user %>
                          <%= link_to post_comment_path(comment.post_id, comment.id), method: :delete, remote: true do %>
                            &nbsp;<button id="<%=comment.id%>" id="delete-btn">削除</button>
                          <% end %>
                        <% end %>
                  </div>
              </div>
            </div>
          </li>
        <% end %>
      <% end %>
    </div>

평론의 투고 부분

#_form.html.erb
<%= form_with(model: [@post, @comment], url: post_comments_path(@post.id) ) do |f| %>
    <%= f.text_area :content, class: "input-mysize" %>
    <%= f.submit "送信", class: "btn btn-outline-dark comment-submit float-right", id:"submit_btn" %>
<% end %>

모델과migration 파일을 생략합니다!

★ Action Cable에서 실시간 주석 기능 들어가기(2/2)