Rails-7中带有动作电缆的打字指示器

gcuhipw9 于 2022-10-15 发布在 Ruby

关注(0)|答案(2)|浏览(130)

我无法在我的rails应用程序中添加打字指示器，我已经在rails 7中创建了应用程序，我使用trubo流标记并在其中进行广播，所以我没有使用频道进行实时聊天，我试图找到教程和视频，但没有
我想要添加打字指示器，所以我在输入上写了相同的js，它将被调用，它将在输入时转到控制器我正在调用控制器“rtm”
房间控制员

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

我有个问题，我怎么才能把打字信息广播到我的房间页面上呢
Room.rb

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

Message.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 %>

ruby

来源：https://stackoverflow.com/questions/73866132/typing-indicator-with-action-cable-in-rails-7

2条答案

按热度按时间

sf6xfgos1#

要获得打字指示器，您需要使用动作电缆并为其创建一个频道。您可以使用turbo流来呈现打字指示器。示例：
应用程序/频道/TYPING_CHANNEEL.rb

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

App/javascript/Channels/TYPING_CHANEEL.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>

应用程序/视图/房间/_tying.html.erb

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

应用程序/控制器/房间_控制器.rb

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

App/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流。您需要使用动作电缆来获取打字指示器。您可以使用turbo流来呈现打字指示器。

赞(0）回复(0）举报 2022-10-15

jm81lzqq2#

键入_Channel el.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>

输入控制器
ActionCable.server.cast“TYPING_CHANNEL”，{消息：‘TYPING’，正文：“#{Current_user.mail}”}

赞(0）回复(0）举报 2022-10-15

我来回答

Rails-7中带有动作电缆的打字指示器

2条答案

相关问题

热门标签

最新问答