如何检测Turbo Stream广播连接已建立？

是的，可以通过浏览器端JavaScript检测Turbo Stream WebSocket连接的建立，@hotwired/turbo-rails提供了对应的自定义事件来触发回调逻辑，具体实现方式有两种：

方法一：全局监听所有Turbo Stream连接事件 #

Turbo会在WebSocket连接成功建立时触发全局的turbo:connect事件，你可以通过监听这个事件，并判断目标频道来执行对应逻辑：

document.addEventListener('turbo:connect', (event) => {
  const streamSource = event.target;
  // 匹配你指定的广播频道
  if (streamSource.channel === 'my_broadcast') {
    console.log('目标WebSocket连接已建立');
    // 在这里编写你的回调代码
  }
});

方法二：针对特定Stream源监听连接事件 #

turbo_stream_from会在页面中生成一个<turbo-stream-source>元素，你可以直接获取该元素并监听其connect事件：

document.addEventListener('DOMContentLoaded', () => {
  // 通过channel属性定位目标Stream源
  const targetStream = document.querySelector('turbo-stream-source[channel="my_broadcast"]');
  if (targetStream) {
    targetStream.addEventListener('connect', () => {
      console.log('目标WebSocket连接已建立');
      // 执行你的回调逻辑
    });
    // 可选：监听连接断开或错误事件
    targetStream.addEventListener('disconnect', () => {
      console.log('WebSocket连接已断开');
    });
    targetStream.addEventListener('error', (errorEvent) => {
      console.error('WebSocket连接出错:', errorEvent);
    });
  }
});

补充说明 #

• <turbo-stream-source>元素的channel属性值对应你在turbo_stream_from中传入的标识（这里是my_broadcast）
• Turbo还提供了turbo:disconnect全局事件，用于监听所有Stream连接断开的情况

内容的提问来源于stack exchange，提问作者Evgenii