推荐一个Nodejs多人在线实时协同编辑项目(基于node, socket.io, ace)

推荐一个Nodejs多人在线实时协同编辑项目(基于node, socket.io, ace)

项目地址

https://github.com/blacktail/real-edit

项目简介

  • 后端基于node+express, socket.io(websocket)等
  • 前端基于backbone + handlebars + bootstrap
  • 使用grunt进行构建

2 回复

推荐一个Nodejs多人在线实时协同编辑项目(基于node, socket.io, ace)

项目地址

https://github.com/blacktail/real-edit

项目简介

real-edit 是一个基于 Node.js 的多人在线实时协同编辑器。该项目利用了 socket.io 实现了实时通信功能，并使用 ace 编辑器来提供丰富的文本编辑体验。以下是一些关键的技术栈和功能介绍：

  • 后端技术

    • Node.js: 作为服务器端的主要编程语言。
    • Express: 用于快速搭建Web应用的框架。
    • Socket.io: 基于 WebSocket 的实时通信库，实现客户端与服务端之间的实时数据传输。

  • 前端技术

    • Backbone.js: 用于构建结构化的前端应用。
    • Handlebars: 模板引擎，用于动态生成HTML页面。
    • Bootstrap: 提供响应式布局和UI组件。
    • Ace Editor: 高性能的代码编辑器，支持语法高亮、自动完成等功能。

  • 构建工具

    • Grunt: 自动化构建工具，用于执行如压缩、合并等任务。

示例代码

后端 (server.js)
const express = require('express');
const http = require('http');
const socketIo = require('socket.io');

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

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

io.on('connection', (socket) => {
    console.log('A user connected: ' + socket.id);

    socket.on('edit', (data) => {
        // 广播编辑事件给所有连接的客户端
        socket.broadcast.emit('edit', data);
    });

    socket.on('disconnect', () => {
        console.log('User disconnected: ' + socket.id);
    });
});

server.listen(3000, () => {
    console.log('Server is running on port 3000');
});
前端 (index.html)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Real-time Collaborative Editor</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="editor"></div>
    <script src="/socket.io/socket.io.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.js"></script>
    <script>
        const socket = io();

        const editor = ace.edit("editor");
        editor.setTheme("ace/theme/monokai");
        editor.session.setMode("ace/mode/javascript");

        editor.on('change', function() {
            const content = editor.getValue();
            socket.emit('edit', { content });
        });

        socket.on('edit', function(data) {
            editor.setValue(data.content);
        });
    </script>
</body>
</html>

通过以上代码示例，可以看到如何利用 Node.js 和 Socket.io 来实现一个简单的实时协同编辑器。前端使用 Ace Editor 提供强大的编辑功能，并通过 Socket.io 实现实时的数据同步。希望这个项目能为你提供一些启发和帮助！


对于一个基于 Node.js、Socket.io 和 Ace Editor 的多人在线实时协同编辑项目，可以参考以下示例。该项目结合了 Node.js 后端、Socket.io 实时通信库以及 Ace Editor 文本编辑器来实现多人协作编辑的功能。

示例项目结构

real-edit/
├── app.js            # 主应用文件
├── package.json      # 依赖管理文件
├── public/           # 静态资源目录
│   ├── index.html    # HTML页面
│   └── editor.js     # 客户端脚本
├── server.js         # Socket.io 服务器逻辑
└── README.md         # 项目说明

示例代码

app.js - Express 应用配置

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

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

app.use(express.static(path.join(__dirname, 'public')));

io.on('connection', (socket) => {
    console.log('A user connected');
    socket.on('edit', (data) => {
        io.emit('edit', data);
    });
    socket.on('disconnect', () => {
        console.log('User disconnected');
    });
});

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

public/index.html - 简单HTML页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Real-Time Collaborative Editor</title>
    <link rel="stylesheet" href="/styles.css">
</head>
<body>
    <div id="editor"></div>
    <script src="/ace-builds/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
    <script src="/editor.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>

public/editor.js - 客户端脚本

document.addEventListener("DOMContentLoaded", function() {
    var socket = io();

    var editor = ace.edit("editor");
    editor.setTheme("ace/theme/monokai");
    editor.session.setMode("ace/mode/javascript");

    socket.on('edit', function(data) {
        editor.session.doc.insert({row: data.row, column: data.column}, data.text);
    });

    editor.on('change', function(e) {
        socket.emit('edit', {
            row: e.range.start.row,
            column: e.range.start.column,
            text: e.translations[0]
        });
    });
});

解释

  1. 后端：app.js 和 server.js 文件中，我们使用 Express 创建了一个简单的 HTTP 服务器，并通过 Socket.io 实现了客户端之间的实时通信。
  2. 前端：index.html 包含了一个 Ace Editor 的实例，用于文本编辑。editor.js 脚本负责初始化 Ace Editor 并处理实时数据同步。
  3. Socket.io：当用户在编辑器中输入文本时，这些变化会被发送到服务器，然后广播给所有连接的客户端。

通过这种方式，多个用户可以在同一文档上实时协作编辑文本。这个简单的示例展示了如何使用 Node.js、Socket.io 和 Ace Editor 来实现这一功能。

回到顶部