GraphQL এর মাধ্যমে Chat Application তৈরি করা

গ্রাফকিউএল (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 সহজে পরিচালনা করতে পারবেন।