React Native Entegrasyonu

Socketra'yı React Native uygulamanıza entegre edin ve gerçek zamanlı mesajlaşma özelliklerini kullanın.

Kurulum

Öncelikle Socket.IO client kütüphanesini projenize ekleyin:

# npm ile
npm install socket.io-client

# yarn ile
yarn add socket.io-client

Bağlantı Kurma

Socketra sunucusuna bağlanmak için projenizin app_key'ini kullanın. App key'inizi dashboard'unuzdan alabilirsiniz.

import io from 'socket.io-client';

const socket = io(
  'https://socketra.net/project-YOUR_PROJECT_ID',
  {
    auth: {
      app_key: 'YOUR_APP_KEY'
    }
  }
);

Not: YOUR_PROJECT_ID ve YOUR_APP_KEY değerlerini dashboard'unuzdaki proje detaylarından alabilirsiniz.

Örnek Kullanım

Aşağıda React Native için tam bir örnek uygulama bulunmaktadır:

import React, { useEffect, useState } from 'react';
import { View, Text, TextInput, Button } from 'react-native';
import io from 'socket.io-client';

const App = () => {
  const [socket, setSocket] = useState(null);
  const [messages, setMessages] = useState([]);
  const [message, setMessage] = useState('');

  useEffect(() => {
    const newSocket = io(
      'https://socketra.net/project-1',
      {
        auth: {
          app_key: 'your-app-key-here'
        }
      }
    );

    newSocket.on('connect', () => {
      console.log('Socketra'ya bağlandı!');
    });

    newSocket.on('message', (data) => {
      setMessages((prev) => [...prev, data]);
    });

    newSocket.on('disconnect', () => {
      console.log('Bağlantı kesildi');
    });

    setSocket(newSocket);

    return () => newSocket.close();
  }, []);

  const sendMessage = () => {
    if (socket && message) {
      socket.emit('message', {
        text: message,
        timestamp: Date.now()
      });
      setMessage('');
    }
  };

  return (
    <View>
      <Text>Mesajlar:</Text>
      {messages.map((msg, i) => (
        <Text key={i}>{msg.text}</Text>
      ))}
      <TextInput
        value={message}
        onChangeText={setMessage}
      />
      <Button title="Gönder" onPress={sendMessage} />
    </View>
  );
};

Event'ler

connect

Socket bağlantısı kurulduğunda tetiklenir.

socket.on('connect', () => {
  console.log('Bağlandı!');
});

disconnect

Socket bağlantısı kesildiğinde tetiklenir.

socket.on('disconnect', () => {
  console.log('Bağlantı kesildi');
});

message

Sunucudan mesaj geldiğinde tetiklenir.

socket.on('message', (data) => {
  console.log('Mesaj:', data);
});

Önemli Notlar

  • • App key'inizi güvenli tutun ve asla public repository'lere commit etmeyin.
  • • Production ortamında https://socketra.net kullanın.
  • • Bağlantıyı component unmount olduğunda kapatmayı unutmayın.
  • • Her proje için farklı namespace kullanılır: /project-{PROJECT_ID}