Untuk membuat sebuah whiteboard yang bisa dilihat oleh pengguna lain secara real-time menggunakan JavaScript, Anda bisa menggunakan teknologi seperti WebSocket untuk komunikasi real-time antara klien dan server. Berikut adalah langkah-langkah umum untuk mengimplementasikan ini:
1. Persiapan Proyek
Pastikan Anda memiliki environment untuk server-side (misalnya, Node.js) dan client-side (HTML, CSS, JS) development.
2. Instalasi Dependencies
Anda memerlukan beberapa paket untuk membantu Anda, misalnya express untuk server HTTP dan ws untuk WebSocket. Instal paket-paket ini dengan npm:
npm install express ws
3. Membuat Server WebSocket
Buat file server.js dan tuliskan kode berikut:
const express = require('express');
const http = require('http');
const WebSocket = require('ws');
const app = express();
const server = http.createServer(app);
const wss = new WebSocket.Server({ server });
wss.on('connection', ws => {
ws.on('message', message => {
// Broadcast message to all connected clients
wss.clients.forEach(client => {
if (client !== ws && client.readyState === WebSocket.OPEN) {
client.send(message);
}
});
});
ws.send('Welcome to the whiteboard!');
});
server.listen(8080, () => {
console.log('Server is listening on port 8080');
});
4. Membuat Client-side Whiteboard
Buat file index.html dan tambahkan kode berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Whiteboard</title>
<style>
#whiteboard {
border: 1px solid black;
width: 800px;
height: 600px;
}
</style>
</head>
<body>
<canvas id="whiteboard"></canvas>
<script>
const canvas = document.getElementById('whiteboard');
const ctx = canvas.getContext('2d');
let drawing = false;
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;
const ws = new WebSocket('ws://localhost:8080');
ws.onmessage = async (event) => {
let messageData;
if (event.data instanceof Blob) {
messageData = await event.data.text();
} else {
messageData = event.data;
}
try {
const message = JSON.parse(messageData);
if (message.type === 'welcome') {
console.log(message.message);
} else if (message.type === 'draw') {
const { x, y } = message;
ctx.lineTo(x, y);
ctx.stroke();
} else if (message.type === 'start') {
const { x, y } = message;
ctx.beginPath();
ctx.moveTo(x, y);
}
} catch (e) {
console.log(messageData); // Handle non-JSON messages here
}
};
canvas.addEventListener('mousedown', (e) => {
drawing = true;
const x = e.offsetX;
const y = e.offsetY;
ctx.beginPath();
ctx.moveTo(x, y);
ws.send(JSON.stringify({ type: 'start', x, y }));
});
canvas.addEventListener('mousemove', (e) => {
if (!drawing) return;
const x = e.offsetX;
const y = e.offsetY;
ctx.lineTo(x, y);
ctx.stroke();
ws.send(JSON.stringify({ type: 'draw', x, y }));
});
canvas.addEventListener('mouseup', () => {
drawing = false;
});
canvas.addEventListener('mouseleave', () => {
drawing = false;
});
</script>
</body>
</html>
5. Menjalankan Server dan Mengakses Whiteboard
Jalankan server dengan memasukan perintah diterminal seperti berikut:
node server.js
Kemudian buka index.html atau jika menggunakan localhost tinggal memasukkan link
http://localhost/whiteboard/
di browser Anda. Whiteboard ini akan memungkinkan beberapa pengguna untuk menggambar pada kanvas yang sama dan melihat perubahan secara real-time.
