个人NodeJS小应用——AirBoard

个人NodeJS小应用——AirBoard

http://www.ctshare.com:8080 学习Web开发一个月的个人作品，基于NodeJS、MongoDB、Socket.IO 一个简单的实时白板应用

欢迎大家吐槽，如果觉得有一定应用价值，可能会重构开发 代码还比较烂，重构后开源，要是觉得没啥用处，就直接放源咯

2012-10-27 能抽出的时间比较少，直接放代码了，欢迎大家吐槽： https://github.com/imeoer/Air-Board-v1


52 回复

个人NodeJS小应用——AirBoard

大家好！今天给大家介绍一个我最近开发的小应用——AirBoard。这是一个基于Node.js、MongoDB以及Socket.IO的简单实时白板应用。

应用简介

AirBoard是一个简单的在线协作工具，允许用户在一个共享画布上进行绘画。它使用WebSocket技术来实现实时通信，使得多个用户可以在同一个画布上同时绘制内容。通过这个应用，你可以与远程的朋友或同事一起工作，非常适合远程协作和教学场景。

技术栈

  • Node.js: 后端服务器框架。
  • MongoDB: 数据库用于存储用户信息和绘制的数据。
  • Socket.IO: 实现客户端和服务器之间的实时双向通信。

示例代码

首先，我们需要安装必要的依赖包：

npm install express socket.io mongodb

接下来，创建一个基本的Express服务器，并配置Socket.IO：

const express = require('express');
const http = require('http');
const socketIo = require('socket.io');
const MongoClient = require('mongodb').MongoClient;

const app = express();
const server = http.createServer(app);
const io = socketIo(server);

// MongoDB 连接
const url = 'mongodb://localhost:27017';
const dbName = 'airboard';

MongoClient.connect(url, { useNewUrlParser: true, useUnifiedTopology: true }, (err, client) => {
  if (err) throw err;
  console.log("Connected successfully to server");
  const db = client.db(dbName);

  // 监听连接事件
  io.on('connection', (socket) => {
    console.log('A user connected');

    socket.on('draw', (data) => {
      // 存储绘制数据到数据库
      db.collection('drawings').insertOne(data, (err, result) => {
        if (err) throw err;
        console.log('Drawing saved');
      });

      // 广播给所有连接的客户端
      socket.broadcast.emit('drawing', data);
    });
  });

  server.listen(8080, () => {
    console.log('Server is running on port 8080');
  });
});

使用说明

  1. 访问 http://www.ctshare.com:8080 来查看应用。
  2. 每个用户都可以在共享画布上绘制内容。
  3. 绘制的内容会实时同步到所有连接的客户端。

未来计划

目前这个应用还处于初级阶段，代码可能不够优雅。如果大家觉得这个应用有实际的应用价值，我会考虑重构并将其开源。如果大家有更好的建议或发现任何问题，欢迎在GitHub上提交issue或PR，我会尽快处理。

结语

希望大家喜欢这个小应用！如果有任何疑问或建议，请随时留言。期待大家的反馈！

项目地址

Air-Board-v1

希望这段内容对你有所帮助！如果你有任何进一步的问题，请随时告诉我。


界面挺好看的，第一眼感觉良好，似乎很专业

非常好

UI设计不错~

看着还不错，期待开源学习…

界面看着很舒服，期待学习一下。

:) 美工控~

如果觉得有些应用价值就完善下再开源，木有的话就直接开源啦 :)

:) 同楼上

有用到express和ejs么?对了白板编辑用的是什么呢?

对了,楼主问个问题,你的程序是托管在自己的机子上还是远程空间上的?现在有哪些空间支持nodejs以及websocket么?收费也行…

用了express，模板用的是jqtpl，白板编辑用的是百度的ueditor

用的是59互联的vps哈，vps上可以自己随意配置咯

请问，弹框用的是什么插件啊？

不错~界面有看头~

挺好的尝试，支持！

界面做得很清爽，楼主开源之后，研究下源码。哈哈

做得不错. 前不久看到国外有一款类似的应用的. 未来可以和其他的办公应用整合.

比如和我们的everydo.com进行整合.

兄弟有兴趣考虑加入我们有爱的团队吗？ 我们在实践 Meteor 框架，同时其中一个子项目也是基于 expressjs 实现的。

弹框是leanModal插件，代码没有压缩 可以自己看看哈 这应用是年初写的，那会刚学Javascript，感觉写得挺烂的 :)

多谢支持啦~~

谢谢 :)

哈，代码量很少，写的也比较烂，得空了重构后开源 :)

嗯，我去好好研究下，重构后尽量能有应用价值.

快大四了，有意向找工作，简历已发 :)

谢谢 :)

Thanks~ :)

问一下网站是部署在哪里的？

59互联的vps

很不错，支持一下！

兄弟 你那个东东注册不了 我在苹果下用的firefox 所以无法测试

对了 你是四川的？ 我们是做移动游戏的 服务端用nodejs 特别是一些realtime的功能用的websocket，你要是有兴趣 咱们好好聊聊

我邮箱哈：imeoer@gmail.com

效果不错，不过为什么我一直无法注册呢~~~

同无法注册~

挂掉了？注册总是提示注册信息有误

看看这个产品：

http://sync.in/

无法注册，代码共享下吧

服务器问题，已修复 :)

服务器问题，已修复 :)

服务器问题，已修复 :)

服务器问题，已修复 :) ，重构后开源~

嗯 服务器问题，已修复 :) 之前体验过很多同步类产品，AB也有相似之处

metro界面…LZ发到WIN8应用商店吧

做得不错。。。。至少界面很好看。哈哈哈。

恩 挺好挺好 楼主大四的作品算是挺牛了

再问一下 楼主的界面有用什么库吗？

没有哈，其实不多的，css写得比较少

界面不的不让人觉得很赞啊

好厉害！ 什么时候开源？

期待开源

已开源 :)

“个人NodeJS小应用——AirBoard” 这个帖子介绍的是一个基于Node.js和MongoDB的简单实时白板应用。用户可以通过Socket.IO实现实时通信，从而共享同一个画布。

示例代码

1. 启动服务器 (server.js)

const express = require('express');
const http = require('http');
const socketIo = require('socket.io');

// 创建 Express 应用
const app = express();
// 创建 HTTP 服务器
const server = http.createServer(app);
// 将 Socket.IO 链接到 HTTP 服务器
const io = socketIo(server);

app.get('/', (req, res) => {
    res.sendFile(__dirname + '/index.html');
});

io.on('connection', (socket) => {
    console.log('New client connected');

    socket.on('new-drawing', (data) => {
        // 广播新的绘画数据给所有连接的客户端
        socket.broadcast.emit('drawing-update', data);
    });

    socket.on('disconnect', () => {
        console.log('Client disconnected');
    });
});

server.listen(8080, () => {
    console.log('Server is running on port 8080');
});

2. 客户端代码 (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AirBoard</title>
    <style>
        canvas { border: 1px solid black; }
    </style>
</head>
<body>
    <canvas id="whiteboard"></canvas>

    <script src="/socket.io/socket.io.js"></script>
    <script>
        const canvas = document.getElementById('whiteboard');
        const ctx = canvas.getContext('2d');
        let drawing = false;

        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        const socket = io();

        function startDrawing(e) {
            drawing = true;
            draw(e);
        }

        function stopDrawing() {
            drawing = false;
            ctx.beginPath();
        }

        function draw(e) {
            if (!drawing) return;
            ctx.lineWidth = 5;
            ctx.lineCap = 'round';
            ctx.strokeStyle = '#000';

            ctx.lineTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
            ctx.stroke();
            ctx.beginPath();
            ctx.moveTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);

            socket.emit('new-drawing', {
                x: e.clientX - canvas.offsetLeft,
                y: e.clientY - canvas.offsetTop
            });
        }

        canvas.addEventListener('mousedown', startDrawing);
        canvas.addEventListener('mouseup', stopDrawing);
        canvas.addEventListener('mousemove', draw);
        canvas.addEventListener('mouseout', stopDrawing);

        socket.on('drawing-update', (data) => {
            ctx.lineTo(data.x, data.y);
            ctx.stroke();
            ctx.beginPath();
            ctx.moveTo(data.x, data.y);
        });
    </script>
</body>
</html>

说明

  • server.js 是一个简单的Node.js服务器，使用Express来处理HTTP请求，并通过Socket.IO实现实时通信。
  • index.html 是客户端页面，它包含一个Canvas元素用于绘制。它监听鼠标事件，并通过Socket.IO发送绘制的数据到服务器，再由服务器广播给其他客户端。
  • 这只是一个基本的示例，实际项目可能需要考虑更多的功能和优化，比如多用户认证、持久化存储等。
回到顶部