Real-Time WebAssembly Updates with SolidCable and Turbo Streams #

WebAssembly is fast, but real-time updates make it even more powerful.

SolidCable, combined with Turbo Streams, enables instant delivery of responses from Rails back to the browser.

This ensures that when WebAssembly finishes processing, the user doesn’t need to refresh the HTML page to manually receive the response from the server.

1. Why Real-Time Updates Matter for WebAssembly #

Let's consider our Example of applying a filter to an image using a WebAssembly Module.

Without real-time updates, the user applies a filter and waits for the processed image to be sent back without knowing when it’s ready. This leads to frustration.

With SolidCable and Turbo Streams, the processed image appears instantly as soon as WebAssembly completes processing.

Here’s the improved flow:

• The user applies a WebAssembly filter.
• WebAssembly processes the image in the browser.
• The processed image is sent to Rails.
• SolidQueue is used to notify all relevant users.
• SolidCable updates the UI in real time using Turbo Streams.

2. Implementing SolidCable for WebAssembly Updates #

We first install SolidCable in the Rails app:

#Gemfile
gem "solid_cable"

Run the installation command:

rails solid_cable:install

This sets up SolidCable and ensures WebSocket support.

3. Broadcasting Processed Images Using Turbo Streams #

When a user processes an image, we broadcast it using SolidCable so that the UI updates instantly.

Modify the controller to send the processed image via Turbo Streams:

class ProcessedImagesController < ApplicationController
  def create
    key = cache_key(params[:image_id], params[:filter_type])

    if SolidCache.read(key)
      processed_image_url = SolidCache.read(key)
    else
      processed_image_url = params[:image_url]
      SolidCache.write(key, processed_image_url, expires_in: 1.hour)
    end

    Turbo::StreamsChannel.broadcast_replace_to "image_processing",
      target: "processed_image",
      partial: "processed",
      locals: { image_url: processed_image_url }

    render json: { success: true }
  end

  private

  def cache_key(image_id, filter_type)
    "processed_image:#{image_id}:#{filter_type}"
  end
end

4. Updating the UI in Real Time with StimulusJS #

The browser listens for updates from SolidCable and instantly replaces the processed image.

import { Controller } from "@hotwired/stimulus";
import { createConsumer } from "@rails/actioncable";

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

  connect() {
    this.subscription = createConsumer().subscriptions.create("Turbo::StreamsChannel", {
      received: data => {
        this.outputTarget.innerHTML = data; // Replace processed image instantly
      }
    });
  }

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

5. The Final Workflow #

• The user applies a filter via WebAssembly.
• The processed image is sent to Rails.
• SolidQueue ensures the response is sent back without blocking.
• SolidCable broadcasts the image update in real time.
• Turbo Streams instantly update the UI, showing the new image.

6. Why This Approach is Optimal #

• ✅ No UI freezes—Processing happens asynchronously.
• ✅ Instant updates—Users see the filtered image in real time.
• ✅ Highly efficient—No duplicate processing, thanks to SolidCache.

With SolidCable and Turbo Streams, WebAssembly-powered filters feel instantaneous, improving user experience dramatically.