Realtime Collaborative Code Editor

同步代码：实时协作代码编辑器

介绍

您是否厌倦了来回发送代码片段，努力与您的团队进行调试和合作？别再看！同步代码在这里彻底改变您的编码方式。这个功能强大，直观的协作代码编辑器旨在增强开发人员的能力，而团队则无需他们的位置，无需实时工作。使用同步代码，您可以一起编码，调试并更快地一起运送。

特征

• 多个用户可以加入房间并一起编辑代码
• 更改是实时反映的
• 复制按钮将房间ID复制到剪贴板
• 离开按钮离开房间
• 支持不同编程语言的语法突出显示
• 用户可以根据自己的喜好选择主题
• 用户可以离开房间并重新加入以继续编辑
• 用户的加入和离开也会实时反映

先决条件

用于通过Docker运行

• Docker（25.0.4）
• Docker组成（1.29.2）

用于本地运行

• node.js（v20.11.1）
• NPM（10.2.4）
• PM2（5.3.1）：运行npm i -g pm2在全球安装PM2

注意：我使用NVM（V0.39.7）来管理我的节点版本。查看NVM官方文档以安装它。

技术堆栈

• React.js
• node.js
• express.js
• socket.io
• codemirror
• 反应扎根

安装

通过Docker Image运行（强烈推荐）

要运行Docker映像，请按照以下步骤操作：

1. 在您的计算机上安装Docker。
2. 通过运行docker pull mohitur/code-editor从Docker Hub拿起Docker映像
3. 通过运行docker run -p 8000:8000 -p 3000:3000 -p 5000:5000 mohitur/code-editor运行Docker Image
4. 转到http://localhost:3000查看应用程序
5. 通过单击create new room按钮来创建一个房间，然后放置您选择的用户名5。单击复制房间ID按钮Copy ROOM ID ID
6. 要加入另一个用户打开另一个浏览器/浏览器 - 窗口或隐身标签，然后转到http://localhost:3000
7. 输入同一房间ID加入同一房间

现在，您的两个编辑器都将同步，您可以实时看到更改。尝试在多个浏览器/浏览器窗口中打开同一房间，并查看更改。

注意：如果您在WSL2/Linux中使用Docker，则在Docker命令之前添加sudo 。

通过构建自己的Docker映像运行

要使用Docker运行该应用程序，请按照以下步骤操作：

1. 在您的计算机上安装Docker。
2. 克隆项目存储库并导航到项目目录。
3. 另外，您必须更改Dockerfile中的ENV值
4. 在Docker-compose.yml文件中替换您的用户名。
5. 运行Docker Compose命令： docker-compose up -d
6. 转到http://localhost:3000查看应用程序
7. 按照运行码头图像部分从运行中的步骤5-7进行创建和加入一个房间

本地运行

1. 克隆这个存储库并将CD插入其中
2. 运行npm install以安装依赖项
3. 在根文件夹中创建.ENV文件，然后复制示例的内容。
4. 要启动React App客户端运行npm start
5. 启动服务器运行npm server:dev或pm2 start server.js在另一个终端中
6. 转到http://localhost:3000查看应用程序
7. 按照运行码头图像部分从运行中的步骤4-7进行创建和连接一个房间

注意：要停止服务器，请按Ctrl+c或使用“ PM2”，请在终端中使用pm2 stop server.js 。

项目视频

project-walkthrough.mp4

注意：如果找到任何错误，请在此处创建一个问题。我将尝试尽快解决:)
如果您想自己修复它，请随时提出拉动请求。

未来范围

1. 添加了多种语言的语法突出显示
2. 增加了对多个主题的支持
3. 添加了支持保存用户在本地存储中选择的最后一个主题和语言的支持
4. 添加支持以接受或拒绝尝试加入房间的新用户
5. 添加以在编辑器内实现视频和语音聊天功能
6. 添加对本地代码文件上传的支持

开源贡献

如果您想为此项目做出贡献，请按照以下步骤操作：

1. 叉这个存储库
2. 克隆分叉的存储库
   

 git clone https://github.com/your-github_username/Realtime-Collaborative-Code-Editor.git

3. CD进入克隆的存储库
4. 创建一个新分支
   

 git checkout -b your_branch_name

5. 进行更改
6. 提交并推动您的改变
   

 git add . <br>
git commit -m "your commit message" <br>
git push origin your_branch_name

7. 最后，通过访问github上的叉子存储库来创建拉动请求

注意：请确保在贡献时使用自己的分支机构。

关于我

我是科技怪胎Mohd Mohitur Ra​​haman，目前正在Bhubaneswar的Kiit攻读计算机应用程序（最后一年）。我深深地热衷于编码和对科学技术的热爱，我致力于磨练自己的技能并获得开发人员的熟练程度。

与我联系

• LinkedIn
• github