উদাহরণ সহ WebSocket Integration

WebSocket হল একটি প্রোটোকল যা ক্লায়েন্ট এবং সার্ভারের মধ্যে দুটি-পথের যোগাযোগ (two-way communication) তৈরি করে, যা HTTP প্রোটোকলের মাধ্যমে সাধারণত সম্ভব নয়। এটি ডেটা দ্রুত এবং অ্যাসিঙ্ক্রোনাসভাবে পাঠাতে ব্যবহৃত হয়। Spring MVC তে WebSocket ইন্টিগ্রেশন ক্লায়েন্ট এবং সার্ভারের মধ্যে রিয়েল-টাইম ডেটা আদান-প্রদান করতে ব্যবহৃত হয়। Spring WebSocket ইন্টিগ্রেশন Spring 4.0 থেকে পাওয়া যায় এবং এটি Spring Framework-এ অন্তর্ভুক্ত।

Spring MVC তে WebSocket ব্যবহারের জন্য Spring WebSocket এবং STOMP (Simple Text Oriented Messaging Protocol) ব্যবহার করা হয়। STOMP ক্লায়েন্ট এবং সার্ভারের মধ্যে মেসেজ আদান-প্রদান করতে ব্যবহৃত হয়।

WebSocket Integration Steps:

1. Spring WebSocket Dependency
2. WebSocket Configuration
3. Controller Setup
4. Client-Side WebSocket Setup
5. Test the WebSocket Communication

Step 1: Add Spring WebSocket Dependency (Maven)

Spring WebSocket এবং STOMP ব্যবহারের জন্য আপনাকে spring-boot-starter-websocket ডিপেন্ডেন্সি ব্যবহার করতে হবে।

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>

Step 2: WebSocket Configuration

Spring MVC তে WebSocket কনফিগার করতে WebSocketConfigurer ইন্টারফেস এবং StompEndpointRegistry ব্যবহার করা হয়।

WebSocketConfig.java (WebSocket Configuration)

import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        // Register the "/chat" endpoint for clients to connect to
        registry.addEndpoint("/chat").withSockJS();
    }

    @Override
    public void configureMessageBroker(MessageBrokerRegistry config) {
        // Enable a simple in-memory message broker
        config.enableSimpleBroker("/topic");  // "/topic" is the destination for subscribers
        config.setApplicationDestinationPrefixes("/app");  // "/app" is the prefix for messages sent from the client
    }
}

• @EnableWebSocketMessageBroker: এই অ্যানোটেশন Spring WebSocket এবং STOMP ব্যবহারের অনুমতি দেয়।
• registerStompEndpoints: এটি ক্লায়েন্টদের জন্য "/chat" URL দিয়ে WebSocket কনেকশন তৈরি করতে সাহায্য করে।
• configureMessageBroker: এটি স্টাম্প ব্রোকার কনফিগার করে, যেখানে /topic সাবস্ক্রাইব করার জন্য ব্যবহৃত হয় এবং /app প্রিফিক্স দিয়ে সার্ভারের কাছে মেসেজ পাঠানো হয়।

Step 3: Controller Setup

কন্ট্রোলারে @MessageMapping এবং @SendTo অ্যানোটেশন ব্যবহার করা হয়। @MessageMapping ক্লায়েন্ট থেকে আসা মেসেজ ম্যানেজ করে এবং @SendTo ক্লায়েন্টে রেসপন্স পাঠানোর জন্য ব্যবহৃত হয়।

ChatController.java (Controller for WebSocket Communication)

import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.simp.SimpMessagingTemplate;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class ChatController {

    private final SimpMessagingTemplate messagingTemplate;

    public ChatController(SimpMessagingTemplate messagingTemplate) {
        this.messagingTemplate = messagingTemplate;
    }

    // Handle incoming messages from client
    @MessageMapping("/send")
    public void sendMessage(ChatMessage message) {
        // Broadcast the message to all subscribers of "/topic/messages"
        messagingTemplate.convertAndSend("/topic/messages", message);
    }
}

• @MessageMapping("/send"): এটি ক্লায়েন্ট থেকে /app/send এ আসা মেসেজ হ্যান্ডল করে।
• SimpMessagingTemplate: এটি WebSocket মেসেজ পাঠানোর জন্য ব্যবহৃত হয়। convertAndSend("/topic/messages", message) মাধ্যমে /topic/messages সাবস্ক্রাইবারদের কাছে মেসেজ পাঠানো হয়।

ChatMessage.java (Model Class for ChatMessage)

public class ChatMessage {

    private String sender;
    private String content;

    // Getters and Setters
}

Step 4: Client-Side WebSocket Setup

ক্লায়েন্ট সাইডে SockJS এবং STOMP.js লাইব্রেরি ব্যবহার করা হয়। এই লাইব্রেরিগুলি WebSocket যোগাযোগ সহজতর করে এবং ক্লায়েন্টকে মেসেজ পাঠাতে এবং গ্রহণ করতে সহায়ক হয়।

index.html (Client-Side WebSocket Communication)

<!DOCTYPE html>
<html>
<head>
    <title>WebSocket Chat</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sockjs-client/1.5.1/sockjs.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.min.js"></script>
    <script>
        var stompClient = null;

        function connect() {
            var socket = new SockJS('/chat');  // Connect to the WebSocket endpoint
            stompClient = Stomp.over(socket);

            stompClient.connect({}, function (frame) {
                console.log('Connected: ' + frame);
                stompClient.subscribe('/topic/messages', function (messageOutput) {
                    showMessage(JSON.parse(messageOutput.body).content);
                });
            });
        }

        function sendMessage() {
            var message = document.getElementById('message').value;
            stompClient.send("/app/send", {}, JSON.stringify({'sender': 'User', 'content': message}));
        }

        function showMessage(message) {
            var messageArea = document.getElementById("messages");
            messageArea.value = messageArea.value + "\n" + message;
        }

        window.onload = connect;
    </script>
</head>
<body>
    <h2>WebSocket Chat</h2>
    <textarea id="messages" rows="10" cols="50" readonly></textarea><br/>
    <input type="text" id="message" placeholder="Enter message" />
    <button onclick="sendMessage()">Send</button>
</body>
</html>

• SockJS এবং STOMP.js লাইব্রেরিগুলি ব্যবহার করে WebSocket কানেকশন তৈরি করা হয়েছে।
• connect(): WebSocket সার্ভারে কানেক্ট করার জন্য কল করা হয়।
• sendMessage(): ক্লায়েন্ট থেকে মেসেজ পাঠানোর জন্য ব্যবহার করা হয়, যা /app/send এ পাঠানো হয়।
• subscribe(): ক্লায়েন্টকে /topic/messages সাবস্ক্রাইব করতে সহায়ক, যাতে সার্ভার থেকে মেসেজ রিসিভ করা যায়।

Step 5: Test the WebSocket Communication

1. অ্যাপ্লিকেশন চালু করুন এবং index.html ফাইলটি ব্রাউজারে ওপেন করুন।
2. একটি মেসেজ টাইপ করুন এবং "Send" বাটনে ক্লিক করুন। এটি WebSocket মাধ্যমে সার্ভারে পাঠানো হবে।
3. সার্ভার থেকে মেসেজ সমস্ত ক্লায়েন্টদের কাছে পৌঁছে যাবে, যারা /topic/messages সাবস্ক্রাইব করেছে।

Conclusion

Spring MVC তে WebSocket ইন্টিগ্রেশন দ্বারা আপনি ক্লায়েন্ট এবং সার্ভারের মধ্যে রিয়েল-টাইম ডেটা আদান-প্রদান করতে পারেন। STOMP এবং SockJS ক্লায়েন্ট সাইডে সহজভাবে WebSocket ব্যবহারের সুবিধা দেয়। এই ইন্টিগ্রেশন রিয়েল-টাইম চ্যাট, নোটিফিকেশন, লাইভ আপডেট ইত্যাদি অ্যাপ্লিকেশন তৈরিতে ব্যবহার করা যেতে পারে। Spring WebSocket-এর মাধ্যমে ডায়নামিক এবং ইন্টারঅ্যাকটিভ ওয়েব অ্যাপ্লিকেশন তৈরি করা সহজ।