안녕하세요.
이번에는 실시간 정보 교환이 가능해졌다

Action Cable

초보인 저는 초보자의 입장에서 봤습니다.かなり丁寧めに 소개해드리고 싶어요!
먼저 사용 중인 편집을 엽니다.

rails g channel message

이 명령을 입력하면
javascript 파일 및 루비 파일
다 할 줄 알아서 추천합니다.⭐
(이 별표 자체,)
그리고 먼저 컨트롤러부터 만지작거린다.
message_controller.rb

class MessagesController < ApplicationController
  def index
    @item = Item.find(params[:item_id])アイテムからidを取り出す。
    @message = Message.new　新しいの生み出す
    @messages = Message.all　全部表示
  end

  def new　
    @item = Item.find(params[:item_id])
    @message = @item.messages.new　関連付け
    @messages = @item.messages　
  end

  def creat
    @item = Item.find(params[:item_id])
    @message = @item.messages.new(message_params)
    ActionCable.server.broadcast 'message_channel', content: @message if @message.save　　*@messageをcontextに代入
    redirect_to "/items/#{@item.id}/messages"メッセージ表示画面にリダイレクト
  end　

  private

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

* 표시된 context 키는 잠시 후 자바스크립트의 기술을 추가할 때 사용합니다. 작성하는 것을 잊지 마십시오.
다음 formwith 사용
form_with를 사용하면 정보는 new 방법을 통해create 방법을 통과합니다.
이번에는 메시지 화면입니다.
index 화면으로 바꾸고 싶어서.
이렇게 했어요.
메시지 화면은 이런 한자
messages/index.html.erb

<div id='messages'>
<% @item.messages.order(created_at: :DESC).each do |message| %>　DESCを使うことで、新しい順で並べてます
  <div class = "message-head">
   <div class = "message-text">
    <p><%= message.message_text %></p>
    </div>
   <div class="message-box">
      <%= message.user.nickname%>　//メッセージに紐付いたユーザー名表示
    </div>
  <% end %>
  </div>

<%# 送信ゾーン %>

  <div class="box"> 
    <%= form_with(model: [@item, @message], local: true) do |f| %>　
     <%= f.text_field :message_text, id: "message_text" %>
     <%= f.submit '送信' %>
    <% end %>
    <br/>
     <%= link_to '戻る', "/", class: "finish-btn" %></li> 
 </div>
</div>

form_with 이후 모델: [@item,@message]는
구조를 네스트할 때 사용합니다.
다음은 자바스크립트에 기입하세요.
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.message_text}</p>`;
    const messages = document.getElementById('messages');
    const newMessage = document.getElementById('message_text');
    console.log(html)
    messages.insertAdjacentHTML('afterbegin', html);
    newMessage.value='';
ここまで！
    // Called when there's incoming data on the websocket for this channel
  }
});

방금 가져온 @message 값의 context 사용하기
afterbegin은 두 번째 매개 변수 ""다음에 요소를 넣어야 합니다 ~
라는 신호를 보냈다.
console.로그가 없어도 돼요.
(확인하려고 그냥 까먹었다.)
패키지의 응용 프로그램.js에는 기술할 필요가 없기 때문에 간단하죠
응, 다 했어!!
그렇게 생각해도
잠시만 기다려주세요!
미안합니다.마지막 완성이 있다.
마지막으로 서버와 클라이언트를 연결하기 위해
Action Cable 고유의 방법을 사용하십시오!!
channel/message_channel.rb

class MessageChannel < ApplicationCable::Channel
  def subscribed
    # stream_from "some_channel"
    stream_from 'message_channel'　　加えたところ
  end

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

stream_form
stream_포가 있는 것 같아요.
stream_나는 form이 더 강하다는 것만 이해한다.
자세히 알고 싶으신 분들은 이쪽을 봐주세요.
Action Cable의 streamfrom 및 streamfor의 차이는 무엇입니까?
왜냐하면 다른 것들은 메시지 기능의 실현도 있으니까.
나는 Action Cable 같은 거 쓰고 싶지 않아!
이런 분들은 여기 참고해주세요!!
Rails: Stimulus Reflex와 Cable Ready로 채팅 기능을 만들어 보세요.
그럼 이제 그만!
감사합니다!