41- كورس Node.js بالعربي – RasPi RGB LED WebSocket

شرح RasPi RGB LED WebSocket في Node.js

شرح RasPi RGB LED WebSocket في Node.js

تعتبر Raspberry Pi واحدة من أكثر الأجهزة شيوعًا في عالم الإلكترونيات والبرمجة. باستخدامها، يمكنك القيام بالعديد من المشاريع المثيرة، ومن بين هذه المشاريع هو التحكم في مصابيح RGB LED باستخدام WebSocket في Node.js. [شركة برمجة مصرية] من خلال هذا المقال، سنقوم بشرح كيفية إنشاء تطبيق يمكنك من التحكم في مصابيح RGB من خلال متصفح الويب باستخدام Raspberry Pi وWebSocket وNode.js.

إعداد البيئة للأجهزة والبرمجة

أولاً، تحتاج إلى توصيل مصابيح RGB LED بـ Raspberry Pi. تأكد من أنك لديك مصابيح RGB ذات أطراف مناسبة للتوصيل بالـ GPIO Pins على Raspberry Pi. ستحتاج إلى توصيل الطرف الأحمر والأخضر والأزرق إلى الـ GPIO، مع التأكد من استخدام المقاومات المناسبة لحماية LED من التلف. بعد تجهيز الأجهزة، قم بتثبيت Node.js على Raspberry Pi من خلال استخدام الطرفية، ويمكنك البدء بتنفيذ الخطوات البرمجية.

بناء تطبيق Node.js باستخدام WebSocket

لبدء بناء التطبيق، ستحتاج إلى إنشاء مشروع جديد في Node.js. استخدم الأوامر اللازمة لإنشاء مجلد جديد ومن ثم تشغيل الأمر npm init لإعداد المشروع. بعد ذلك، قم بتثبيت حزمة WebSocket باستخدام الأمر npm install ws. تحتاج أيضًا إلى تثبيت مكتبة للتحكم في الـ GPIO، مثل onoff، والتي يمكنك تثبيتها باستخدام الأمر npm install onoff.

بعد إعداد البيئة، قم بإنشاء ملف جافاسكريبت جديد ولتكن تسميته server.js. داخل هذا الملف، قم بكتابة كود لإنشاء خادم WebSocket. يمكن للخادم استقبال الرسائل من العميل (المتصفح) وتغيير ألوان الـ LED بناءً على تلك الرسائل. إليك مثال بسيط على الكود:

const WebSocket = require('ws');
const Gpio = require('onoff').Gpio;

const red = new Gpio(17, 'out');
const green = new Gpio(27, 'out');
const blue = new Gpio(22, 'out');

const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', ws => {
    ws.on('message', message => {
        const color = JSON.parse(message);
        red.writeSync(color.red);
        green.writeSync(color.green);
        blue.writeSync(color.blue);
    });
});

اختبار التطبيق من المتصفح

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>RGB LED Controller</title>
</head>
<body>
    <input type="range" id="red" min="0" max="1" step="1">
    <input type="range" id="green" min="0" max="1" step="1">
    <input type="range" id="blue" min="0" max="1" step="1">
    <button onclick="sendColor()">Send Color</button>

    <script>
        const ws = new WebSocket('ws://localhost:8080');

        function sendColor() {
            const red = document.getElementById('red').value;
            const green = document.getElementById('green').value;
            const blue = document.getElementById('blue').value;

            ws.send(JSON.stringify({ red: parseInt(red), green: parseInt(green), blue: parseInt(blue) }));
        }
    </script>
</body>
</html>

عند تشغيل هذه الصفحة في المتصفح، يمكنك تحديد الألوان والنقر على الزر لإرسال [شركة برمجة مصرية] البيانات إلى الخادم، والذي سيقوم بدوره بتغيير لون مصابيح الـ RGB LED وفقًا لذلك.