javascript - Rails 6 Actioncable 用户正在输入

Question

我已经使用 rails 6 创建了一个聊天应用程序，并且我正在使用可操作性和刺激性来实时广播消息和通知。到目前为止我的设置工作得很好！

现在我也在尝试添加a user is typing功能，但我在实现它时遇到了麻烦！想法是创建一个typing_channel方法is_typing来广播事件，然后通过刺激控制器内部的接收方法显示输出数据。

对于所有先前的实现，我在创建消息后调用广播动作，然后通过激励控制器内部的接收方法显示数据。但是对于这个is_typing功能来说，进程是不同的，因为这次我不会创建消息。所以我的主要问题是，当我开始在表单中输入时如何触发广播事件？

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

  def unsubscribed
    stop_all_streams
  end

  def is_typing(data)
    ActionCable.server.broadcast "typing_channel", typing: data['typing'], user: current_user
  end
end

刺激控制器：

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

export default class extends Controller {
    static targets = ['status'];
    connect() {
        this.channel = consumer.subscriptions.create('TypingChannel', {
            connected: this._connected.bind(this),
            disconnected: this._disconnected.bind(this),
            received: this._received.bind(this),
        });
    }

    disconnect() {
        consumer.subscriptions.remove(this.subscription)
    }

    _connected() {
    }

    _disconnected() {

    }

    _received() {
    alert("receiving data")
    }
}

这是我创建消息的表单，我想在用户输入功能时显示：

<div data-controller="typing" data-target="typing.status" id="user_is_typing"></div>

<%= simple_form_for @message, url: consumer_create_conversation_message_path, html: { data: { action: "ajax:success->channel#clearMessage" }, method: :post, remote: true, id: :chat_form } do |f| %>
<%= f.input :body, label: false, placeholder: "Type your message here", :input_html => { id:"text_send", :rows => 2, class: "text_area_none" } %>
<%= button_tag type: 'submit', id:"button", class: "btn btn-primary btn-m fa-pull-right"  do %><i class="fas fa-paper-plane"></i><% end %>    
<% end %>

标签： javascriptjqueryruby-on-railswebsocketactioncable