Как я могу использовать кабель Custom Channel of Action с компонентом Stimulus Reflex и View?

Question

Итак, я работаю над проектом, в котором должен быть компонент чата, такой же, как и в linkedin chat, где у пользователя будут все свои контакты и сообщения.

Но я пробовал всеми способами работать с stimulus_reflex и view_component создать это chat_box, но до сих пор у меня не было прогресса.

Итак, прямо сейчас я пытаюсь создать чат с чистым action_cable, но сомневаюсь: могу ли я использовать этот канал action_cable ('ChatRoom') с участием Stimulus Reflex? Потому что, когда мы видим, что консоль rails показывает что-то вроде этого: Broadcasting to StimulusReflex::Channel:1, и я хочу транслировать ChatRoom Channel.

Кто-то пробовал такое же?

Answer 1

stimulus_reflexбудет использовать свой собственный канал для обновления страницы после рефлекса. Но эти обновления происходят автоматически и только для пользователя, который вызвал рефлекс. Обычно вы не хотите прикасаться к этим частям.

Если вы хотите передать сообщение или преобразование dom после рефлекса, вы можете сделать это, используя cable_ready (который входит в stimulus_reflex.

Так что что-то вроде этого может сработать для вас:

def my_reflex
  @chat = Chat.find(element.dataset[:chat_id])
  message = @chat.message.create(message: element.value)
  cable_ready["chatroom-#{@chat.id}"]. insert_adjacent_html(
    selector: "#chat",
    position: "beforeEnd",
    html: ApplicationController.render(ChatMessageComponent.new(message: message))                     
  )
end

Дополнительные возможности вы можете найти в документации cable_ready

Answer 2

Я пока не могу комментировать, поэтому я должен написать это как ответ. Похоже, Роланд пропустил реальную трансляцию действия cable_ready.

def my_reflex
  @chat = Chat.find(element.dataset[:chat_id])
  message = @chat.message.create(message: element.value)
  cable_ready["chatroom-#{@chat.id}"]. insert_adjacent_html(
    selector: "#chat",
    position: "beforeEnd",
    html: 
   ApplicationController.render(ChatMessageComponent.new(message: message))                     
  )

  cable_ready.broadcast
end