Estimated reading: 4 minutes 25 views

📶 Node.js – WebSocket-Based Controls: Real-Time RGB LED & Raspberry Pi Components

🧲 Introduction – Control Raspberry Pi Hardware Live with WebSocket & Node.js

WebSockets allow real-time, bidirectional communication between the browser and a Node.js server. By integrating WebSockets with GPIO on a Raspberry Pi, you can build interactive IoT projects—like remotely controlling RGB LEDs, buzzers, or relays—directly from a web interface.

🎯 In this guide, you’ll learn:

How to control an RGB LED using WebSockets and Node.js
How to connect a simple UI to your Raspberry Pi hardware
How to expand WebSocket control to other GPIO components

📘 Topics Covered

🔹 Project	📖 Description
🌈 Node.js – RGB LED with WebSocket	Control red, green, and blue LED channels via browser in real-time
🔧 Node.js – Other Raspberry Pi Components	Expand to buzzers, relays, sensors with WebSocket events

🌈 Node.js – RGB LED with WebSocket

🔹 Hardware Required

1 x Common cathode RGB LED
3 x 220Ω resistors
Breadboard + jumper wires
Connect GPIO 17 (Red), 27 (Green), 22 (Blue)

🔹 Project Structure

rgb-led-websocket/
├── server.js
├── public/
│   └── index.html

🔹 server.js – WebSocket + GPIO Logic

const express = require('express');
const http = require('http');
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 app = express();
app.use(express.static('public'));

const server = http.createServer(app);
const wss = new WebSocket.Server({ server });

wss.on('connection', (ws) => {
  ws.on('message', (msg) => {
    const { r, g, b } = JSON.parse(msg);
    red.writeSync(r ? 1 : 0);
    green.writeSync(g ? 1 : 0);
    blue.writeSync(b ? 1 : 0);
  });
});

server.listen(3000, () => {
  console.log('Server started at http://localhost:3000');
});

process.on('SIGINT', () => {
  [red, green, blue].forEach(led => {
    led.writeSync(0);
    led.unexport();
  });
  process.exit();
});

🔹 public/index.html – RGB Control UI

<!DOCTYPE html>
<html>
<head>
  <title>RGB Control</title>
  <style>
    button { margin: 5px; padding: 10px; font-size: 16px; }
  </style>
</head>
<body>
  <h2>Control RGB LED</h2>
  <button onclick="setColor(1,0,0)">Red</button>
  <button onclick="setColor(0,1,0)">Green</button>
  <button onclick="setColor(0,0,1)">Blue</button>
  <button onclick="setColor(1,1,0)">Yellow</button>
  <button onclick="setColor(1,0,1)">Magenta</button>
  <button onclick="setColor(0,1,1)">Cyan</button>
  <button onclick="setColor(0,0,0)">Off</button>

  <script>
    const ws = new WebSocket('ws://' + location.host);
    function setColor(r, g, b) {
      ws.send(JSON.stringify({ r, g, b }));
    }
  </script>
</body>
</html>

🧪 Output:
Browser UI with 7 buttons sends commands to change LED color in real-time.

✅ You can now control the RGB LED from your browser using WebSockets!

🔧 Node.js – Other Raspberry Pi Components

🔹 Buzzer (GPIO 23)

const buzzer = new Gpio(23, 'out');

wss.on('connection', (ws) => {
  ws.on('message', (msg) => {
    const data = JSON.parse(msg);
    if (data.buzz === 1) {
      buzzer.writeSync(1);
      setTimeout(() => buzzer.writeSync(0), 500);
    }
  });
});

HTML button:

<button onclick="ws.send(JSON.stringify({ buzz: 1 }))">Buzz</button>

✅ Adds a sound alert capability triggered from your browser.

🔹 Relay or Motor Switch (GPIO 24)

const relay = new Gpio(24, 'out');

function toggleRelay(state) {
  relay.writeSync(state ? 1 : 0);
}

✅ Can be used to toggle high-power devices like fans or lights (ensure opto-isolated relays).

📌 Summary – Recap & Next Steps

Using WebSockets, you can send live data between a web browser and Node.js to interact with Raspberry Pi hardware in real-time. This opens the door to full IoT dashboards, remote monitoring, and user-triggered hardware responses.

🔍 Key Takeaways:

WebSockets provide fast, two-way communication for interactive GPIO control
RGB LEDs can be controlled with minimal code using JSON over WebSocket
Other devices like buzzers and relays can be integrated with the same pattern

⚙️ Real-World Uses:

Remote-controlled lighting systems
Web-triggered smart home buttons
IoT dashboards with real-time device feedback
Voice assistant hardware interface

❓ Frequently Asked Questions

❓ What is the benefit of using WebSockets over HTTP for GPIO?
✅ WebSockets allow continuous, low-latency, bidirectional communication—ideal for real-time interaction.

❓ Do I need HTTPS to run WebSockets?
✅ For local projects, HTTP is fine. For production, use wss:// with HTTPS.

❓ Can I control multiple devices from one WebSocket?
✅ Yes. Just send more keys in the message object and handle them in your code.

❓ What happens if I close the browser while the LED is on?
✅ It stays on unless you implement cleanup logic on disconnect.

« Previous Next »

Share Now :