RealtimeInspector() — supabase Function Reference

Architecture documentation for the RealtimeInspector() function in index.tsx from the supabase codebase.

Function tsx ContentManagement MediaManagement calls 1

Entity Profile

ContentManagement→ MediaManagement→ RealtimeInspector() — supabase Function Reference

Dependency Diagram

graph TD
  97dac308_a02e_eb43_e60c_49554d27e205["RealtimeInspector()"]
  c8fd8f5d_3794_25bb_3a1b_7311d9193c3d["useRealtimeMessages()"]
  97dac308_a02e_eb43_e60c_49554d27e205 -->|calls| c8fd8f5d_3794_25bb_3a1b_7311d9193c3d
  style 97dac308_a02e_eb43_e60c_49554d27e205 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/studio/components/interfaces/Realtime/Inspector/index.tsx lines 17–89

export const RealtimeInspector = () => {
  const { ref } = useParams()
  const { data: org } = useSelectedOrganizationQuery()
  const { data: project } = useSelectedProjectQuery()

  // Check if realtime publications are available
  const { data: publications } = useDatabasePublicationsQuery({
    projectRef: project?.ref,
    connectionString: project?.connectionString,
  })
  const realtimePublication = (publications ?? []).find(
    (publication) => publication.name === 'supabase_realtime'
  )
  const isRealtimeAvailable =
    !!realtimePublication &&
    ((realtimePublication?.tables ?? []).length > 0 || realtimePublication?.tables === null)

  const [sendMessageShown, setSendMessageShown] = useState(false)
  const [realtimeConfig, setRealtimeConfig] = useState<RealtimeConfig>({
    enabled: false,
    projectRef: ref!,
    channelName: '',
    logLevel: 'info',
    token: '', // will be filled out by RealtimeTokensPopover
    schema: 'public',
    table: '*',
    isChannelPrivate: false,
    filter: undefined,
    bearer: null,
    enablePresence: true,
    enableDbChanges: isRealtimeAvailable, // Initialize based on publications availability
    enableBroadcast: true,
  })

  const { mutate: sendEvent } = useSendEventMutation()
  const { logData, sendMessage } = useRealtimeMessages(realtimeConfig, setRealtimeConfig)

  // Update enableDbChanges when publications change
  useEffect(() => {
    setRealtimeConfig((prev) => ({ ...prev, enableDbChanges: isRealtimeAvailable }))
  }, [isRealtimeAvailable])

  return (
    <div className="flex flex-col grow h-full">
      <Header config={realtimeConfig} onChangeConfig={setRealtimeConfig} />
      <div className="relative flex flex-col grow">
        <div className="flex grow">
          {(logData ?? []).length > 0 ? (
            <MessagesTable
              hasChannelSet={realtimeConfig.channelName.length > 0}
              enabled={realtimeConfig.enabled}
              data={logData}
              showSendMessage={() => setSendMessageShown(true)}
            />
          ) : (
            <EmptyRealtime projectRef={ref!} />
          )}
        </div>
      </div>
      <SendMessageModal
        visible={sendMessageShown}
        onSelectCancel={() => setSendMessageShown(false)}
        onSelectConfirm={(v) => {
          sendEvent({
            action: 'realtime_inspector_broadcast_sent',
            groups: { project: ref ?? 'Unknown', organization: org?.slug ?? 'Unknown' },
          })
          sendMessage(v.message, v.payload, () => setSendMessageShown(false))
        }}
      />
    </div>
  )
}