سبرينغ بوت ويب سوكيت: بناء واجهات برمجة التطبيقات في الوقت الحقيقي

هل تساءلت يومًا كيف تعمل الاتصالات في الوقت الحقيقي في التطبيقات؟ تعرف، تلك الإشعارات الفورية، والمحادثات المباشرة، والتحديثات في الوقت الحقيقي؟ حسنًا، كل ذلك بفضل WebSockets. وعند دمجه مع Spring Boot، لديك أداة قوية لإنشاء تطبيقات ويب تفاعلية. اليوم، سنغوص عميقًا في عالم Spring Boot WebSocket. بحلول نهاية هذه التدوينة، سوف يكون لديك فهم راسخ لكيفية تنفيذ واستخدام WebSockets في تطبيقات Spring Boot الخاصة بك. سنتحدث أيضًا عن دمجه مع أدوات مثل Apidog لتبسيط إدارة واجهة برمجة التطبيقات (API) الخاصة بك.

💡

أطلق العنان للإمكانات الكاملة لتطوير واجهة برمجة التطبيقات الخاصة بك مع Apidog! سواء كنت بحاجة إلى توثيق، أو محاكاة، أو اختبار، أو مراقبة واجهات برمجة التطبيقات الخاصة بك، فإن Apidog قد غطت احتياجاتك. قم بتنزيل Apidog مجانًا اليوم واجعل عملية إدارة واجهة برمجة التطبيقات لديك أكثر سلاسة، مما يضمن تشغيل تطبيقاتك بسلاسة وكفاءة.

button

ما هو WebSocket؟

WebSocket هو بروتوكول اتصال يوفر قنوات اتصال مزدوجة على اتصال TCP واحد. على عكس طلبات HTTP التقليدية، التي تعمل بنصف نقل، يسمح WebSocket بوجود اتصال ثابت بين العميل والخادم. وهذا يعني أنه يمكن لكليهما إرسال واستقبال الرسائل بشكل مستقل، مما يجعله مثاليًا للتطبيقات في الوقت الحقيقي.

لماذا نستخدم Spring Boot مع WebSocket؟

يبسط Spring Boot عملية تطوير التطبيقات المستقلة من Spring التي تعتمد على الجودة الإنتاجية. يقلل من كمية الكود المكرر ويوفر دعمًا جاهزًا لـ WebSockets. يجمع استخدام Spring Boot مع WebSocket المطورين لإنشاء تطبيقات في الوقت الحقيقي قابلة للتوسع، وقابلة للصيانة، وفعالة مع 최소 إعداد.

البدء مع Spring Boot WebSocket

لننتقل مباشرة إلى إعداد تطبيق Spring Boot مع دعم WebSocket. سنبدأ من الصفر ونبني تطبيق دردشة بسيط.

الخطوة 1: إعداد مشروع Spring Boot الخاص بك

أولاً، قم بإنشاء مشروع Spring Boot جديد. يمكنك استخدام Spring Initializr لهذا. اختر الاعتماديات التالية:

Spring Web
WebSocket

قم بإنشاء المشروع وفك ضغط الملف الذي قمت بتنزيله. افتحه في IDE المفضل لديك.

الخطوة 2: تكوين WebSocket في Spring Boot

الآن، نحتاج إلى تكوين WebSocket في تطبيق Spring Boot الخاص بنا. أنشئ فئة تكوين جديدة:

import org.springframework.context.annotation.Configuration;
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) {
        registry.addEndpoint("/chat").withSockJS();
    }

    @Override
    public void configureMessageBroker(MessageBrokerRegistry config) {
        config.enableSimpleBroker("/topic");
        config.setApplicationDestinationPrefixes("/app");
    }
}

في هذا التكوين، قمنا بتمكين وساطة رسائل WebSocket وحددنا نقطة النهاية /chat التي سيستخدمها العميل للاتصال. تتيح الطريقة withSockJS() خيارات تنازل SockJS لمتصفحات التي لا تدعم WebSocket.

الخطوة 3: إنشاء نموذج رسالة

بعد ذلك، نحتاج إلى نموذج لتمثيل رسائل الدردشة الخاصة بنا. أنشئ POJO بسيط:

public class ChatMessage {
    private String content;
    private String sender;

    // Getters and setters
}

الخطوة 4: إنشاء وحدة تحكم الرسالة

نحتاج إلى وحدة تحكم للتعامل مع رسائل WebSocket الواردة. أنشئ فئة وحدة تحكم جديدة:

import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.stereotype.Controller;

@Controller
public class ChatController {

    @MessageMapping("/sendMessage")
    @SendTo("/topic/messages")
    public ChatMessage sendMessage(ChatMessage chatMessage) {
        return chatMessage;
    }
}

في هذه الوحدة، نقوم بربط الرسائل الواردة المرسلة إلى /app/sendMessage وبثها إلى جميع المشتركين في /topic/messages.

الخطوة 5: إنشاء الواجهة الأمامية لاختبار WebSocket

لاختبار إعداد WebSocket الخاص بنا، دعونا ننشئ صفحة HTML بسيطة. ضع هذا الملف في دليل src/main/resources/static وسمه index.html:

<!DOCTYPE html>
<html>
<head>
    <title>دردشة Spring Boot WebSocket</title>
    <script src="https://cdn.jsdelivr.net/npm/sockjs-client@1.5.0/dist/sockjs.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/stompjs@2.3.3/lib/stomp.min.js"></script>
</head>
<body>
    <h1>دردشة Spring Boot WebSocket</h1>
    <div>
        <input type="text" id="sender" placeholder="اسمك">
        <input type="text" id="message" placeholder="رسالة">
        <button onclick="sendMessage()">إرسال</button>
    </div>
    <div id="messages"></div>

    <script>
        var stompClient = null;

        function connect() {
            var socket = new SockJS('/chat');
            stompClient = Stomp.over(socket);
            stompClient.connect({}, function (frame) {
                console.log('متصل: ' + frame);
                stompClient.subscribe('/topic/messages', function (chatMessage) {
                    showMessage(JSON.parse(chatMessage.body));
                });
            });
        }

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

        function showMessage(message) {
            var messages = document.getElementById('messages');
            var messageElement = document.createElement('div');
            messageElement.appendChild(document.createTextNode(message.sender + ": " + message.content));
            messages.appendChild(messageElement);
        }

        window.onload = connect;
    </script>
</body>
</html>

تتضمن هذه الصفحة HTML البسيطة نموذجًا لإدخال الرسائل و div لعرضها. تستخدم SockJS و STOMP للتعامل مع اتصالات WebSocket.

الخطوة 6: تشغيل التطبيق

قم بتشغيل تطبيق Spring Boot الخاص بك وافتح http://localhost:8080 في متصفحك. افتح نفس عنوان URL في عدة علامات تبويب لرؤية دردشة الوقت الحقيقي قيد العمل.

تصحيح أخطاء Springboot WebSockets مع Apidog

Apidog هو أداة رائعة لتوثيق واجهات برمجة التطبيقات واختبارها. يبسط عملية توثيق واختبار واجهات برمجة التطبيقات WebSocket الخاصة بك في Spring Boot. يوفر واجهة مستخدم سهلة الاستخدام لإنشاء اتصالات WebSocket، وإرسال واستقبال الرسائل، وتوثيق واجهات برمجة التطبيقات.

button

إليك كيفية استخدام Apidog لتصحيح عميل WebSocket:

فتح Apidog: أولاً، ابدأ تطبيق Apidog وانقر على زر "+" على الجانب الأيسر، وستفتح قائمة منسدلة جديدة. من هناك اختر "واجهة برمجة التطبيقات WebSocket جديدة":

2. إنشاء اتصال: ابدأ بإدخال عنوان واجهة برمجة تطبيقات WebSocket في شريط عنوان Apidog. يمكنك بعد ذلك النقر على زر "اتصال" لبدء عملية المصافحة وإنشاء الاتصال. يتيح لك Apidog تخصيص عوامل مثل المعلمات، والرؤوس، وملفات تعريف الارتباط أثناء المصافحة.

3. إرسال واستقبال الرسائل: بمجرد إنشاء الاتصال، يمكنك إرسال الرسائل تحت علامة "الرسالة". يمكنك كتابة نص، أو JSON، أو XML، أو HTML، وغيرها من رسائل النص، وكذلك رسائل بصيغة ثنائية باستخدام Base64 أو Hexadecimal. تعرض واجهة Apidog الجديدة حالة الاتصال، والرسائل المرسلة، والرسائل المستلمة بالترتيب الزمني. عند نقرك على رسالة، يمكنك بسهولة عرض تفاصيلها.

4. توثيق واجهة برمجة التطبيقات: يرث Apidog وظيفته القوية في توثيق واجهات برمجة التطبيقات لو واجهات WebSocket، مما يسمح لك بتوثيق تفاعلات WebSocket بشكل فعال.

تذكر التحقق من مشكلات WebSocket الشائعة مثل مشكلات الاتصال، وأخطاء تنسيق الرسائل، واهتمامات الأمان خلال عملية تصحيح الأخطاء الخاصة بك.

الخاتمة

في هذه التدوينة، استكشفنا كيفية إعداد تطبيق دردشة في الوقت الحقيقي باستخدام Spring Boot WebSocket. بدأنا بتكوين WebSocket في مشروع Spring Boot، أنشأنا تطبيق دردشة بسيط، ودمجناه مع Apidog لتحسين إدارة واجهة برمجة التطبيقات. مع WebSockets و Spring Boot، يمكنك بناء تطبيقات فعالة وفي الوقت الحقيقي تقدم تجربة مستخدم سلسة. من خلال الاستفادة من أدوات مثل Apidog، يمكنك تحسين سير عمل تطويرك، مما يضمن توثيق وت اختبار ومراقبة واجهات برمجة التطبيقات الخاصة بك بشكل جيد.

الاتصالات في الوقت الحقيقي هي تغيير لقواعد اللعبة لتطبيقات الويب الحديثة. سواء كان للدردشة الحية، أو الإشعارات، أو أدوات التعاون، فإن إتقان WebSocket مع Spring Boot يفتح آفاقًا جديدة من الإمكانيات.