javascript ruby erb 39 lines · 3 tabs

Typing indicator via ActionCable + Turbo Streams

Henry Kim Jan 2026

3 tabs

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

export default class extends Controller {
  static values = { roomId: Number }

  connect() {
    this.lastSentAt = 0
    this.channel = consumer.subscriptions.create(
      { channel: "TypingChannel", room_id: this.roomIdValue },
      { received: () => {} }
    )
  }

  ping() {
    const now = Date.now()
    if (now - this.lastSentAt < 1000) return
    this.lastSentAt = now
    this.channel.perform("typing")
  }
}

class TypingChannel < ApplicationCable::Channel
  def subscribed
    @room = Room.find(params[:room_id])
    stream_for @room
  end

  def typing
    Turbo::StreamsChannel.broadcast_replace_to(
      @room,
      target: 'typing_indicator',
      partial: 'rooms/typing',
      locals: { member: current_member }
    )
  end
end

<div id="typing_indicator" class="text-sm text-gray-500">
  <%= member.nickname %> is typing…
</div>

3 files · javascript, ruby, erb Explain with highlit

Typing indicators can be done without a complex protocol. I broadcast a small turbo stream replace to a typing_indicator target when a user starts typing, and another replace to clear it after a timeout. On the client, a Stimulus controller sends “typing” pings over a simple ActionCable channel. The server tracks last-typed timestamps (in-memory or Redis) and broadcasts to the room stream. This keeps the UI server-rendered and avoids building custom JSON renderers. The key is throttling: don’t send a message per keystroke—send at most once every second. Also be mindful of privacy: only show typing indicators in small groups (like a chat room) and don’t store typing events permanently.

Related snips

ruby

class CommentsController < ApplicationController
  before_action :set_post

  def create
    @comment = @post.comments.build(comment_params)

System test: asserting Turbo Stream responses

rails hotwire turbo

by codesnips 4 tabs

ruby

class Post < ApplicationRecord
  belongs_to :author, class_name: 'User'
  has_many :comments, dependent: :destroy

  scope :published, -> { where.not(published_at: nil).where('published_at <= ?', Time.current) }
  scope :draft, -> { where(published_at: nil) }

ActiveRecord scopes for reusable query logic

rails activerecord patterns

by Alex Kumar 1 tab

ruby

module Api
  module V1
    class UsersController < BaseController
      def show
        user = User.includes(:profile).find(params[:id])

ETags for conditional requests and caching

rails caching http-caching

by Alex Kumar 1 tab

ruby

class PostsController < ApplicationController
  def index
    @posts = Post.includes(:author)
                 .order(created_at: :desc)
                 .page(params[:page])
                 .per(10)

Turbo Frames: infinite scroll with lazy-loading frame

rails turbo hotwire

by codesnips 4 tabs

ruby

require "csv"

class PeopleCsvStream
  include Enumerable

  HEADERS = %w[id full_name email signed_up_at plan].freeze

Resilient CSV Export as a Streamed Response

rails performance streaming

by codesnips 3 tabs

erb

<form data-controller="query-sync" data-action="change->query-sync#apply">
  <select name="status" class="rounded border p-2">
    <option value="">Any</option>
    <option value="open">Open</option>
    <option value="closed">Closed</option>
  </select>

Filter UI that syncs query params via Stimulus (no front-end router)

rails hotwire stimulus

by Henry Kim 2 tabs

Share this code

Here's the card — post it anywhere.

Typing indicator via ActionCable + Turbo Streams — share card

Link copied