有线涡流

此软件包提供了 AnyCable 客户端集成 涡轮流。 。 。 .

默认 @hotwired/turbo-rails 软件包不允许您用自定义消费者执行替换默认的动作有线客户端.

您可以从 AnyCasts 插曲中更多地了解自定义涡流集成背后的动机 "利用有线客户自动刷新信使"

注: 确保你没有进口 @hotwired/turbo-rails 或使用自定义标签名: Hotwire 的软件包暗中登记自定义元素,无法覆盖.

使用量

假设你有一个 cable 实例定义,用于激活涡轮流元素,您需要添加以下代码:

import { start } from "@anycable/turbo-stream"
// This is your cable instance
import cable from "cable"
// Explicitly activate stream source elements
start(cable)

这种方法允许您控制何时(以及如何)从 <turbo-cable-stream-source> HTML 元素.

不需要服务器侧修改。我们支持所有标准功能:通过自定义频道类和订阅参数.

兼容性与 @hotwired/turbo-rails

我们的集成旨在让API与官方软件包兼容,这意味着HTML元素及其属性的识别和解释与使用相同 @hotwired/turbo-rails。 。 。 .

一个微妙但重要的区别是 @anycable/turbo-stream 不激活添加到临时涡轮缓存页面中的流元素。这样我们就可以避免不必要的订阅/订阅和潜在的种族条件.

高级配置

延迟未订阅

在使用涡轮驱动器进行导航时,常见的情况是将一个流源元素附着在同一流上,以在新旧HTML中同时出现. 为了避免对下行流重新订阅,我们可以在导航期间通过推迟订阅来保留订阅 unsubscribe 电话(或更确切地说, channel.disconnect()) (中文(简体) ). 因此,我们可以避免不必要的Action Cable命令,并避免在重新订阅之间丢失到的信息. 您必须选择使用此特性 :

import { start } from "@anycable/turbo-stream"
import cable from "cable"

start(cable, { delayedUnsubscribe: true }) // default is 300ms

start(cable, { delayedUnsubscribe: 1000 }) // Custom number of milliseconds

随附 X-Socket-ID turbo 请求的页眉

您可以用当前套接字会话 ID 自动为所有 Turbo 请求添加一个信头 。 这可以用来表演 对他人的广播 (见 铁路一体化文件:

import { start } from "@anycable/turbo-stream"
import cable from "cable"

start(cable, { requestSocketIDHeader: true })

// You can also specify a custom header name
// start(cable, { requestSocketIDHeader: 'X-My-Socket-ID' })

自定义频道类

您定义 Turbo Streams 订阅的自定义 JS 频道类 :

import { TurboChannel } from "@anycable/turbo-stream"

class CustomTurboChannel extends TurboChannel {
  // Constructor receives the current HTML element (turbo-cable-stream-source),
  // a channel name (Turbo::StreamsChannel) by default and subscription params
  constructor(element, channelName, params) {
    // You can override the server-side channel name
    super(element, 'MyTurboChannel', params)
    // Additional state configuration goes here
    this.totalActions = 0
  }

  // You can override receive function to intercept actions
  receive(message) {
    this.totalActions++

    // Ignore every second message
    if (this.totalActions % 2 === 0) return

    // Fallback to the default behaviour,
    // which sends the action to Turbo
    super.receive(message)
  }
}

另一个例子是一个在操作前记录所有动作的通道:

class LogChannel extends TurboChannel {
  receive(message) {
    console.log("TURBO ACTION", message)
    super.receive(message)
  }
}

start(cable, {channelClass: LogChannel})

自定义标签

您可以使用自定义的 Turbo Streams 源元素标签名 。 其中一个用法是使用不同的联署材料渠道进行不同的标记:

// Assuming you have some special channel class
import { TurboPresenceChannel } from './channel.js'
import { start } from "@anycable/turbo-stream"

import cable from "cable"

// Default behaviour
start(cable)

// Custom behaviour
start(cable, { tagName: 'turbo-presence-source', channelClass: TurboPresenceChannel })

注: 您需要创建自定义的 Rails 助手来渲染自定义元素 。 例如:

def turbo_presence_stream_from(*streamables, **attributes)
  attributes[:channel] = attributes[:channel]&.to_s || "Turbo::StreamsChannel"
  attributes[:"signed-stream-name"] = Turbo::StreamsChannel.signed_stream_name(streamables)

  tag.turbo_presence_source(**attributes)
end