Cubism을 사용한 입력 표시기

이 빠른 자습서에서는 Rails 모델에 상태 표시기를 추가하는 가벼운 CableReady 기반 방법인 Cubism에 대해 알려 드리겠습니다.

잡초에 대해 너무 깊이 들어가기 전에 개념적으로 작동하는 방식에 대한 간략한 개요가 있습니다.



이 데모에서는 Cubism의 종속성이므로 JavaScript 번들링을 위해 esbuild를 사용하여 Rails 7 앱을 설정하고 Kredis를 설치(및 구성)했습니다.

$ rails new cubism_demo -j esbuild


$ bundle add kredis
$ bin/rails kredis:install

Minimal Rails 앱 설정

Cubism이 사용자 존재를 관리하는 방법을 보여주기 위해 최소 두 가지 리소스가 필요합니다. 사용자와 사용자가 존재하는 것. 먼저 User 속성을 가진 username 모델을 생성해 보겠습니다. 우리는 Julian이라는 이름과 Andrew라는 두 명의 더미 사용자를 추가할 것입니다.

사용자 모델

$ bin/rails g model User username:string
$ bin/rails db:migrate


julian = User.create(username: "Julian")
andrew = User.create(username: "Andrew")

메시지 스캐폴드

다음으로 사용자 및 Message 속성에 대한 참조와 함께 content 리소스에 대한 스캐폴드를 추가합니다. Rails 콘솔에 더미 메시지를 추가해 보겠습니다.

$ bin/rails g scaffold Message user:references content:string
$ bin/rails db:migrate


Message.create(content: "test", user: julian)

메시지 컨트롤러 정리 및 보기 표시

데모 목적으로 show 경로 외에 다른 경로가 필요하지 않으므로 나머지는 모두 지웁니다. 이 간단한 예에서는 실제 인증을 설정하고 싶지 않으므로 요청 매개변수를 통해 현재 사용자 설정을 시뮬레이션해 보겠습니다.

# app/controllers/messages_controller.rb

class MessagesController < ApplicationController
  before_action :set_message, only: %i[show]
  before_action :set_user, only: %i[show]

  # GET /messages/1 or /messages/1.json
  def show
  end

  private
    # Use callbacks to share common setup or constraints between actions.
    def set_message
      @message = Message.find(params[:id])
    end

    def set_user
      @user = User.find(params[:user_id])
    end

    # Only allow a list of trusted parameters through.
    def message_params
      params.require(:message).permit(:user_id, :content)
    end
end


<!-- app/views/messages/show.html.erb -->
<p style="color: green"><%= notice %></p>

<%= render @message %>

큐비즘 설치

이제 Cubism을 실제로 설치할 준비가 되었습니다. Rubygem과 npm 패키지를 모두 추가하여 이를 수행합니다.

$ bundle add cubism
$ yarn add @minthesize/cubism

application.js 에서 JavaScript 모듈을 가져오는 것 외에도 consumer 에서 얻은 ActionCable turbo-rails 로 CableReady를 초기화해야 합니다.

// app/javascript/application.js

// Entry point for the build script in your package.json
import "@hotwired/turbo-rails"
import "./controllers"

import { cable } from "@hotwired/turbo-rails";

import CableReady from "cable_ready";
import "@minthesize/cubism";

// top level await is not supported in esbuild
(async () => {
  const consumer = await cable.getConsumer()
  CableReady.initialize({ consumer });
})()

서버 측 준비

Cubism의 서버 측 부분을 연결하려면 두 가지 작업을 수행해야 합니다.
Cubism::User 를 포함하여 사용자 조회를 위해 사용자에게 어떤 클래스를 알려줍니다. 일반적으로 이것은 User 클래스이지만 반드시 그럴 필요는 없습니다. 현재 상태 등을 추적하기 위해 동등하게 설정할 수 있습니다Team.

# app/models/user.rb

class User < ApplicationRecord
  # establishes the class Cubism uses for user lookup
  include Cubism::User
end

존재를 추적하려는 모든 클래스에 Cubism::Presence 모듈을 포함합니다(이 경우에는 Message 클래스).

# app/models/message.rb

class Message < ApplicationRecord
  # tracks users present on an instance of this model
  include Cubism::Presence

  belongs_to :user
end

그리고 그것은 정말로 서버 측 코드를 위한 것입니다. 우아하지 않나요? 💅🏻

현재 사용자 표시

Cubicle 요소를 메시지의 보기 보기에 추가하여 현재 사용자 목록을 표시하는 데 이것이 어떻게 사용될 수 있는지에 대한 첫인상을 얻으십시오. 이를 위해 포함된cubicle_for 도우미를 사용할 수 있습니다. 이 도우미는 모델과 현재 사용자를 인수로 사용하고 현재users 배열을 블록에 생성합니다. exclude_current_user를 false로 설정했습니다. 기본값은 Google-Drive 스타일에서 제외하는 것이기 때문입니다.

<!-- app/views/messages/show.html.erb -->
<p style="color: green"><%= notice %></p>

<%= render @message %>

<%= cubicle_for @message, @user, exclude_current_user: false do |users| %>
<%= users.map(&:username).to_sentence %> <%= users.size > 1 ? "are" : "is" %> watching this message.
<% end %>

타이핑 표시기 표시

마지막으로 메시지를 보는 모든 사용자를 추적하는 것에서 텍스트 필드에 입력하는 사용자를 추적하는 것으로 변환해 보겠습니다. 주석을 시뮬레이트하기 위해 일반 텍스트 필드를 추가해 보겠습니다(이렇게 하면 DOM ID가 comment로 편리하게 추가됩니다).

표시/사라짐 동작을 변경하기 위해 도우미에 몇 가지 옵션을 추가합니다. 먼저 appear 및 disappear 트리거, focus 및 blur . 이를 위해 모든 Javascript 이벤트 이름(사용자 지정 이벤트 이름도!)을 사용할 수 있습니다. 마지막으로 특정 요소(주석 필드)에 의해 발생한 이벤트에만 관심이 있기 때문에 CSS 선택기를 예상하는 trigger_root 를 추가하여 프레즌스 추적 범위를 지정합니다. 그리고 짜잔, 여기 있습니다!

<!-- app/views/messages/show.html.erb -->
<p style="color: green"><%= notice %></p>

<%= render @message %>

<%= cubicle_for @message, @user,
    appear_trigger: :focus,
    disappear_trigger: :blur,
    trigger_root: "#comment" do |users| %>
  <% if users.present? %>
    <%= users.map(&:username).to_sentence %> <%= users.size > 1 ? "are" : "is" %> typing...
  <% end %>
<% end %>

<%= text_field_tag :comment %>

결론

Cubism을 사용하면 Reactive Rails 앱에 모든 종류의 존재 표시기를 추가하는 것이 매우 간단합니다. 현재로서는 리소스 기반(AR 모델에만 추가할 수 있음)이지만 경로별 존재 추적은 로드맵에 있습니다!