Uygulama (App) - kendi sohbet arayüzünüz ve mobil push

npm install signalbird

import { SignalbirdProvider, useChat, useIdentify } from 'signalbird/react'

export function App() {
  return (
    <SignalbirdProvider publicKey={process.env.NEXT_PUBLIC_SIGNALBIRD_APP_KEY!}>
      <Chat />
    </SignalbirdProvider>
  )
}

function Chat() {
  const {
    enabled,          // sohbet bu uygulamada açık mı (bootstrap cevabı)
    loading,
    messages,
    unread,
    agentTyping,
    withinHours,      // çalışma saati dışıysa false
    send,
    typing,
    markRead,
    close,
  } = useChat({ open: true })

  // Kullanıcı giriş yaptığında ziyaretçiyi kişi kaydına bağlar
  useIdentify(user && { external_id: user.id, email: user.email, name: user.name })

  if (!enabled) return null

  return (
    <>
      {!withinHours && <OfflineBanner />}
      {messages.map((m) => <Bubble key={m.id} message={m} />)}
      {agentTyping && <Typing />}
      <Composer onSend={send} onType={() => typing(true)} />
    </>
  )
}

import { useUnreadCount } from 'signalbird/react'

const unread = useUnreadCount()

import { usePushRegistration } from 'signalbird/react'

usePushRegistration(token ? { token, platform: 'web', provider: 'webpush' } : null)

import { signalbirdPlugin, useChat } from 'signalbird/vue'

app.use(signalbirdPlugin, { publicKey: import.meta.env.VITE_SIGNALBIRD_APP_KEY })

<script setup lang="ts">
import { ref } from 'vue'
import { useChat } from 'signalbird/vue'

const isOpen = ref(false)
const { state, send, typing, markRead } = useChat({ open: isOpen })
</script>

<template>
  <div v-for="m in state.messages" :key="m.id">{{ m.body }}</div>
  <span v-if="state.agentTyping">yazıyor…</span>
  <input @input="typing(true)" @keyup.enter="send(($event.target as HTMLInputElement).value)" />
</template>

// main.ts
import { provideSignalbird } from 'signalbird/angular'

bootstrapApplication(App, {
  providers: [provideSignalbird({ publicKey: environment.signalbirdAppKey })],
})

// chat.component.ts
import { SignalbirdService } from 'signalbird/angular'

@Component({
  template: `
    <div *ngFor="let m of (chat$ | async)?.messages">{{ m.body }}</div>
    <input #box (keyup.enter)="send(box.value)" />
  `,
})
export class ChatComponent implements OnInit {
  private signalbird = inject(SignalbirdService)

  chat$ = this.signalbird.chat$()

  ngOnInit() { this.signalbird.setOpen(true) }

  send(body: string) { this.signalbird.send(body) }
}

import AsyncStorage from '@react-native-async-storage/async-storage'
import { AppState } from 'react-native'
import {
  createSignalbirdApp,
  asyncStorageAdapter,
  useNativeChat,
  useNativePush,
} from 'signalbird/react-native'

// Depoyu vermek ZORUNLU
const client = createSignalbirdApp({
  publicKey: 'sb_public_live_…',
  storage: asyncStorageAdapter(AsyncStorage),
})

export function ChatScreen() {
  const [foreground, setForeground] = useState(true)

  useEffect(
    () => AppState.addEventListener('change', (s) => setForeground(s === 'active')).remove,
    [],
  )

  const { messages, send, agentTyping } = useNativeChat(client, {
    open: true,
    isForeground: foreground,   // arka planda yoklama turu atlanır - pil
  })

  useNativePush(client, token ? { token, platform: 'ios' } : null)

  return <MessageList data={messages} typing={agentTyping} onSend={send} />
}

import Signalbird

let client = try SignalbirdApp(config: .init(
    publicKey: "sb_public_live_…",
    chatKey: "destek",
    pushKey: "mobil"
))

// Sohbet açık mı, hangi renk, çalışma saati içinde miyiz
let boot = try await client.bootstrap()

try await client.startSession(["name": "Ayşe", "email": "ayse@example.com"])
try await client.startConversation(body: "Kargom nerede?")

// Yeni mesajlar - imleçle, tam listeyi tekrar indirmez
let updates = try await client.getConversation(conversationID, after: lastMessageID)

try await client.setTyping(conversationID: conversationID, isTyping: true)
try await client.markRead(conversationID: conversationID, lastMessageID: lastID)

// APNs
try await client.registerDevice(token: apnsToken, externalID: user.id, identityHash: user.signalbirdHash)

struct KeychainStorage: SignalbirdStorage {
    func get(_ key: String) -> String? { … }
    func set(_ key: String, _ value: String) { … }
    func remove(_ key: String) { … }
}

let client = try SignalbirdApp(config: .init(
    publicKey: "sb_public_live_…",
    chatKey: "destek",
    pushKey: "mobil",
    storage: KeychainStorage()
))

implementation("io.signalbird:signalbird-sdk:2.10.1")

import io.signalbird.sdk.*

class PrefsStorage(private val prefs: SharedPreferences) : SignalbirdStorage {
    override fun get(key: String) = prefs.getString(key, null)
    override fun set(key: String, value: String) = prefs.edit().putString(key, value).apply()
    override fun remove(key: String) = prefs.edit().remove(key).apply()
}

val client = SignalbirdApp(SignalbirdAppConfig(
    publicKey = "sb_public_live_…",
    chatKey = "destek",
    pushKey = "mobil",
    storage = PrefsStorage(prefs),
))

lifecycleScope.launch {
    client.bootstrap()
    client.startSession(mapOf("name" to "Ayşe"))
    client.startConversation("Kargom nerede?")

    val updates = client.getConversation(conversationId, after = lastMessageId)

    client.registerDevice(token = fcmToken, externalId = user.id, identityHash = user.signalbirdHash)
}

import { SignalbirdApp, ChatSession } from 'signalbird/app'

const client = new SignalbirdApp({ publicKey: 'sb_public_live_…' })

// Ham uçlar
await client.bootstrap()
await client.startSession({ name: 'Ayşe' })
await client.startConversation({ body: 'Merhaba' })

// ya da durum katmanı
const session = new ChatSession(client, { active: true })

session.subscribe((state) => render(state))
await session.start()
await session.send('Kargom nerede?')

identity_hash = hex( HMAC-SHA256( hex(SHA-256(sb_secret_live_…)), external_id ) )

await client.startSession({ external_id: user.id, identity_hash: user.signalbirdHash })
await client.identify({ external_id: user.id, identity_hash: user.signalbirdHash, email: user.email })
await client.registerDevice({ token, platform: 'web', external_id: user.id, identity_hash: user.signalbirdHash })
// `identityHash` yazımı da kabul edilir; sunucuya `identity_hash` olarak gider.

npm i signalbird@latest