Raspberry Pi Web Server with WebSocket

Below is a complete and easy-to-follow guide on building a Raspberry Pi Web Server with WebSocket using Node.js. This lets you control GPIO pins or read sensor data in real-time through a browser.

🚀 Node.js + Raspberry Pi WebServer with WebSocket

This project will create:

✔ A Node.js backend running on Raspberry Pi
✔ A WebSocket server (using ws)
✔ A webpage that updates instantly without refreshing
✔ Real-time communication with GPIO (LED ON/OFF or sensor reading)

✅ 1. Install Required Packages

Install Node.js on Raspberry Pi

Create project folder

Install dependencies

express → web server
ws → WebSocket server
onoff → GPIO control

✅ 2. Create `server.js`

This program:

Starts an Express server
Hosts an HTML webpage
Creates a WebSocket server
Toggles GPIO (LED on GPIO 17)
Sends messages to the client in real-time

Create the file:

Paste this code:

const express = require('express');
const WebSocket = require('ws');
const { Gpio } = require('onoff');

const app = express();
const port = 3000;

// Serve static files (index.html)
app.use(express.static(__dirname));

// Start HTTP server
const server = app.listen(port, () => {
console.log(`Server running at http://localhost:${port}`);
});

// Create WebSocket server
const wss = new WebSocket.Server({ server });

// GPIO LED at GPIO17 (BCM numbering)
const led = new Gpio(17, 'out');

wss.on('connection', ws => {
console.log("Client Connected.");

ws.on('message', msg => {
console.log("Message:", msg.toString());

if (msg.toString() === "LED_ON") {
led.writeSync(1);
ws.send("LED IS ON");
}
else if (msg.toString() === "LED_OFF") {
led.writeSync(0);
ws.send("LED IS OFF");
}
});

ws.on('close', () => {
console.log("Client Disconnected.");
});
});

// Cleanup on exit
process.on('SIGINT', () => {
led.writeSync(0);
led.unexport();
process.exit();
});

const express = require('express');

const WebSocket = require('ws');

const { Gpio } = require('onoff');

const app = express();

const port = 3000;

// Serve static files (index.html)

app.use(express.static(__dirname));

// Start HTTP server

const server = app.listen(port, () => {

console.log(`Server running at http://localhost:${port}`);

});

// Create WebSocket server

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

// GPIO LED at GPIO17 (BCM numbering)

const led = new Gpio(17, 'out');

wss.on('connection', ws => {

console.log("Client Connected.");

ws.on('message', msg => {

console.log("Message:", msg.toString());

if (msg.toString() === "LED_ON") {

led.writeSync(1);

ws.send("LED IS ON");

}

else if (msg.toString() === "LED_OFF") {

led.writeSync(0);

ws.send("LED IS OFF");

}

});

ws.on('close', () => {

console.log("Client Disconnected.");

});

// Cleanup on exit

process.on('SIGINT', () => {

led.writeSync(0);

led.unexport();

process.exit();

});

Save & exit: CTRL + X → Y → Enter

✅ 3. Create Simple Webpage (`index.html`)

Paste:

<!DOCTYPE html>
<html>
<head>
<title>Raspberry Pi WebSocket Control</title>
<style>
body { font-family: Arial; text-align: center; margin-top: 50px; }
button { padding: 15px 25px; font-size: 18px; margin: 10px; }
</style>
</head>
<body>

<h1>Raspberry Pi WebSocket LED Control</h1>

<button onclick="ledOn()">LED ON</button>
<button onclick="ledOff()">LED OFF</button>

<p id="status"></p>

<script>
const ws = new WebSocket("ws://" + window.location.host);

ws.onmessage = (event) => {
document.getElementById("status").innerText = event.data;
};

function ledOn() {
ws.send("LED_ON");
}
function ledOff() {
ws.send("LED_OFF");
}
</script>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Raspberry Pi WebSocket Control</title>

<style>

body { font-family: Arial; text-align: center; margin-top: 50px; }

button { padding: 15px 25px; font-size: 18px; margin: 10px; }

</style>

</head>

<body>

<h1>Raspberry Pi WebSocket LED Control</h1>

const ws = new WebSocket("ws://" + window.location.host);

ws.onmessage = (event) => {

document.getElementById("status").innerText = event.data;

};

function ledOn() {

ws.send("LED_ON");

}

function ledOff() {

ws.send("LED_OFF");

}

</script>

</body>

</html>

Save & exit.

🔥 4. Start the WebSocket Webserver

Output:

🌐 5. Open in Browser

On any device in your network:

👉 http://<YOUR-RPI-IP>:3000

Example:

You will see:

LED ON button
LED OFF button
Status updates instantly (WebSocket)

💡 6. Wiring the LED

Use GPIO17 (Pin 11) → LED → 330Ω resistor → GND

🚀 Bonus Upgrade Ideas

You can extend this project to:

✅ Real-time sensor dashboard (DHT11 / MQ135 / Ultrasonic)
✅ Live camera feed + WebSocket events
✅ Smart Home dashboard
✅ IoT home automation system
✅ Multiple GPIO controls
✅ Raspberry Pi robot controller

Raspberry Pi Web Server with WebSocket

🚀 Node.js + Raspberry Pi WebServer with WebSocket

✅ 1. Install Required Packages

Install Node.js on Raspberry Pi

Create project folder

Install dependencies

✅ 2. Create `server.js`

✅ 3. Create Simple Webpage (`index.html`)

🔥 4. Start the WebSocket Webserver

🌐 5. Open in Browser

💡 6. Wiring the LED

🚀 Bonus Upgrade Ideas

You may also like...

Node.js Tutorials

Asynchronous

Module Basics

Core Modules

Building Applications

Node.js Advanced

Node.js Database Integration

Node.js Deployment

Node.js Advanced Communication

Node.js and Raspberry Pi

Node.js Perfomance & Scaling

Node.js Testing & Debugging

Raspberry Pi Web Server with WebSocket

🚀 Node.js + Raspberry Pi WebServer with WebSocket

✅ 1. Install Required Packages

Install Node.js on Raspberry Pi

Create project folder

Install dependencies

✅ 2. Create server.js

✅ 3. Create Simple Webpage (index.html)

🔥 4. Start the WebSocket Webserver

🌐 5. Open in Browser

💡 6. Wiring the LED

🚀 Bonus Upgrade Ideas

You may also like...

Node.js and Raspberry Pi

Node.js Raspberry Pi GPIO LED and Pushbutton

Node.js Raspberry Pi RGB LED with WebSocket

Node.js Tutorials

Asynchronous

Module Basics

Core Modules

Building Applications

Node.js Advanced

Node.js Database Integration

Node.js Deployment

Node.js Advanced Communication

Node.js and Raspberry Pi

Node.js Perfomance & Scaling

Node.js Testing & Debugging

✅ 2. Create `server.js`

✅ 3. Create Simple Webpage (`index.html`)