WebSocket ব্যবহার করে Real-time Updates

GraphQL Subscription ব্যবহারের মাধ্যমে আপনি WebSocket ব্যবহার করে রিয়েল-টাইম আপডেট পাবেন, যা বিশেষভাবে উপকারী যখন আপনি এমন অ্যাপ্লিকেশন তৈরি করছেন যেখানে ক্লায়েন্ট এবং সার্ভারের মধ্যে দ্রুত এবং একে অপরকে অবিলম্বে তথ্য জানানো প্রয়োজন। WebSocket হল একটি কমিউনিকেশন প্রোটোকল যা ক্লায়েন্ট এবং সার্ভারের মধ্যে একটি স্থায়ী কানেকশন তৈরি করে, যার মাধ্যমে ডেটার পরিবর্তন সরাসরি ক্লায়েন্টে পাঠানো যায়।

GraphQL Subscription এর মাধ্যমে WebSocket ব্যবহার করা সাধারণত চ্যাট অ্যাপ্লিকেশন, লাইভ স্ট্যাটাস, ফিড, বা অন্যান্য রিয়েল-টাইম ডেটা প্রয়োগে ব্যবহৃত হয়।

এখানে Apollo Server এবং Apollo Client ব্যবহার করে WebSocket এর মাধ্যমে GraphQL Subscription সেটআপ করার পদ্ধতি দেখানো হয়েছে।

WebSocket ব্যবহার করে Real-time Updates এর জন্য GraphQL Subscription

ধাপ ১: Apollo Server Setup

প্রথমে, Apollo Server-এ WebSocket এর মাধ্যমে Subscription কনফিগার করতে হবে। এতে subscriptions-transport-ws প্যাকেজ ব্যবহৃত হবে, যা WebSocket এর মাধ্যমে রিয়েল-টাইম ডেটা ট্রান্সফার করতে সাহায্য করে।

1. Apollo Server এবং WebSocket প্যাকেজ ইনস্টল করা:

npm install apollo-server graphql subscriptions-transport-ws

2. Apollo Server কনফিগারেশন:

এখন, Apollo Server সেটআপ করি যেখানে WebSocket কানেকশন সাপোর্ট করা হবে।

const { ApolloServer, gql } = require('apollo-server');
const { PubSub } = require('graphql-subscriptions');

// PubSub instance (ক্লায়েন্ট এবং সার্ভারের মধ্যে রিয়েল-টাইম ডেটা ট্রান্সফারের জন্য)
const pubsub = new PubSub();

// GraphQL Schema
const typeDefs = gql`
  type Message {
    id: ID!
    content: String
    sender: String
  }

  type Query {
    messages: [Message]
  }

  type Mutation {
    sendMessage(content: String, sender: String): Message
  }

  type Subscription {
    messageAdded: Message
  }
`;

// Resolvers
const resolvers = {
  Query: {
    messages: () => [{ id: "1", content: "Hello", sender: "John" }],
  },
  Mutation: {
    sendMessage: (_, { content, sender }) => {
      const message = { id: String(Date.now()), content, sender };
      pubsub.publish('MESSAGE_ADDED', { messageAdded: message });
      return message;
    },
  },
  Subscription: {
    messageAdded: {
      subscribe: () => pubsub.asyncIterator('MESSAGE_ADDED'),
    },
  },
};

// Apollo Server setup with subscriptions
const server = new ApolloServer({
  typeDefs,
  resolvers,
  subscriptions: {
    path: '/subscriptions', // WebSocket URL for subscriptions
  },
});

server.listen().then(({ url }) => {
  console.log(`Server running at ${url}`);
});

এখানে:

• PubSub ব্যবহার করে রিয়েল-টাইম ডেটা সিঙ্ক করা হয়েছে। যখন মেসেজ পাঠানো হয়, তখন messageAdded সাবস্ক্রিপশন এর মাধ্যমে সেই মেসেজ ক্লায়েন্টে পাঠানো হয়।

ধাপ ২: Apollo Client Setup (React)

এখন, Apollo Client ব্যবহার করে GraphQL Subscription পরিচালনা করতে হবে। গ্রাফকিউএল Subscription ব্যবহার করার জন্য WebSocketLink কনফিগার করতে হবে।

1. Apollo Client এবং WebSocketLink ইনস্টল করা:

npm install @apollo/client subscriptions-transport-ws graphql

2. Apollo Client কনফিগারেশন:

import React from 'react';
import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
import { WebSocketLink } from '@apollo/client/link/ws';
import { ApolloProvider as ApolloHooksProvider } from '@apollo/react-hooks';
import { gql, useSubscription } from '@apollo/client';

// WebSocketLink কনফিগারেশন
const wsLink = new WebSocketLink({
  uri: `ws://localhost:4000/subscriptions`, // Apollo Server এর WebSocket URL
  options: {
    reconnect: true,
  },
});

// Apollo Client সেটআপ
const client = new ApolloClient({
  link: wsLink,
  cache: new InMemoryCache(),
});

const MESSAGE_ADDED = gql`
  subscription {
    messageAdded {
      id
      content
      sender
    }
  }
`;

function App() {
  const { data, loading, error } = useSubscription(MESSAGE_ADDED);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <div>
      <h3>New Messages:</h3>
      <ul>
        {data.messageAdded && (
          <li key={data.messageAdded.id}>
            {data.messageAdded.sender}: {data.messageAdded.content}
          </li>
        )}
      </ul>
    </div>
  );
}

function Root() {
  return (
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>
  );
}

export default Root;

এখানে:

• WebSocketLink গ্রাফকিউএল সাবস্ক্রিপশন এর জন্য ব্যবহৃত হয়েছে। এটি Apollo Client কে WebSocket মাধ্যমে গ্রাফকিউএল সার্ভারের সাথে সংযুক্ত করে।
• useSubscription হুক ব্যবহার করে Subscription কুয়েরি সাবস্ক্রাইব করা হয়েছে এবং যখন নতুন মেসেজ আসবে, তখন তা রিয়েল-টাইমে UI-তে দেখা যাবে।

ধাপ ৩: Subscription রেসপন্স হ্যান্ডলিং

সাবস্ক্রিপশন রেসপন্স হ্যান্ডলিংয়ের সময় আপনি loading, error, এবং data ফিল্ড ব্যবহার করবেন:

const { data, loading, error } = useSubscription(MESSAGE_ADDED);

if (loading) return <p>Loading...</p>;
if (error) return <p>Error: {error.message}</p>;

return (
  <div>
    <h3>New Messages:</h3>
    <ul>
      {data.messageAdded && (
        <li key={data.messageAdded.id}>
          {data.messageAdded.sender}: {data.messageAdded.content}
        </li>
      )}
    </ul>
  </div>
);

এখানে:

• loading: সাবস্ক্রিপশন রেসপন্স প্রক্রিয়া চলছে কিনা তা চেক করবে।
• error: যদি কোনো সমস্যা ঘটে, তাহলে তা দেখাবে।
• data: রিয়েল-টাইম ডেটা, যেমন নতুন মেসেজ, পাবেন।

WebSocket ব্যবহার করে Real-time Updates এর সুবিধা

1. দ্রুত রেসপন্স: WebSocket-এ একটি স্থায়ী কানেকশন ব্যবহৃত হয়, যার ফলে সার্ভার এবং ক্লায়েন্টের মধ্যে রিয়েল-টাইম ডেটা দ্রুত আদান-প্রদান হয়।
2. কম ব্যান্ডউইথ ব্যবহৃত হয়: WebSocket কানেকশন একবার তৈরি হয়ে গেলে, অতিরিক্ত হেডারসহ নতুন রিকোয়েস্ট পাঠানোর প্রয়োজন হয় না, ফলে ব্যান্ডউইথ সাশ্রয় হয়।
3. Scalability: গ্রাফকিউএল সাবস্ক্রিপশন ব্যবহারের মাধ্যমে, আপনি একাধিক ক্লায়েন্টকে একসাথে রিয়েল-টাইম ডেটা পাঠাতে পারেন।

সারাংশ

WebSocket ব্যবহার করে GraphQL Subscription গ্রাফকিউএল সার্ভার এবং ক্লায়েন্টের মধ্যে রিয়েল-টাইম ডেটা ট্রান্সফার করতে অত্যন্ত কার্যকরী পদ্ধতি। Apollo Server এবং Apollo Client এর মাধ্যমে, আপনি সহজেই WebSocket এর মাধ্যমে Subscription সেটআপ করতে পারেন, যাতে ক্লায়েন্ট এবং সার্ভারের মধ্যে অবিলম্বে তথ্য প্রেরণ করা যায়। এটি চ্যাট অ্যাপ্লিকেশন, লাইভ স্ট্যাটাস, এবং অন্যান্য রিয়েল-টাইম ডেটা ব্যবস্থাপনার জন্য অত্যন্ত কার্যকরী।