Supabase Realtime插入消息时重复触发3次事件求助

1. 重复创建并订阅了Realtime频道 #

你的代码在mounted钩子中每次都会新建一个messages频道并完成订阅。如果组件被多次挂载（比如路由切换后返回、组件复用、父组件重新渲染导致子组件重复挂载），就会生成多个独立的频道订阅实例，每个实例都会接收到同一条insert事件推送，最终表现为三次重复日志。

解决办法：
将频道实例缓存起来，确保只订阅一次：

// 在组件的data或setup中声明频道变量
data() {
  return {
    messageChannel: null
  }
},
mounted() {
  // 仅当频道未创建时才初始化订阅
  if (!this.messageChannel) {
    this.messageChannel = supabase.channel('messages');
    this.messageChannel.on(
      'postgres_changes',
      { event: 'insert', schema: 'public', table: 'messages' },
      (payload) => console.log('payload:', payload)
    );
    this.messageChannel.subscribe();
  }

  // 执行插入操作
  const insertMsg = async () => {
    const res = await supabase.from('messages').insert({
      conversationSID: 'CH3165c39d3d784823af47039081fe7c47',
      messageSID: '4567',
      body: 'hi',
      source: 'SDK',
      author: 'John',
      patNum: 6,
      dateCreated: new Date()
    });
    console.log('inserted', res);
  }
  insertMsg();
},
// 组件销毁时移除频道订阅，避免内存泄漏
beforeUnmount() {
  if (this.messageChannel) {
    supabase.removeChannel(this.messageChannel);
  }
}

2. 全局或其他代码中重复订阅了相同事件 #

检查项目中其他地方是否也对public.messages表的insert事件做了订阅，比如全局初始化代码、其他组件中重复绑定了相同的监听逻辑，多个监听会同时触发日志输出。

3. 数据库触发器导致的隐性重复插入（可能性较低） #

如果messages表上存在insert触发器，可能在你执行一次插入后，触发器自动执行了额外的插入操作（比如复制数据到同表）。但这种情况下，三次事件的payload应该会有不同的行ID，如果你看到的payload完全一致，这个原因可以排除。

验证方法：
执行SQL查询查看表上的触发器：

SELECT tgname, tgdef FROM pg_trigger WHERE tgrelid = 'public.messages'::regclass;

如果存在不必要的触发器，可根据需求删除或修改。

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