GraphQL এবং Real-time Communication

গ্রাফকিউএল (GraphQL)-এ Real-time Communication একটি গুরুত্বপূর্ণ ফিচার যা ডেভেলপারদের রিয়েল-টাইম আপডেট সরবরাহ করতে সহায়ক। গ্রাফকিউএল স্বাভাবিকভাবে কেবল ক্লায়েন্ট-সার্ভার কমিউনিকেশন পরিচালনা করে, তবে রিয়েল-টাইম যোগাযোগের জন্য এটি Subscriptions ব্যবহার করে, যা GraphQL-এর একটি শক্তিশালী ফিচার।

GraphQL Subscriptions আপনাকে ক্লায়েন্ট এবং সার্ভারের মধ্যে দুই-দিকে রিয়েল-টাইম ডেটা ফ্লো তৈরি করতে দেয়। যখন সার্ভারে কোনও পরিবর্তন ঘটে (যেমন নতুন ডেটা তৈরি হওয়া, ডেটা আপডেট হওয়া), তখন সার্ভার সেই পরিবর্তন ক্লায়েন্টকে রিয়েল-টাইমে জানিয়ে দেয়। এটি সাধারণত WebSocket প্রযুক্তির মাধ্যমে কাজ করে, যেখানে একটি ওপেন কানেকশন বজায় রেখে সার্ভার এবং ক্লায়েন্ট একে অপরের সাথে ডেটা শেয়ার করতে পারে।

GraphQL এবং Real-time Communication এর মধ্যে সম্পর্ক

1. WebSocket ব্যবহার:
   গ্রাফকিউএল সাবস্ক্রিপশন সাধারণত WebSocket ব্যবহার করে, যা একটি full-duplex যোগাযোগ প্রোটোকল। এটি সার্ভার এবং ক্লায়েন্টের মধ্যে একটি স্থায়ী কানেকশন তৈরি করে, যাতে উভয় দিক থেকেই ডেটা পাঠানো যায়।
2. Real-time Data Updates:
   ক্লায়েন্ট একবার সাবস্ক্রাইব করার পর, সার্ভার তখনই ডেটার পরিবর্তন ক্লায়েন্টে পাঠায় যখন তা ঘটে। এটি সাধারণত চ্যাট অ্যাপ্লিকেশন, লাইভ স্ট্যাটাস ট্র্যাকিং, ফাইনান্স বা সোশ্যাল মিডিয়া অ্যাপ্লিকেশনগুলির জন্য ব্যবহৃত হয়।

GraphQL Subscriptions এর মাধ্যমে Real-time Communication

GraphQL Subscriptions ত্রুটি এবং ডেটা পরিবর্তন রিয়েল-টাইমে ক্লায়েন্টে প্রেরণ করতে ব্যবহৃত হয়। সাধারণত, সাবস্ক্রিপশনগুলিতে ক্লায়েন্ট সার্ভারে একটি সাবস্ক্রিপশন রিকোয়েস্ট পাঠায়, এবং সার্ভার সেই রিকোয়েস্ট গ্রহণ করে সেই ডেটাতে পরিবর্তন ঘটলে তা ক্লায়েন্টে পাঠিয়ে দেয়।

GraphQL Subscriptions এর সাধারণ কাঠামো:

1. Subscription:
   একটি ক্লায়েন্ট সাবস্ক্রিপশন পাঠায় সার্ভারের কাছে, যেখানে এটি একটি নির্দিষ্ট ইভেন্ট বা ডেটা পরিবর্তনের জন্য অপেক্ষা করে।
2. Resolver:
   সাবস্ক্রিপশন রেজোলভারটি সার্ভারের মধ্যে ডেটার পরিবর্তন সনাক্ত করে এবং ক্লায়েন্টে সেই পরিবর্তনটি পাঠায়।
3. Client-side:
   ক্লায়েন্ট সাবস্ক্রিপশন থেকে রিয়েল-টাইম আপডেট গ্রহণ করে এবং ব্যবহারকারীর ইন্টারফেসে তা প্রদর্শন করে।

GraphQL Subscriptions এর উদাহরণ

ধরা যাক, একটি চ্যাট অ্যাপ্লিকেশন তৈরি করা হচ্ছে, যেখানে ব্যবহারকারীরা একে অপরের সাথে বার্তা আদান-প্রদান করতে পারে। এখানে একটি সাধারণ GraphQL Subscription ব্যবহারের উদাহরণ দেওয়া হলো:

ধাপ ১: GraphQL Subscription Schema

type Subscription {
  newMessage(roomId: ID!): Message
}

type Message {
  id: ID!
  content: String
  sender: String
}

এখানে, newMessage একটি সাবস্ক্রিপশন ফিল্ড, যা roomId এর জন্য নতুন মেসেজ পাঠানোর জন্য অপেক্ষা করছে।

ধাপ ২: Subscription Resolver

const { PubSub } = require('graphql-subscriptions');
const pubsub = new PubSub();

const resolvers = {
  Subscription: {
    newMessage: {
      subscribe: (_, { roomId }) => pubsub.asyncIterator(`message_${roomId}`)
    }
  },
  Mutation: {
    sendMessage: (_, { roomId, content, sender }) => {
      // মেসেজটি ডাটাবেসে সেভ করুন (যেমন MongoDB)
      const message = { id: Math.random(), content, sender };

      // মেসেজের জন্য PubSub মাধ্যমে রিয়েল-টাইম আপডেট পাঠান
      pubsub.publish(`message_${roomId}`, { newMessage: message });

      return message;
    }
  }
};

এখানে:

• pubsub.asyncIterator ব্যবহার করে ক্লায়েন্টকে নির্দিষ্ট রুমের জন্য নতুন মেসেজের সাবস্ক্রিপশন দেওয়া হচ্ছে।
• pubsub.publish ব্যবহার করে সার্ভার নতুন মেসেজ পাঠাচ্ছে, যা ক্লায়েন্টদের কাছে রিয়েল-টাইমে পৌঁছাবে।

ধাপ ৩: Client-side Subscription

ক্লায়েন্টে সাবস্ক্রিপশন ব্যবহার করে মেসেজ রিয়েল-টাইমে গ্রহণ করা যাবে:

import { ApolloClient, InMemoryCache, gql } from '@apollo/client';

const client = new ApolloClient({
  uri: 'http://localhost:4000/graphql',
  cache: new InMemoryCache()
});

const NEW_MESSAGE_SUBSCRIPTION = gql`
  subscription onNewMessage($roomId: ID!) {
    newMessage(roomId: $roomId) {
      id
      content
      sender
    }
  }
`;

client
  .subscribe({ query: NEW_MESSAGE_SUBSCRIPTION, variables: { roomId: '123' } })
  .subscribe({
    next({ data }) {
      console.log('New message received:', data.newMessage);
    },
    error(err) { console.error('Subscription error:', err); }
  });

এখানে:

• client.subscribe ব্যবহার করে গ্রাফকিউএল সাবস্ক্রিপশন চালু করা হয়েছে।
• যখন নতুন মেসেজ আসে, তখন সেটি রিয়েল-টাইমে console এ দেখা যাবে।

GraphQL Subscriptions এর সুবিধা

1. দ্রুত রিয়েল-টাইম আপডেট:
   গ্রাফকিউএল সাবস্ক্রিপশন আপনাকে রিয়েল-টাইমে পরিবর্তন পেতে সহায়ক করে। যখন ডেটা পরিবর্তন হয়, ক্লায়েন্টকে তাৎক্ষণিকভাবে জানানো হয়।
2. কমপ্লেক্স ডেটা রিলেশন:
   গ্রাফকিউএল সাবস্ক্রিপশন একাধিক ডেটা সোর্স এবং রিলেশন সহ সহজে কাজ করতে পারে। আপনি একাধিক সাবস্ক্রিপশন কুয়েরি ব্যবহার করতে পারেন।
3. বাহ্যিক সিস্টেমের সাথে একীকরণ:
   GraphQL Subscriptions অন্যান্য বাহ্যিক সিস্টেম (যেমন, WebSockets, MQTT, বা Firebase) এর সাথে সহজেই একীকৃত হতে পারে।
4. একক কানেকশন ব্যবহারের সুবিধা:
   WebSocket কানেকশনের মাধ্যমে, আপনি একক সংযোগে সমস্ত রিয়েল-টাইম আপডেট পরিচালনা করতে পারেন, যা সার্ভার এবং ক্লায়েন্টের মধ্যে অতিরিক্ত যোগাযোগ হ্রাস করে।

সারাংশ

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

গ্রাফকিউএল (GraphQL) এর Subscription ফিচার রিয়েল-টাইম ডেটা ফ্লো পরিচালনার জন্য অত্যন্ত কার্যকরী। এটি ক্লায়েন্ট এবং সার্ভারের মধ্যে একধরনের লং লাইভ কানেকশন প্রতিষ্ঠা করে, যার মাধ্যমে সার্ভার কোনো ডেটার পরিবর্তন হলে তা ক্লায়েন্টকে রিয়েল-টাইমে পাঠিয়ে দেয়। এই ফিচারটি বিশেষত চ্যাট অ্যাপ্লিকেশন, লাইভ ডেটা ট্র্যাকিং, নোটিফিকেশন সিস্টেম বা অন্যান্য রিয়েল-টাইম ইন্টারঅ্যাকটিভ সিস্টেমে ব্যবহৃত হয়।

GraphQL Subscription এর মাধ্যমে Real-time Data Flow কীভাবে কাজ করে?

Subscription মূলত একটি GraphQL অপারেশন যা ক্লায়েন্টকে একটি সার্ভারের ইভেন্টের জন্য সাবস্ক্রাইব করতে দেয়। একবার সাবস্ক্রাইব করার পর, সার্ভার যখনই সেই ইভেন্টে কোনো পরিবর্তন ঘটায় (যেমন, নতুন মেসেজ আসা, স্ট্যাটাস আপডেট), তখন সার্ভার সেই পরিবর্তন বা ইভেন্ট ক্লায়েন্টকে পাঠায়। এর মাধ্যমে ক্লায়েন্টরা রিয়েল-টাইমে আপডেট পেতে পারে।

GraphQL Subscription এর মূল উপাদান

1. Subscription Query:
   ক্লায়েন্ট একটি সাবস্ক্রিপশন কুয়েরি তৈরি করে, যা একটি নির্দিষ্ট ডেটার পরিবর্তন বা ইভেন্ট ট্র্যাক করতে সাহায্য করে।
2. Server-Side Subscription Handler:
   সার্ভারে Subscription সেটআপ করা হয়, যা ডেটা পরিবর্তনের সময় ক্লায়েন্টকে আপডেট পাঠাবে।
3. WebSocket or HTTP/2:
   Subscription সাধারণত WebSocket বা HTTP/2 কানেকশন ব্যবহার করে বাস্তবায়িত হয়, যা ক্লায়েন্ট এবং সার্ভারের মধ্যে স্থায়ী কানেকশন বজায় রাখে।

GraphQL Subscription এর কাজের ধরন

1. ক্লায়েন্ট Subscription Request পাঠায়:
   প্রথমে ক্লায়েন্ট সার্ভারে একটি subscription কুয়েরি পাঠায়।
2. WebSocket বা HTTP/2 কানেকশন:
   সার্ভার কুয়েরি গ্রহণ করার পর, একটি স্থায়ী কানেকশন তৈরি হয় (যেমন WebSocket)। সার্ভার তার উপর পর্যবেক্ষণ রাখে এবং কোনো ডেটা পরিবর্তন হলে, তা ক্লায়েন্টে পাঠানো হয়।
3. ডেটা পরিবর্তন হলে রিয়েল-টাইম আপডেট:
   যখনই কোনো পরিবর্তন ঘটে (যেমন, একটি নতুন মেসেজ আসা), সার্ভার ক্লায়েন্টকে সঠিক ডেটা পাঠায়।
4. ক্লায়েন্ট রেসপন্স গ্রহণ করে:
   ক্লায়েন্ট সার্ভার থেকে রিয়েল-টাইম ডেটা গ্রহণ করে এবং UI আপডেট হয়।

GraphQL Subscription এর উদাহরণ

ধরা যাক, আপনি একটি চ্যাট অ্যাপ্লিকেশন তৈরি করছেন এবং আপনি চান, নতুন মেসেজ আসলে তা রিয়েল-টাইমে ক্লায়েন্টে পৌঁছাক।

ধাপ ১: Subscription Query লিখুন

subscription {
  messageAdded {
    id
    content
    user {
      name
    }
  }
}

এখানে:

• messageAdded হল একটি subscription যা নতুন মেসেজ আসলে রিয়েল-টাইমে ক্লায়েন্টে পাঠানো হবে।
• id, content, user হল মেসেজের প্রাসঙ্গিক ফিল্ড যা আপনি দেখতে চান।

ধাপ ২: Server-Side Subscription Handler

আপনার সার্ভারে subscription সেটআপ করতে হবে। ধরুন আপনি Apollo Server ব্যবহার করছেন:

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

// GraphQL Schema
const typeDefs = gql`
  type User {
    name: String
  }

  type Message {
    id: ID
    content: String
    user: User
  }

  type Subscription {
    messageAdded: Message
  }

  type Mutation {
    addMessage(content: String, userId: ID!): Message
  }

  type Query {
    messages: [Message]
  }
`;

// Resolver Functions
const resolvers = {
  Query: {
    messages: () => {
      return [{ id: 1, content: "Hello World", user: { name: "John" } }];
    }
  },
  Mutation: {
    addMessage: (_, { content, userId }) => {
      const newMessage = {
        id: Math.floor(Math.random() * 1000),
        content,
        user: { name: "User" }
      };
      
      // Publish the message to subscribers
      pubsub.publish('MESSAGE_ADDED', { messageAdded: newMessage });
      return newMessage;
    }
  },
  Subscription: {
    messageAdded: {
      subscribe: () => pubsub.asyncIterator('MESSAGE_ADDED')
    }
  }
};

// Apollo Server Setup
const server = new ApolloServer({
  typeDefs,
  resolvers
});

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

এখানে:

• PubSub ব্যবহার করা হয়েছে যেটি রিয়েল-টাইম ডেটার জন্য সাবস্ক্রাইবারদের কাছে ডেটা পুশ করতে সাহায্য করে।
• messageAdded হল আমাদের subscription, যা সার্ভার থেকে মেসেজ আপডেট হওয়ার সাথে সাথে ক্লায়েন্টে পৌঁছাবে।

ধাপ ৩: Mutation এর মাধ্যমে ডেটা পরিবর্তন করা

ক্লায়েন্ট একটি নতুন মেসেজ পাঠানোর জন্য Mutation ব্যবহার করবে:

mutation {
  addMessage(content: "New message!", userId: "1") {
    id
    content
  }
}

• addMessage হল Mutation যা একটি নতুন মেসেজ তৈরি করবে এবং তা সার্ভারের মাধ্যমে subscription কে পুশ করবে।

ধাপ ৪: Client-Side Subscription Implementation

এখন, ক্লায়েন্টে GraphQL subscription কিভাবে কাজ করবে তা দেখুন। ক্লায়েন্টে Apollo Client ব্যবহার করে সাবস্ক্রিপশন করা যেতে পারে:

import { ApolloClient, InMemoryCache, gql, ApolloProvider } from '@apollo/client';

const client = new ApolloClient({
  uri: 'http://localhost:4000',
  cache: new InMemoryCache()
});

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

client.subscribe({ query: MESSAGE_ADDED }).subscribe({
  next(data) {
    console.log("New message added:", data.data.messageAdded);
  }
});

এখানে:

• subscribe ক্লায়েন্টের জন্য messageAdded subscription কুয়েরি পাঠাবে এবং যখনই নতুন মেসেজ আসবে, তা ক্লায়েন্টে রিয়েল-টাইমে পৌঁছাবে।

GraphQL Subscription এর সুবিধা

1. Real-time Updates:
   Subscription এর মাধ্যমে, সার্ভার কোনো পরিবর্তন ঘটলেই ক্লায়েন্টকে তাৎক্ষণিকভাবে আপডেট পাঠায়, যা রিয়েল-টাইম ইন্টারঅ্যাকটিভ অ্যাপ্লিকেশন তৈরি করতে সহায়ক।
2. Efficient Communication:
   WebSocket বা HTTP/2 এর মাধ্যমে স্থায়ী কানেকশন বজায় থাকে, তাই বারবার সার্ভারে রিকোয়েস্ট পাঠানোর প্রয়োজন হয় না। এটি নেটওয়ার্ক ট্রাফিক কমাতে সাহায্য করে।
3. Push Notifications:
   Subscription ব্যবহার করে আপনাকে পুশ নোটিফিকেশন সিস্টেম তৈরি করতে সহায়ক, যেমন নতুন মেসেজ, লাইক, অথবা স্ট্যাটাস আপডেট।

সারাংশ

GraphQL Subscription এর মাধ্যমে আপনি রিয়েল-টাইম ডেটা ফ্লো পরিচালনা করতে পারেন, যা ক্লায়েন্ট এবং সার্ভারের মধ্যে ইভেন্ট ড্রিভেন যোগাযোগ তৈরি করে। এটি চ্যাট অ্যাপ্লিকেশন, লাইভ ট্র্যাকিং সিস্টেম এবং অন্যান্য রিয়েল-টাইম ইন্টারঅ্যাকটিভ অ্যাপ্লিকেশনের জন্য অত্যন্ত উপযোগী। WebSocket বা HTTP/2 কানেকশন ব্যবহার করে, সার্ভার ডেটার পরিবর্তন হলে তা ক্লায়েন্টে অবিলম্বে পাঠায়।

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 সেটআপ করতে পারেন, যাতে ক্লায়েন্ট এবং সার্ভারের মধ্যে অবিলম্বে তথ্য প্রেরণ করা যায়। এটি চ্যাট অ্যাপ্লিকেশন, লাইভ স্ট্যাটাস, এবং অন্যান্য রিয়েল-টাইম ডেটা ব্যবস্থাপনার জন্য অত্যন্ত কার্যকরী।

PubSub (Publish-Subscribe) হল একটি কমিউনিকেশন প্যাটার্ন যা Event-Driven Architecture (EDA) এর মধ্যে একটি গুরুত্বপূর্ণ ভূমিকা পালন করে, এবং এটি GraphQL-এ রিয়েল-টাইম ডেটা ট্রান্সফার করার জন্য ব্যবহৃত হয়। PubSub প্যাটার্নের মাধ্যমে, আপনি একটি অ্যাপ্লিকেশন বা সিস্টেমে বিভিন্ন কম্পোনেন্টের মধ্যে ডেটার অ্যাসিঙ্ক্রোনাস কমিউনিকেশন সহজে পরিচালনা করতে পারেন।

এই মডেলটি Publishers এবং Subscribers এর মধ্যে যোগাযোগের মাধ্যমে কাজ করে। একটি Publisher ইভেন্ট পাঠায় এবং Subscriber সেই ইভেন্টটি গ্রহণ করে এবং তার সাথে প্রতিক্রিয়া জানায়। GraphQL-এর মধ্যে PubSub ব্যবহার করে আপনি real-time events ম্যানেজ করতে পারেন এবং live data updates ক্লায়েন্টে পাঠাতে পারেন, যেমন chat messages, live scores, notifications, এবং অন্যান্য রিয়েল-টাইম ইভেন্ট।

এখানে GraphQL PubSub ব্যবহার করে Event Driven Architecture তৈরি করার পদ্ধতি ব্যাখ্যা করা হলো।

PubSub প্যাটার্ন কী?

PubSub হল একটি বার্তা প্রেরণ প্যাটার্ন যেখানে:

• Publishers ইভেন্ট বা বার্তা তৈরি করে এবং এটি নির্দিষ্ট Topics বা Channels এ প্রেরণ করে।
• Subscribers নির্দিষ্ট Topics বা Channels এর প্রতি সাবস্ক্রাইব করে এবং যখনই কোনো ইভেন্ট সেই Topic বা Channel এ আসে, তখন তারা সেই ইভেন্ট বা বার্তা গ্রহণ করে।

এই প্যাটার্নটি event-driven কমিউনিকেশন সিস্টেম তৈরি করতে সহায়ক।

PubSub ব্যবহারের জন্য GraphQL Subscription

GraphQL Subscription হল GraphQL এর একটি ফিচার যা ক্লায়েন্টদের real-time data গ্রহণ করার সুযোগ দেয়। এটি সাধারণত WebSocket বা HTTP long polling ব্যবহার করে কাজ করে, যেখানে সার্ভার এবং ক্লায়েন্টের মধ্যে একটি উন্মুক্ত কানেকশন তৈরি হয় এবং সার্ভার যখনই ডেটাতে পরিবর্তন করে, তখন তা ক্লায়েন্টকে রিয়েল-টাইমে জানানো হয়।

এখানে PubSub এবং GraphQL Subscription একসাথে ব্যবহারের মাধ্যমে ইভেন্ট ড্রিভেন আর্কিটেকচার তৈরি করা হবে।

ধাপ ১: Apollo Server সেটআপ

প্রথমে, আপনাকে Apollo Server এবং Apollo Server PubSub ইনস্টল করতে হবে। PubSub ইভেন্টগুলির মধ্যে যোগাযোগের জন্য ব্যবহৃত হবে।

npm install apollo-server graphql
npm install @apollo/subgraph

এখন, আপনার অ্যাপ্লিকেশনে PubSub সেটআপ করুন:

const { ApolloServer, gql, PubSub } = require('apollo-server');
const pubsub = new PubSub();
const MESSAGE_ADDED = 'MESSAGE_ADDED';

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

  type Query {
    messages: [Message]
  }

  type Mutation {
    addMessage(content: String!, user: String!): Message
  }

  type Subscription {
    messageAdded: Message
  }
`;

// Resolvers
const resolvers = {
  Query: {
    messages: () => [], // Initially, empty array
  },

  Mutation: {
    addMessage: (_, { content, user }) => {
      const message = { id: Math.random().toString(), content, user };
      
      // Publish event when new message is added
      pubsub.publish(MESSAGE_ADDED, { messageAdded: message });
      return message;
    },
  },

  Subscription: {
    messageAdded: {
      subscribe: () => pubsub.asyncIterator([MESSAGE_ADDED]),
    },
  },
};

// Apollo Server instance
const server = new ApolloServer({
  typeDefs,
  resolvers,
});

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

এখানে:

• PubSub ক্লাস ব্যবহার করা হয়েছে এবং MESSAGE_ADDED টপিকের মাধ্যমে একটি ইভেন্ট পাবলিশ করা হচ্ছে।
• Mutation এর মাধ্যমে নতুন মেসেজ তৈরি হলে, সেই মেসেজ PubSub মাধ্যমে সাবস্ক্রাইবারদের পাঠানো হচ্ছে।

ধাপ ২: Client Subscription (Real-time Data)

এখন, আপনি GraphQL Subscription ব্যবহার করে ক্লায়েন্ট সাইডে রিয়েল-টাইম ডেটা পেতে পারবেন। এটি সাধারণত WebSocket মাধ্যমে কাজ করে।

Apollo Client ইনস্টল করুন:

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

এখন, গ্রাফকিউএল সাবস্ক্রিপশন ক্লায়েন্ট তৈরি করুন:

import { ApolloClient, InMemoryCache, ApolloProvider, gql } from '@apollo/client';
import { WebSocketLink } from '@apollo/client/link/ws';

// Apollo Client setup
const client = new ApolloClient({
  link: new WebSocketLink({
    uri: 'ws://localhost:4000/graphql',
    options: {
      reconnect: true,
    },
  }),
  cache: new InMemoryCache(),
});

const MESSAGE_ADDED_SUBSCRIPTION = gql`
  subscription {
    messageAdded {
      id
      content
      user
    }
  }
`;

// Subscribe to the messageAdded event
const MessageList = () => {
  const { data, loading } = useSubscription(MESSAGE_ADDED_SUBSCRIPTION);

  if (loading) return <p>Loading...</p>;

  return (
    <div>
      {data.messageAdded.map(message => (
        <div key={message.id}>
          <strong>{message.user}</strong>: {message.content}
        </div>
      ))}
    </div>
  );
};

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

এখানে:

• WebSocketLink ব্যবহার করা হয়েছে যা WebSocket এর মাধ্যমে GraphQL Subscription এর সাথে কানেক্ট করে।
• useSubscription হুক ব্যবহার করা হয়েছে গ্রাফকিউএল সাবস্ক্রিপশনের মাধ্যমে রিয়েল-টাইম ডেটা পাওয়ার জন্য।

ধাপ ৩: PubSub ইভেন্ট ট্রান্সমিশন

প্রথমে, ক্লায়েন্ট একটি সাবস্ক্রিপশন (messageAdded) শুরু করে, এবং যখনই সার্ভারে একটি নতুন মেসেজ তৈরি হয় (addMessage মিউটেশন), তখন সেই মেসেজ PubSub এর মাধ্যমে ক্লায়েন্টে পাঠানো হবে। ক্লায়েন্ট যখন messageAdded সাবস্ক্রাইব করে, তখন তা সরাসরি রিয়েল-টাইমে দেখাবে।

এটি Event Driven Architecture কে কার্যকরভাবে বাস্তবায়ন করতে সাহায্য করে, যেখানে একটি ইভেন্ট যেমন নতুন মেসেজ, একজন ইউজারের লগইন, বা কোনো রিয়েল-টাইম ফিড সার্ভার থেকে গ্রাহকদের কাছে জানানো হয়।

ফায়দা ও সুবিধা

1. Real-Time Communication: PubSub এবং GraphQL Subscription ব্যবহার করে আপনি সিস্টেমে রিয়েল-টাইম ডেটা আপডেট করতে পারেন।
2. Scalability: আপনি সহজেই PubSub ব্যবস্থার মাধ্যমে মাইক্রোসার্ভিস আর্কিটেকচার এবং বড় সিস্টেমে ইভেন্ট ড্রিভেন যোগাযোগ ব্যবস্থা তৈরি করতে পারেন।
3. Decoupling: Publish-Subscribe প্যাটার্নের মাধ্যমে ডেটা প্রোভাইডার (publisher) এবং কনজিউমার (subscriber) একে অপর থেকে আলাদা থাকে, যা অ্যাপ্লিকেশনের নমনীয়তা বৃদ্ধি করে।
4. Efficiency: PubSub ইভেন্ট প্যাটার্ন কমিউনিকেশন সিস্টেমের মধ্যে আসন্ন ডেটা ফ্লো উন্নত করে এবং কার্যকারিতা বৃদ্ধি করে, কারণ বার্তা শুধু ইভেন্টে সাবস্ক্রাইব করা ক্লায়েন্টদের কাছে পাঠানো হয়।

সারাংশ

PubSub ব্যবহার করে Event Driven Architecture তৈরি করা GraphQL-এ রিয়েল-টাইম ডেটা আপডেট করার জন্য একটি শক্তিশালী পদ্ধতি। এটি Publishers এবং Subscribers এর মধ্যে একত্রিত যোগাযোগ তৈরি করে, যা WebSocket বা HTTP long polling এর মাধ্যমে রিয়েল-টাইম ডেটা ট্রান্সফার করতে সহায়ক। GraphQL Subscription ব্যবহার করে, PubSub প্যাটার্নের মাধ্যমে ইভেন্টগুলি ক্লায়েন্টে পাঠানো যায়, যা অত্যন্ত দক্ষ এবং স্কেলেবল সিস্টেম তৈরি করতে সাহায্য করে।

গ্রাফকিউএল (GraphQL) ব্যবহার করে একটি Chat Application তৈরি করা একটি চমৎকার প্রজেক্ট যা গ্রাফকিউএলের ক্ষমতা, যেমন subscriptions, কুয়েরি, মিউটেশন এবং real-time updates ব্যবহার করে কার্যকরীভাবে তৈরি করা যায়। এই অ্যাপ্লিকেশনটি ব্যবহারকারীদের বার্তা পাঠানোর, রিসিভ করার এবং গ্রুপ চ্যাট ম্যানেজ করার জন্য রিয়েল-টাইম ডেটা ট্রান্সফার করতে সাহায্য করবে।

এখানে আমরা একটি GraphQL-powered chat application তৈরির জন্য প্রয়োজনীয় ধাপগুলির বিস্তারিত আলোচনা করব।

ধাপ ১: Backend Setup (Apollo Server এবং WebSocket)

প্রথমে, আমাদের একটি Apollo Server সেটআপ করতে হবে যা GraphQL subscriptions পরিচালনা করবে এবং ব্যবহারকারীদের বার্তা পাঠানোর জন্য কুয়েরি এবং মিউটেশন প্রদান করবে। রিয়েল-টাইম বার্তা আদান-প্রদান করার জন্য WebSocket ব্যবহার করা হবে।

Apollo Server Setup

1. প্রয়োজনীয় প্যাকেজ ইন্সটল করুন:

npm install apollo-server graphql subscriptions-transport-ws

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

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

// GraphQL Schema
const typeDefs = gql`
  type User {
    id: ID!
    name: String!
  }

  type Message {
    id: ID!
    content: String!
    sender: User!
    timestamp: String!
  }

  type Query {
    messages: [Message]
  }

  type Mutation {
    sendMessage(content: String!, senderId: ID!): Message
  }

  type Subscription {
    messageReceived: Message
  }
`;

// Resolvers
const resolvers = {
  Query: {
    messages: () => [
      { id: "1", content: "Hello!", sender: { id: "1", name: "John" }, timestamp: new Date().toISOString() }
    ],
  },
  Mutation: {
    sendMessage: (_, { content, senderId }) => {
      const message = {
        id: String(Date.now()),
        content,
        sender: { id: senderId, name: "John" },
        timestamp: new Date().toISOString(),
      };
      // Publish the message to subscribers
      pubsub.publish('MESSAGE_RECEIVED', { messageReceived: message });
      return message;
    },
  },
  Subscription: {
    messageReceived: {
      subscribe: () => pubsub.asyncIterator(['MESSAGE_RECEIVED']),
    },
  },
};

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

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

এখানে:

• PubSub ব্যবহৃত হয়েছে রিয়েল-টাইম বার্তা ট্রান্সমিট করতে।
• sendMessage মিউটেশন ব্যবহারকারীদের বার্তা পাঠানোর জন্য, এবং messageReceived Subscription ব্যবহারকারীদের রিয়েল-টাইমে বার্তা গ্রহন করার জন্য ব্যবহৃত হচ্ছে।

ধাপ ২: Frontend Setup (Apollo Client এবং React)

এখন, আমরা React এবং Apollo Client ব্যবহার করে গ্রাফকিউএল সাবস্ক্রিপশন তৈরি করব। রিয়েল-টাইম বার্তা আদান-প্রদান করার জন্য, আমরা Apollo Client এবং WebSocket ব্যবহার করব।

1. প্রয়োজনীয় প্যাকেজ ইন্সটল করুন:

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

2. Apollo Client Setup:

import React, { useState, useEffect } from 'react';
import { ApolloClient, InMemoryCache, ApolloProvider, gql, useMutation, useSubscription } from '@apollo/client';
import { WebSocketLink } from '@apollo/client/link/ws';

// Set up Apollo Client with WebSocketLink
const link = new WebSocketLink({
  uri: `ws://localhost:4000/subscriptions`,
  options: {
    reconnect: true,
  },
});

const client = new ApolloClient({
  link,
  cache: new InMemoryCache(),
});

// GraphQL Subscription for real-time messages
const MESSAGE_RECEIVED_SUBSCRIPTION = gql`
  subscription {
    messageReceived {
      id
      content
      sender {
        name
      }
      timestamp
    }
  }
`;

// GraphQL Mutation for sending a message
const SEND_MESSAGE_MUTATION = gql`
  mutation sendMessage($content: String!, $senderId: ID!) {
    sendMessage(content: $content, senderId: $senderId) {
      id
      content
      sender {
        name
      }
      timestamp
    }
  }
`;

// Component to handle real-time chat messages
function Chat() {
  const [messages, setMessages] = useState([]);
  const [messageContent, setMessageContent] = useState('');
  const [sendMessage] = useMutation(SEND_MESSAGE_MUTATION);
  const { data, loading } = useSubscription(MESSAGE_RECEIVED_SUBSCRIPTION);

  useEffect(() => {
    if (data) {
      setMessages((prevMessages) => [...prevMessages, data.messageReceived]);
    }
  }, [data]);

  const handleSendMessage = () => {
    sendMessage({ variables: { content: messageContent, senderId: "1" } });
    setMessageContent('');
  };

  if (loading) return <p>Loading...</p>;

  return (
    <div>
      <div>
        <h2>Chat Messages</h2>
        <ul>
          {messages.map((message) => (
            <li key={message.id}>
              <strong>{message.sender.name}:</strong> {message.content} <small>({message.timestamp})</small>
            </li>
          ))}
        </ul>
      </div>
      <div>
        <input
          type="text"
          value={messageContent}
          onChange={(e) => setMessageContent(e.target.value)}
          placeholder="Type a message"
        />
        <button onClick={handleSendMessage}>Send</button>
      </div>
    </div>
  );
}

// Apollo Client provider and rendering the Chat component
function App() {
  return (
    <ApolloProvider client={client}>
      <Chat />
    </ApolloProvider>
  );
}

export default App;

এখানে:

• WebSocketLink ব্যবহার করা হয়েছে GraphQL Subscription এর জন্য, যা রিয়েল-টাইম আপডেট প্রেরণ করবে।
• useSubscription hook ব্যবহার করে সাবস্ক্রাইব করা হচ্ছে এবং নতুন বার্তা এলেই তা রেন্ডার করা হচ্ছে।
• sendMessage মিউটেশন ব্যবহার করে ইউজার বার্তা পাঠাতে পারবেন এবং তা অবিলম্বে অন্য ইউজারদের কাছে পাঠানো হবে।

ধাপ ৩: Run the Application

1. প্রথমে, Apollo Server চালু করুন:

node server.js

2. তারপর, React Application চালু করুন:

npm start

এখন আপনি আপনার ব্রাউজারে অ্যাপ্লিকেশনটি দেখতে পাবেন। একাধিক ব্রাউজারে একই অ্যাপ্লিকেশন চালু করে, আপনি দেখতে পাবেন যে রিয়েল-টাইম বার্তা পাঠানো হচ্ছে এবং তা অবিলম্বে অন্য ব্রাউজারে দেখা যাচ্ছে।

সারাংশ

GraphQL-based chat application তৈরি করতে Apollo Server এবং Apollo Client ব্যবহার করা হয়, যেখানে GraphQL Subscription রিয়েল-টাইম বার্তা আদান-প্রদান করতে সহায়ক। এখানে:

• Apollo Server রিয়েল-টাইম সাবস্ক্রিপশন এবং মিউটেশন পরিচালনা করে।
• Apollo Client ব্যবহারকারীদের জন্য ডেটা সাবস্ক্রাইব এবং মিউটেশন প্রক্রিয়া সহজ করে।

এই পদ্ধতিতে, আপনি real-time communication, message broadcasting, এবং real-time updates সহজে পরিচালনা করতে পারবেন।