React Native Entegrasyon: Live Stream Status Socket

Migration rehberi

Yapılandırma sırası için Migration şablonu. Yeni düzenlemelerde Amaç → Önkoşullar → Endpoint → Request/Response → Hata kodları → Client adımları → İlgili sayfalar bölümlerini tercih edin.

Bu doküman, React Native uygulamasında /live-stream-status socket kanalını entegre etmek için minimal ama tam bilgiyi verir. Global durum event'leri auth gerektirmez; kullanıcıya özel liveStreamReadyToStart event'i için subscribe ile token gönderilmelidir.

1) Kurulum

npm install socket.io-client

2) Endpoint

Namespace: /live-stream-status
Auth: Global event'ler için gerekmez. liveStreamReadyToStart için subscribe gerekir.
Base URL örnekleri:
- Local: ws://localhost:3000
- Development: wss://dev.allmine.win
- Staging: wss://staging.allmine.win
- Production: wss://api.allmine.win

Bağlantı URL örneği:

const socketUrl = `${BASE_URL}/live-stream-status`;

3) Dinlenecek Event'ler

liveStreamScheduled
liveStreamPreparing
liveStreamStarted
liveStreamEnded
liveStreamExpired
liveStreamCancelled
liveStreamFundingProgress
liveStreamFundingGoalReached
liveStreamReadyToStart

4) Payload Tipleri

type LiveStreamStatus =
  | "scheduled"
  | "preparing"
  | "active"
  | "ended"
  | "expired"
  | "cancelled_by_host"
  | "cancelled_by_guest";

type LiveStreamType = "solo" | "duocrowd" | "duoself";
type AccessType = "free" | "paid";

type LiveStreamStatusEventSummary = {
  title: string | null;
  liveStreamType: LiveStreamType | null;
  accessType: AccessType | null;
  plannedStartDate: string | null;
  startedAt: string | null;
  endedAt: string | null;
  fundingGoal: number | null;
  collectedFunding: number | null;
  fundingPercentage: number | null;
};

type LiveStreamStatusEventBase = {
  eventId: string;
  streamId: string;
  occurredAt: string; // ISO 8601
  previousStatus: LiveStreamStatus | null;
  status: LiveStreamStatus;
  summary: LiveStreamStatusEventSummary;
};

type LiveStreamCancelledEvent = LiveStreamStatusEventBase & {
  cancelledByRole: "host" | "guest";
};

type LiveStreamFundingProgressEvent = LiveStreamStatusEventBase & {
  amountDelta: number;
  remainingFunding: number | null;
  isGoalReached: boolean;
};

type LiveStreamReadyToStartEvent = LiveStreamStatusEventBase & {
  previousStatus: "scheduled";
  status: "preparing";
  recipientRole: "host" | "guest";
  readyToStart: true;
};

Not:

liveStreamCancelled event'inde cancelledByRole gelir.
liveStreamFundingProgress event'inde amountDelta, remainingFunding, isGoalReached gelir.
liveStreamReadyToStart yalnızca token ile abone olan host/guest kullanıcı odasına gelir.

5) Socket Client (React Native)

services/liveStreamStatusSocket.ts

import { io, Socket } from "socket.io-client";

const EVENTS = [
  "liveStreamScheduled",
  "liveStreamPreparing",
  "liveStreamStarted",
  "liveStreamEnded",
  "liveStreamExpired",
  "liveStreamCancelled",
  "liveStreamFundingProgress",
  "liveStreamFundingGoalReached",
  "liveStreamReadyToStart",
] as const;

export type LiveStreamStatusSocketEventName = (typeof EVENTS)[number];

export function createLiveStreamStatusSocket(baseUrl: string): Socket {
  return io(`${baseUrl.replace(/\/$/, "")}/live-stream-status`, {
    transports: ["websocket", "polling"],
    reconnection: true,
    reconnectionAttempts: Infinity,
    reconnectionDelay: 1000,
    reconnectionDelayMax: 5000,
    timeout: 10000,
  });
}

export function subscribeLiveStreamStatusUser(socket: Socket, token: string) {
  socket.emit("subscribe", { token });
}

export function subscribeLiveStreamStatusEvents(
  socket: Socket,
  onEvent: (event: LiveStreamStatusSocketEventName, payload: unknown) => void,
) {
  const handlers = EVENTS.map((eventName) => {
    const handler = (payload: unknown) => onEvent(eventName, payload);
    socket.on(eventName, handler);
    return { eventName, handler };
  });

  return () => {
    handlers.forEach(({ eventName, handler }) => socket.off(eventName, handler));
  };
}

6) Hook Kullanımı

import { useEffect } from "react";
import { createLiveStreamStatusSocket, subscribeLiveStreamStatusEvents } from "@/services/liveStreamStatusSocket";

export function useLiveStreamStatusSocket(baseUrl: string, onEvent: (event: string, payload: unknown) => void) {
  useEffect(() => {
    const socket = createLiveStreamStatusSocket(baseUrl);
    // ready-to-start gibi kullanıcıya özel event'ler için token mevcutsa:
    // socket.emit("subscribe", { token });

    const unsubscribe = subscribeLiveStreamStatusEvents(socket, onEvent);

    socket.on("connect_error", (err) => {
      console.log("live-stream-status connect_error:", err?.message);
    });

    return () => {
      unsubscribe();
      socket.disconnect();
    };
  }, [baseUrl, onEvent]);
}

7) Kullanıcıya Özel Ready Event

liveStreamReadyToStart event'ini almak isteyen client, bağlantıdan sonra token ile abone olur:

socket.emit("subscribe", { token: accessToken });

socket.on("subscribeSuccess", ({ userId, room }) => {
  console.log("status socket subscribed:", userId, room);
});

socket.on("subscribeError", ({ code, message }) => {
  console.log("status socket subscribe error:", code, message);
});

socket.on("liveStreamReadyToStart", (payload: LiveStreamReadyToStartEvent) => {
  if (payload.recipientRole === "host") {
    // Host entry ekranına yönlendirme.
  } else {
    // Guest entry ekranına yönlendirme.
  }
});

8) Uygulama Notları

Bu kanal snapshot vermez; sadece değişimleri (delta) gönderir.
İlk açılış state'i için REST endpoint kullanın, socket'i sadece güncelleme için kullanın.
Uygulama arka plana geçtiğinde (AppState) isterseniz disconnect edip foreground'da tekrar connect edebilirsiniz.
liveStreamReadyToStart kaçırılırsa fallback olarak kullanıcının upcoming/active stream REST state'i kontrol edilmelidir.

9) Hızlı Test

Uygulama ile /live-stream-status bağlantısını açın.
liveStreamReadyToStart için token ile subscribe gönderin.
Backend'de bir yayın status değişimi tetikleyin (scheduled -> preparing, active -> ended vb.).
Doğru event adının geldiğini doğrulayın.
eventId, streamId, status, summary alanlarının dolu olduğunu kontrol edin.
liveStreamFundingProgress, liveStreamCancelled ve liveStreamReadyToStart özel alanlarını ayrıca doğrulayın.

React Native live stream status