real-time

ruby
class Comment < ApplicationRecord
  belongs_to :article
  belongs_to :author, class_name: "User"

  validates :body, presence: true, length: { maximum: 2_000 }

Live comments with model broadcasts + turbo_stream_from

rails hotwire turbo
by codesnips 4 tabs
erb
<%# private stream: turbo signs the serialized record name %>
<%= turbo_stream_from current_user %>

<section class="notifications">
  <h1>Notifications</h1>

Turbo Streams + authorization: signed per-user stream name

rails turbo hotwire
by codesnips 3 tabs
sql
-- Publisher: Send notification
NOTIFY new_order, 'Order #12345 created';

-- Subscriber: Listen for notifications
LISTEN new_order;

PostgreSQL LISTEN/NOTIFY for pub-sub messaging

postgresql listen-notify pub-sub
by Maria Garcia 2 tabs
java
package com.example.demo.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;

WebSocket for real-time communication

java websocket spring-boot
by David Kumar 3 tabs
ruby
class Document < ApplicationRecord
  belongs_to :account

  enum status: { pending: 0, processing: 1, ready: 2, failed: 3 }

  after_create_commit :broadcast_badge

Broadcast a status badge update on background processing

rails hotwire turbo
by codesnips 4 tabs
erb
<%= turbo_stream_from :comments %>

<section class="comments">
  <h2>Discussion</h2>

  <%= turbo_frame_tag "new_comment" do %>

Inline create form that prepends into a list with Turbo Streams

rails hotwire turbo
by codesnips 4 tabs
ruby
class Comment < ApplicationRecord
  belongs_to :commentable, polymorphic: true
  belongs_to :author, class_name: "User"

  scope :visible, -> { where(deleted_at: nil).order(:created_at) }

Turbo Streams: partial replace with morphing (less jitter)

rails turbo hotwire
by codesnips 4 tabs
javascript
// 1. Basic WebSocket connection
const socket = new WebSocket('wss://example.com/ws');

// Connection opened
socket.addEventListener('open', (event) => {
  console.log('Connected to WebSocket server');

WebSockets for real-time bidirectional communication

websockets real-time javascript
by Alex Chang 1 tab
javascript
import { StreamActions } from "@hotwired/turbo"

StreamActions.highlight = function () {
  const className = this.getAttribute("data-highlight-class") || "flash-highlight"
  const duration = parseInt(this.getAttribute("data-highlight-duration"), 10) || 1500

Custom turbo_stream action tag: highlight an updated element

rails hotwire turbo
by codesnips 4 tabs
ruby
class Board < ApplicationRecord
  has_many :cards, dependent: :destroy
  belongs_to :owner, class_name: "User"

  validates :name, presence: true
end

Morphing page refreshes with turbo_refreshes_with

rails hotwire turbo
by codesnips 3 tabs
ruby
class Import < ApplicationRecord
  include ActionView::RecordIdentifier

  enum status: { pending: 0, processing: 1, completed: 2, failed: 3 }

  has_one_attached :file

Broadcast job progress updates to a Turbo Frame

rails hotwire turbo-streams
by codesnips 4 tabs
ruby
module ApplicationCable
  class Connection < ActionCable::Connection::Base
    identified_by :current_user

    def connect
      self.current_user = find_verified_user

ActionCable channel that streams Turbo updates safely

rails hotwire turbo
by codesnips 4 tabs