【源码】基于vscode插件的CodeSync代码同步系统

项目简介

CodeSync是专门为传统程序开发授课场景设计的vscode插件。传统授课时，投影仪质量问题常使学生看不清教师vscode里的示例代码。此插件借助声网提供的RTM服务实现代码同步，教师在vscode中的代码变化能实时同步到网页端，并且额外开发了弹幕功能，增强了课上师生间的互动交流。

项目的主要特性和功能

1. 实时代码同步：借助声网RTM服务，让vscode中代码的变化实时同步，保证学生和教师看到的代码内容一致。
2. 弹幕功能：提供实时聊天功能，便于师生在课堂上进行交流和讨论。
3. 跨平台支持：支持多种编程语言和操作系统，能适应各种开发场景。
4. 易于集成：插件的安装和配置简单，可快速集成到现有的教学环境中。

安装使用步骤

安装步骤

1. 已下载项目的源码文件。
2. 进入项目目录，执行npm i命令安装必要的依赖。
3. 依据项目的配置文件要求，配置相应参数，比如声网的appid、channel_name以及后端url等。具体配置文件及位置如下：
   • /codesync-web/.env
   • /codesync-plugin/src/view/index.html:51,52 配置agora appid和channel_name
   • /codesync-plugin/src/view/index.html:101 配置前端页面url
   • /codesync-plugin/src/view/lib/yes3.js:16 配置backend url（yesapi的php代理网址）
   • /codesync-plugin/frt/index.html:30,31 配置agora appid和channel_name
   • /codesync-plugin/src/view/lib/yes3.js:16 配置backend url（yesapi的php代理网址）
4. 执行vsce package命令打包插件，然后在vscode中安装该插件；或者进入/src/extension.js按F5选最后一个调试。
5. 执行cd codesync-web & npm i命令安装网页端依赖。
6. 执行npm run-script serve启动网页端。

使用步骤

1. 在vscode中打开需要同步的代码项目。
2. 启动CodeSync插件，确保插件已正确配置并连接到服务器。
3. 教师和学生在浏览器中访问指定的网页地址，即可实时查看和编辑同步的代码。
4. 在课上，师生可以使用弹幕功能进行交流。

示意图

网页主界面： C++的代码同步Demo： Python的代码同步Demo:

CodeSync博文地址（更详细的介绍）

下载地址

点击下载 【提取码: 4003】【解压密码: www.makuang.net】