導軌中帶有操作電纜的打字指示器 - 7

Question

我無法使用操作電纜在我的 Rails 應用程序中添加打字指示器 我已經在 Rails 7 中創建了應用程序並且我使用了 trubo stream 標簽並在其中廣播所以我沒有使用實時聊天頻道，我試圖找到教程和視頻但是什么都沒有

我想添加打字指示器，所以我在將調用的輸入上編寫相同的 js，它將 go 到 controller 在輸入時我調用 controller“rtm”

房間 controller

  def rtm 
    @typing = "hhhhhhhhhhhhhhhhhhh"
    # ActionCable.server.broadcast "typing_channel",{ message: "helloo"}
    # @typings.broadcast_append_to "typing"
    Turbo::StreamsChannel.broadcast_append_to "typing", target: 'typing', partial: 'rooms/typing', locals: { message: "@typing" }
  end

在這里我有問題如何將打字消息廣播到我的房間頁面

房間.rb

class Room < ApplicationRecord
    scope :public_rooms, -> { where(is_private: false) }
    has_many :messages
    after_create_commit {broadcast_append_to "rooms"}
end

消息.rb

class Message < ApplicationRecord
  belongs_to :user
  belongs_to :room
  after_create_commit { broadcast_append_to self.room }
end

房間/指數

<script>
$(document).ready(function(){
  var tmo = null;
  $("#msg").on("input", function(){
    $.ajax({
      type: 'GET',
      url: '/rooms/rtm',
      data: {data: ''}
    });
    document.getElementById("typing").innerHTML = "Typing...";
    if (tmo) {
      clearTimeout(tmo);
    }
    tmo = setTimeout(function () {
      $.ajax({
        type: 'GET',
        url: '/rooms/rmm',
        data: {data: ''}
    });
      document.getElementById("typing").innerHTML = "";
    }, 1000);
  });
});
</script>

<div class="container">
  <h5> Hi <%= current_user&.firstname %> </h5>
  <%= debug(params) if Rails.env.development? %> 

  <br>  <h4> Rooms </h4>
  <%= render partial: 'layouts/new_room_form' %>
  <%= turbo_stream_from "rooms" %>
<div id="rooms">
  <%= render @rooms %>
</div>
</div>

<% if @single_room.present? %>
<%= link_to @single_room.name,@single_room, class: "btn btn-primary" %>

  <%= turbo_stream_from @single_room %>
  <div id="messages">
    <%= render @messages %>
  </div>

  <%= render partial: 'layouts/new_message_form' %>

  <%=  @typing %>
  <%= turbo_stream_from @typing %>

  <div id="typing">
  </div>

  <%= render partial: 'rooms/typing' %>
  <span id="typing"></span><br>

<% end %>

Answer 1

要獲得打字指示器，您需要使用動作電纜並為其創建一個通道。 您可以使用 turbo stream 來呈現打字指示器。 例子：

應用程序/頻道/typing_channel.rb

class TypingChannel < ApplicationCable::Channel
  def subscribed
    stream_from "typing_channel"
  end
end

應用程序/javascript/channels/typing_channel.js

import consumer from "./consumer"

consumer.subscriptions.create("TypingChannel", {
  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) {
    // Called when there's incoming data on the websocket for this channel
  }
}); 

應用程序/視圖/房間/index.html.erb

<div id="typing">
  <%= turbo_stream_from "typing_channel" %>
</div>

應用程序/視圖/房間/_typing.html.erb

<p><%= message %></p>

應用程序/控制器/rooms_controller.rb

class RoomsController < ApplicationController
  def rtm
    ActionCable.server.broadcast "typing_channel", { message: "helloo" }
  end
end

應用程序/javascript/controllers/rooms_controller.js

import { Controller } from "stimulus"
import consumer from "../channels/consumer"

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

  connect() {
    this.subscription = consumer.subscriptions.create("TypingChannel", {
      received: (data) => {
        this.renderTyping(data)
      }
    })
  }

  renderTyping(data) {
    const typing = document.getElementById("typing")
    typing.innerHTML = data.message
  }

  disconnect() {
    this.subscription.unsubscribe()
  }
}
 

無法將 turbo stream 與動作電纜一起使用。 您需要使用動作電纜來獲取打字指示器。 您可以使用 turbo stream 來呈現打字指示器。

Answer 2

typing_channel.js

import consumer from "channels/consumer"

consumer.subscriptions.create("TypingChannel", {
  connected() {
    console.log("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) {
    console.log(data)
    const box = document.getElementById('typing');
    if (box.textContent.includes(data.body)) {
    } else {
      $('#typing').append('<p>'+ data.body + data.message +'</p>');
    }
  }
});

我正在使用下面的 js 作為指標

<script>
$(document).ready(function(){
  var tmo = null;
  $("#chat").on("input", function(){
     $.ajax({
      type: 'GET',
      url: '/rooms/rtm',
    });
    if (tmo) {
      clearTimeout(tmo);
    }
    tmo = setTimeout(function () {
      $.ajax({
        type: 'GET',
        url: '/rooms/rmm',
    });
    }, 1000);
  });
});
</script>

在 controller

ActionCable.server.broadcast "typing_channel", {message: 'Typing', body: "#{current_user.email}"}