v1

Cargo.toml

@@ -0,0 +1,12 @@
+[package]
+name = "weboard"
+version = "0.1.0"
+edition = "2021"
+
+[dependencies]
+tokio = { version = "1.28", features = ["full"] }
+warp = "0.3"
+serde = { version = "1.0", features = ["derive"] }
+serde_json = "1.0"
+futures = "0.3"
+uuid = { version = "1.3", features = ["v4"] }

Dockerfile

@@ -0,0 +1,12 @@
+FROM rust:1.70 as builder
+WORKDIR /usr/src/weboard
+COPY . .
+RUN cargo build --release
+
+FROM debian:bullseye-slim
+RUN apt-get update && apt-get install -y libssl1.1 ca-certificates && rm -rf /var/lib/apt/lists/*
+COPY --from=builder /usr/src/weboard/target/release/weboard /usr/local/bin/weboard
+COPY --from=builder /usr/src/weboard/static /usr/local/bin/static
+WORKDIR /usr/local/bin
+EXPOSE 7860
+CMD ["weboard"]

src/app.rs

@@ -0,0 +1,26 @@
+use serde::{Deserialize, Serialize};
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct Point {
+    pub x: f32,
+    pub y: f32,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct DrawAction {
+    pub color: String,
+    pub size: f32,
+    pub points: Vec<Point>,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub enum ClientMessage {
+    Draw(DrawAction),
+    Clear,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub enum ServerMessage {
+    Update(Vec<DrawAction>),
+    Clear,
+}

src/database.rs

@@ -0,0 +1,59 @@
+use rusqlite::{Connection, Result};
+use crate::whiteboard::DrawAction;
+use std::sync::Mutex;
+
+pub struct Database {
+    conn: Mutex<Connection>,
+}
+
+impl Database {
+    pub fn new(conn: Connection) -> Self {
+        Database { conn: Mutex::new(conn) }
+    }
+
+    pub fn save_action(&self, action: &DrawAction) -> Result<()> {
+        let conn = self.conn.lock().unwrap();
+        conn.execute(
+            "INSERT INTO actions (x, y, color, is_eraser, pen_size) VALUES (?1, ?2, ?3, ?4, ?5)",
+            (action.x, action.y, &action.color, action.is_eraser, action.pen_size),
+        )?;
+        Ok(())
+    }
+
+    pub fn get_current_state(&self) -> Result<Vec<DrawAction>> {
+        let conn = self.conn.lock().unwrap();
+        let mut stmt = conn.prepare("SELECT x, y, color, is_eraser, pen_size FROM actions ORDER BY id")?;
+        let actions = stmt.query_map([], |row| {
+            Ok(DrawAction {
+                x: row.get(0)?,
+                y: row.get(1)?,
+                color: row.get(2)?,
+                is_eraser: row.get(3)?,
+                pen_size: row.get(4)?,
+            })
+        })?;
+        actions.collect()
+    }
+
+    pub fn clear_whiteboard(&self) -> Result<()> {
+        let conn = self.conn.lock().unwrap();
+        conn.execute("DELETE FROM actions", [])?;
+        Ok(())
+    }
+}
+
+pub fn init_db() -> Result<Database> {
+    let conn = Connection::open("whiteboard.db")?;
+    conn.execute(
+        "CREATE TABLE IF NOT EXISTS actions (
+            id INTEGER PRIMARY KEY,
+            x REAL NOT NULL,
+            y REAL NOT NULL,
+            color TEXT NOT NULL,
+            is_eraser BOOLEAN NOT NULL,
+            pen_size REAL NOT NULL
+        )",
+        [],
+    )?;
+    Ok(Database::new(conn))
+}

src/main.rs

@@ -0,0 +1,26 @@
+mod app;
+mod whiteboard;
+mod websocket;
+
+use warp::Filter;
+
+#[tokio::main]
+async fn main() {
+    let whiteboard = whiteboard::Whiteboard::new();
+    let whiteboard = std::sync::Arc::new(tokio::sync::Mutex::new(whiteboard));
+
+    let websocket_route = warp::path("ws")
+        .and(warp::ws())
+        .and(warp::any().map(move || whiteboard.clone()))
+        .and_then(websocket::ws_handler);
+
+    let static_files = warp::fs::dir("static");
+    let index = warp::get().and(warp::path::end()).and(warp::fs::file("static/index.html"));
+
+    let routes = websocket_route
+        .or(static_files)
+        .or(index);
+
+    println!("Server starting on http://0.0.0.0:7860");
+    warp::serve(routes).run(([0, 0, 0, 0], 7860)).await;
+}

src/websocket.rs

@@ -0,0 +1,53 @@
+use crate::app::{ClientMessage, ServerMessage};
+use crate::whiteboard::Whiteboard;
+use futures::{FutureExt, SinkExt, StreamExt};
+use std::sync::Arc;
+use tokio::sync::Mutex;
+use warp::ws::{Message, WebSocket};
+
+pub async fn ws_handler(
+    ws: warp::ws::Ws,
+    whiteboard: Arc<Mutex<Whiteboard>>,
+) -> Result<impl warp::Reply, warp::Rejection> {
+    Ok(ws.on_upgrade(move |socket| client_connection(socket, whiteboard)))
+}
+
+async fn client_connection(ws: WebSocket, whiteboard: Arc<Mutex<Whiteboard>>) {
+    let (mut client_ws_sender, mut client_ws_rcv) = ws.split();
+
+    let mut interval = tokio::time::interval(tokio::time::Duration::from_millis(69));
+
+    loop {
+        tokio::select! {
+            msg = client_ws_rcv.next().fuse() => {
+                match msg {
+                    Some(Ok(msg)) => {
+                        if let Ok(text) = msg.to_str() {
+                            if let Ok(client_msg) = serde_json::from_str::<ClientMessage>(text) {
+                                let mut wb = whiteboard.lock().await;
+                                match client_msg {
+                                    ClientMessage::Draw(action) => {
+                                        wb.add_action(action);
+                                    }
+                                    ClientMessage::Clear => {
+                                        wb.clear();
+                                    }
+                                }
+                            }
+                        }
+                    }
+                    _ => break,
+                }
+            }
+            _ = interval.tick() => {
+                let wb = whiteboard.lock().await;
+                let actions = wb.get_actions();
+                let server_msg = ServerMessage::Update(actions);
+                let msg = serde_json::to_string(&server_msg).unwrap();
+                if let Err(_) = client_ws_sender.send(Message::text(msg)).await {
+                    break;
+                }
+            }
+        }
+    }
+}

src/whiteboard.rs

@@ -0,0 +1,31 @@
+use crate::app::{DrawAction};
+use std::collections::VecDeque;
+
+pub struct Whiteboard {
+    actions: VecDeque<DrawAction>,
+    max_actions: usize,
+}
+
+impl Whiteboard {
+    pub fn new() -> Self {
+        Whiteboard {
+            actions: VecDeque::new(),
+            max_actions: 1000,
+        }
+    }
+
+    pub fn add_action(&mut self, action: DrawAction) {
+        if self.actions.len() >= self.max_actions {
+            self.actions.pop_front();
+        }
+        self.actions.push_back(action);
+    }
+
+    pub fn clear(&mut self) {
+        self.actions.clear();
+    }
+
+    pub fn get_actions(&self) -> Vec<DrawAction> {
+        self.actions.iter().cloned().collect()
+    }
+}

static/index.html

@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Weboard - Collaborative Whiteboard</title>
+        <link rel="stylesheet" href="/style.css" />
+    </head>
+    <body>
+        <canvas id="whiteboard"></canvas>
+        <div id="toolbar">
+            <input type="color" id="color-picker" value="#000000" />
+            <input type="range" id="size-slider" min="1" max="20" value="5" />
+            <button id="clear-btn">Clear</button>
+        </div>
+        <script src="/script.js"></script>
+    </body>
+</html>

static/script.js

@@ -0,0 +1,121 @@
+const canvas = document.getElementById("whiteboard");
+const ctx = canvas.getContext("2d");
+const colorPicker = document.getElementById("color-picker");
+const sizeSlider = document.getElementById("size-slider");
+const clearBtn = document.getElementById("clear-btn");
+
+let isDrawing = false;
+let currentPath = [];
+
+canvas.width = window.innerWidth;
+canvas.height = window.innerHeight - 50;
+
+const ws = new WebSocket(`ws://${window.location.host}/ws`);
+
+ws.onmessage = (event) => {
+  const message = JSON.parse(event.data);
+  if (message.Update) {
+    redrawWhiteboard(message.Update);
+  } else if (message.Clear) {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+  }
+};
+
+function redrawWhiteboard(actions) {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  for (const action of actions) {
+    drawPath(action);
+  }
+}
+
+function drawPath(action) {
+  ctx.beginPath();
+  ctx.strokeStyle = action.color;
+  ctx.lineWidth = action.size;
+  ctx.lineCap = "round";
+  ctx.lineJoin = "round";
+  for (let i = 0; i < action.points.length; i++) {
+    const point = action.points[i];
+    if (i === 0) {
+      ctx.moveTo(point.x, point.y);
+    } else {
+      ctx.lineTo(point.x, point.y);
+    }
+  }
+  ctx.stroke();
+}
+
+canvas.addEventListener("mousedown", startDrawing);
+canvas.addEventListener("mousemove", draw);
+canvas.addEventListener("mouseup", stopDrawing);
+canvas.addEventListener("mouseout", stopDrawing);
+
+function startDrawing(e) {
+  isDrawing = true;
+  currentPath = [];
+  const point = getPoint(e);
+  currentPath.push(point);
+  ctx.beginPath();
+  ctx.moveTo(point.x, point.y);
+}
+
+function draw(e) {
+  if (!isDrawing) return;
+
+  const point = getPoint(e);
+  currentPath.push(point);
+
+  // Clear the canvas and redraw the current path
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  redrawWhiteboard([]); // Redraw all previous actions
+  drawCurrentPath();
+}
+
+function drawCurrentPath() {
+  ctx.beginPath();
+  ctx.strokeStyle = colorPicker.value;
+  ctx.lineWidth = sizeSlider.value;
+  ctx.lineCap = "round";
+  ctx.lineJoin = "round";
+  for (let i = 0; i < currentPath.length; i++) {
+    const point = currentPath[i];
+    if (i === 0) {
+      ctx.moveTo(point.x, point.y);
+    } else {
+      ctx.lineTo(point.x, point.y);
+    }
+  }
+  ctx.stroke();
+}
+
+function stopDrawing() {
+  if (!isDrawing) return;
+  isDrawing = false;
+
+  const action = {
+    color: colorPicker.value,
+    size: parseFloat(sizeSlider.value),
+    points: currentPath,
+  };
+
+  ws.send(JSON.stringify({ Draw: action }));
+  currentPath = [];
+}
+
+function getPoint(e) {
+  const rect = canvas.getBoundingClientRect();
+  return {
+    x: e.clientX - rect.left,
+    y: e.clientY - rect.top,
+  };
+}
+
+clearBtn.addEventListener("click", () => {
+  ws.send(JSON.stringify({ Clear: null }));
+});
+
+window.addEventListener("resize", () => {
+  canvas.width = window.innerWidth;
+  canvas.height = window.innerHeight - 50;
+  redrawWhiteboard([]);
+});

static/style.css

@@ -0,0 +1,23 @@
+body {
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+}
+
+#whiteboard {
+    flex-grow: 1;
+}
+
+#toolbar {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 10px;
+    background-color: #f0f0f0;
+}
+
+#toolbar > * {
+    margin: 0 10px;
+}