🚀 File-based React Native: Real-time Features with Socket.io (TypeScript)

React Native অ্যাপে Real-time Features মানে হলো ব্যবহারকারী যেকোনো পরিবর্তন বা ডাটা সেকেন্ডের মধ্যে দেখতে পারে। Socket.io ব্যবহার করে আমরা সহজেই এই ধরনের ফিচার তৈরি করতে পারি। এখানে আমরা TypeScript ব্যবহার করবো।

📌 ১. Project Setup (File-based React Native + TypeScript)

প্রথমে React Native + TypeScript environment সেটআপ করুন:

npx react-native init RealtimeApp --template react-native-template-typescript
cd RealtimeApp
npm install socket.io-client

এখানে আমরা socket.io-client ব্যবহার করবো React Native এর client এর জন্য।

📌 ২. Folder Structure (File-based Approach)

আমাদের প্রজেক্ট ফোল্ডার হতে পারে এমন:

src/
src/components/Chat.tsx
src/screens/HomeScreen.tsx
src/services/socket.ts
App.tsx

📌 ৩. Socket Service Setup

একটি Socket service তৈরি করুন যা সব screen/component থেকে import করা যাবে।

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

let socket: Socket;

export const initSocket = () => {
  socket = io("http://localhost:3000"); // আপনার server URL
  return socket;
};

export const getSocket = () => socket;

আমরা এখানে একটি centralized socket তৈরি করেছি যা সব component ব্যবহার করতে পারবে।

📌 ৪. Chat Component তৈরি

এখন একটি Chat component তৈরি করি যা socket দিয়ে message পাঠাবে এবং রিসিভ করবে।

import React, { useEffect, useState } from "react";
import { View, TextInput, Button, FlatList, Text } from "react-native";
import { getSocket, initSocket } from "../services/socket";

interface Message {
  id: string;
  text: string;
}

const Chat: React.FC = () => {
  const [message, setMessage] = useState("");
  const [messages, setMessages] = useState([]);
  const socket = initSocket();

  useEffect(() => {
    socket.on("newMessage", (msg: Message) => {
      setMessages(prev => [...prev, msg]);
    });

    return () => {
      socket.off("newMessage");
    };
  }, []);

  const sendMessage = () => {
    if(message.trim() === "") return;

    const msg: Message = { id: Date.now().toString(), text: message };
    socket.emit("sendMessage", msg);
    setMessage("");
  };

  return (
    <View className="p-4">
      <FlatList
        data={messages}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => <Text className="mb-2">{item.text}</Text>}
      />

      <TextInput
        className="border-2 border-teal-400 p-2 mb-2 rounded"
        placeholder="Message লিখুন..."
        value={message}
        onChangeText={setMessage}
      />

      <Button title="Send" onPress={sendMessage} color="#0d9488" />
    </View>
  );
};

export default Chat;

এখানে FlatList দিয়ে সব message দেখাচ্ছে। TextInput থেকে message পাঠানো হচ্ছে এবং socket.on() দিয়ে অন্য user-এর message রিসিভ হচ্ছে।

📌 ৫. Home Screen Setup

import React from "react";
import { SafeAreaView } from "react-native";
import Chat from "../components/Chat";

const HomeScreen: React.FC = () => {
  return (
    <SafeAreaView className="flex-1">
      <Chat />
    </SafeAreaView>
  );
};

export default HomeScreen;

📌 ৬. Output & Demo

এখন আপনার অ্যাপ রান করলে, দুইটি device বা emulator থেকে একই time-এ message পাঠানো ও receive দেখানো যাবে।

Message Input থেকে লিখুন → Send করুন
অন্য user real-time এ message দেখতে পারবে
FlatList সব message দেখাবে

এইভাবে আমরা React Native + TypeScript + Socket.io দিয়ে একটি সহজ real-time chat তৈরি করতে পারি।

✨ Summary

File-based structure ব্যবহার করে project organize করা সহজ হয়।
Socket.io client-server communication সহজ করে।
React Native এর FlatList + state management ব্যবহার করে real-time data efficiently render করা যায়।
TypeScript ব্যবহার করলে type safety ও code maintainability বৃদ্ধি পায়।

Real-time Features with Socket.io