⚡ Real-time Features with Socket.io in React Native

আধুনিক মোবাইল অ্যাপগুলোতে রিয়েল-টাইম আপডেট খুবই গুরুত্বপূর্ণ — যেমন:

• Live Chat System
• Real-time Notifications
• Online Users Status
• Live Location Update
• Real-time Dashboard / Stocks / Crypto Updates

React Native-এ রিয়েল-টাইম ফিচার implement করার সবচেয়ে জনপ্রিয় প্রযুক্তি হলো Socket.io।

---

🔹 Socket.io কী?

Socket.io হলো একটি JavaScript লাইব্রেরি, যা ব্যবহার করে আপনি bidirectional real-time connection তৈরি করতে পারেন server এবং client-এর মাঝে। সাধারণ HTTP request-এর মতো এটি অপেক্ষা করে না — বরং data push করা যায় instantly।

---

🔹 React Native-এ Socket.io Client ইনস্টল

npm install socket.io-client
    

এবার আপনি client-side code ব্যবহার করতে পারবেন।

---

🔹 Node.js Server Setup (Socket.io)

const io = require("socket.io")(3000, {
    cors: { origin: "*" }
});

io.on("connection", (socket) => {
    console.log("A user connected");

    socket.on("message", (msg) => {
        io.emit("message", msg);
    });
});
    

উপরের server code একটি simple chat/event broadcast system তৈরি করবে।

---

🔹 React Native থেকে Socket.io Server-এ Connect করা

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

export default function App() {
    const [socket, setSocket] = useState(null);
    const [message, setMessage] = useState("");
    const [chat, setChat] = useState([]);

    useEffect(() => {
        const newSocket = io("http://YOUR_IP:3000");
        setSocket(newSocket);

        newSocket.on("message", (msg) => {
            setChat((prev) => [...prev, msg]);
        });

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

    const sendMessage = () => {
        socket.emit("message", message);
        setMessage("");
    };

    return (
        <View>
            {chat.map((c, index) => (
                <Text key={index}>{c}</Text>
            ))}

            <TextInput value={message} onChangeText={setMessage} />
            <Button title="Send" onPress={sendMessage} />
        </View>
    );
}
    

✔ এখন React Native অ্যাপটি real-time chat message send এবং receive করতে পারবে।

---

🔹 Rooms / Groups ব্যবহার (Advanced)

// Server
socket.join("room1");
socket.to("room1").emit("message", "Hello Room 1");

// Client
socket.emit("join_room", "room1");
    

Rooms ব্যবহার করে আপনি পৃথক chat room, group, game lobby ইত্যাদি তৈরি করতে পারবেন।

---

🔹 Auto Reconnection & Online Status Detection

socket.on("connect", () => console.log("Connected"));
socket.on("disconnect", () => console.log("Disconnected"));
socket.on("connect_error", () => console.log("Reconnecting..."));
    

এভাবে আপনি user online/offline status track করতে পারেন।

---

🔹 Socket.io কোথায় ব্যবহার করবেন?

• Live Chat System
• Real-time Commenting
• Gaming Multiplayer System
• Live Delivery Tracking
• Stock / Crypto Live Ticker
• Online/Offline User Indicator
• Notification without Firebase

Socket.io React Native অ্যাপকে করে তোলে আরও dynamic, live এবং real-time।

---

✔ উপসংহার

Real-time apps এখনকার ডিজিটাল যুগের সবচেয়ে powerful feature। Socket.io এর মাধ্যমে React Native অ্যাপের মধ্যে আপনি খুব সহজেই chat, notifications, live tracking এবং আরও অনেক dynamic feature যোগ করতে পারবেন।