Как подгружать чат на страницу после загрузки страницы?

Question

[Андрей Байбек]

Есть страничка, в левой части обычный контент, в правой части чат. Хочу чтобы чат подгружался после загрузки страницы. Допустим хочу рендерить страничку с постами:

class PostsController < ApplicationController
    def index 
        @posts = Post.all
        @messages = Message.all # приходится тянуть в контроллер подгрузку сообщений из чата
        @message = Message.new # и новое сообщение для создания формы
    end
end

Или когда я буду рендерить страницу создания поста, мне опять придется тянуть сообщения чата в контроллер, и т.д. в каждый контроллер, что плохо. А если бы чат подгружался после загрузки или подгружался один раз при подключении пользователя к Action Cable, а затем обновлялся только с помощью него, было бы здорово.
Пишу на Ruby On Rails, использую Turbolinks, Stimulus и Action Cable для чата. Что можно придумать?

Answer 1

[Nikola Okonesh]

Вот довольно простой метод, так к примеру набросок, использовал setTimeout() для загрузки комментариев:
show.html.erb

<div class="d-block" id="comments-show-columns">
            <div id="open_comments" class="mt-4">
              <div data-controller="comments">
                Загрузка комментариев...
                <%= link_to url_for(open: 'true'), class: 'hidden', remote: true, data: {target: "comments.opencomment"} do %>
                <% end %>
              </div>
            </div>
          </div>

show.js.erb

<% if params[:open] %>
  var opening = document.querySelector("#open_comments")
  var pagin = document.querySelector("#comments-show-paginator")

  pagin.classList.toggle("hidden")
  opening.innerHTML = ('<%=j render(partial: "comments/comment", collection: @comments, locals: {full: true}, continue_thread: 10) %>')
<% end %>

app/javascript/controllers/comments_controller.js

import { Controller } from "stimulus";

export default class extends Controller {
  static targets = ["opencomment"]

  connect() {
    setTimeout(() => this.opencommentTarget.click(), 500 )
  }

}

Так же используйте data-turbolinks-permanent чтобы визуально чат не загружался вновь при рендеринге страницы и так же айди open_comments должен содержать id страницы типа open_comments_<%= post.id %>.
Может есть способы другие то было бы интересно посмотреть.

Comments

[Андрей Байбек]

Спасибо за идею) Я пытаюсь при подключении пользователя к Action cable вызвать метод рендера чата на сервере, но выдает ошибку, вкратце такая схема:
Коннект на клиенте:

consumer.subscription.create('ChatChannel', {
     connected() {
     },
     disconnected() {
     },
     received() {
         if (data['chat']) {  // если в ответе чат, то рендерим его, иначе полагаем что он уже отрендерен
                                    // и соответственно при создании новых сообщений вставляем их в уже готовый чат
                chat.element.innerHTML = data['chat']
          } else {
                if (chat.hasMessagesTarget) {
                   chat.messagesTarget.insertAdjacentHTML('beforeEnd', data)
                }
           }
     }
}

Html код

<div id="chat" data-controller="chat">
    <div id="chat-wrapper">
        <div class="chat-messages" data-target="chat.messages">
           <%= render partial: 'messages/message', collection: @messages, as: :message %>
        </div>
        <div class="chat-message-form">
            <%= render partial: 'messages/form', object: @message %>
        </div>
    </div>
</div>

Итак, когда пользователь приконнектился вызывается в `chat_channel.rb` следующий метод:

def subscribed
   stream_from 'chat_channel'
   ChatBroadcastJob.perform_later // вызываю job где находится рендер чата
end

Идем в `chat_broadcast_job.rb`, там следующее:

class ChatBroadcastJob < ApplicationJob
  queue_as :default
  
    def perform
        ActionCable.server.broadcast("chat_channel", { chat: render_message } )
    end

    private

        def render_message
            ## Пробовал таким образом ...
            # @messages = Message.all
            # @message = Message.new
            # ChatController.render template: 'chat/show', layout: false
            ## И так ...
            ChatController.get_chat
            ## Но выдает ошибку..
        end
end

Вот сам `chat_controller.rb` контроллер:

class ChatController < ApplicationController

    def self.get_chat
        @messages = Message.all
        @message = Message.new
        render template: 'chat/show', layout: false
    end
end

Так вот я пробовал как я указал выше. Но выдает следующую ошибку:

[ActiveJob] [ChatBroadcastJob] [5c2e08a6-a429-4311-8342-14e8f6c5083a]   Rendered chat/show.html.erb (Duration: 1.4ms | Allocations: 1485)
[ActiveJob] [ChatBroadcastJob] [5c2e08a6-a429-4311-8342-14e8f6c5083a] Error performing ChatBroadcastJob (Job ID: 5c2e08a6-a429-4311-8342-14e8f6c5083a) from Async(default) in 2.3ms: ActionView::Template::Error (No route matches {}):  # ------------------ ОШИБКА
/home/n1/.rbenv/versions/2.6.3/lib/ruby/gems/2.6.0/gems/actionpack-6.0.2.1/lib/action_dispatch/journey/formatter.rb:57:in `generate'

Хотя аналогичная схема при отправке сообщений работает:

class MessageBroadcastJob < ApplicationJob
    queue_as :default
  
    def perform(message)
        ActionCable.server.broadcast "chat_channel", render_message(message)
    end

    private

        def render_message(message)
            MessagesController.render partial: 'messages/message', locals: { message: message }, layout: false
        end
  end

Answer 2

[Андрей Байбек]

В общем траблы были у меня в представлениях. Немного изменил код, удалил ChatController и представления для него за ненадобностью. Вызываю рендер через MessageController и добавил представление чата в `views/messages/_chat.html.erb`.

def render_message
      @message = Message.new
      @messages = Message.all
      MessagesController.render partial: 'messages/chat', locals: { message: @message, messages: @messages }
end

Соответственно вьюха `messages/chat.html.erb`

<div id="chat-wrapper">
    <div class="chat-messages" data-target="chat.messages">
        <%= render partial: 'messages/message', collection: messages, as: :message %>
    </div>
    <div class="chat-message-form">
        <%= render partial: 'messages/form', locals: { message: message } %>
    </div>
</div>

Все, теперь все работает, всем спасибо) Варианты реализаций, в ответе Nikola Okonesh и в комментарии к этому ответу.

Answer 3

[alfss]

Напишите чат на JS. Предоставьте для него API.