HydroOJ 从入门到入土（21）部署独立 IDE

前段时间看到某个群里有人发了个很好看很简洁的 IDE，想起一直想在 OJ 里部署一个 IDE，所以学生一直想要一个能不影响他们代码的地方。于是就下定决心部署一下。

OJ 稳定之后，好久没动过了，上一次还是加了个屏幕共享的功能，但那个不涉及后端修改。这次加 IDE 是我第一次涉及这个项目的后端编写，遇到的问题还挺多的，开始想着只要解决一下通信问题，一天应该能搞定，结果第一天研究了半天官方通信 api文档，后来问了群里才知道这个 api 是错的。。第二天发现这个 api 不是完全错的。。第 3 天才能正常使用，后边修改 ui、调整部署细节啥，第 5 天才完成部署。

大概过程记录如下：

项目引入

IDE 4 zzh: https://github.com/Fromnowon/IDE/tree/monaco

简单干净，而且没有自动补全，非常适合给学生用。

修改项目通信

看了一下项目结构，发现是 vue 的结构，以前没写过前端，不知道是啥，不过现在有ai，发现主要是要改 src/components/Main.vue，进去发现代码写得还挺清楚的。

主要修改内容：

L380: export default 里边的 server

L854: 去除所有 Base64 的转码

L861: 这里一开始我看文档以为都是通过 websocket 进行通信和任务发送的，就把 axios 全注释了，研究了一天，发现还是 post 的。

首先是这里：

/hydro/packages/ui-default/components/scratchpad/ScratchpadToolbarContainer.jsx

发现 L51 有个 postPretest 方法，于是把 L861 这里改成了这个接口。

然后后台确实收到任务信息了，但是死活收不到返回状态，后来回网站开调试发现返回走的是 websocket。。

加了个 websocket 的逻辑获取返回信息，然后再解析回 IDE 需要的格式，代码部分就基本收工了。

由于端口不一样，修改了一下 caddy 的跨域设置，看来之后还是得改成插件，不然不好解决跨域认证问题。

测试基本 ok。

修改前端

把 vue 里前边的模版稍微改了一点点，把语言的选择拉到了外边，结果高度不太合适，很违和，就改了一下最下方的 css。

其实还应该在 nav 最左侧加上 logo 和链接的，不过部署完了才想起来，懒得改了。

处理认证问题

不用插件的话，需要处理跨域、cookies 传递等问题，很麻烦，所以做成了插件，这样就只需要考虑内部通信问题了

制作插件

写个入口，注册个路由就好，不过后边发现 ide 需要鉴权，所以又新增了一个路由，返回用户信息。

准备部署

把插件编译好，扔到 templates 里边，然后提示缺文件，发现缺了 2 个关键的 appxxx.js 文件，没想太多，手动扔进去了。结果后边每次编译完都提示缺文件，才发现应该是要把 static 文件夹放 public 里边，懒得折腾了。。

部署到测试服务器上，能跑，ok

又修改了一些七七八八的细节，准备上线。

正式部署

正式部署之前，需要修改一下域名路径啥的，然后想先在测试服务器上测试一下，结果 websocket 一直挂的，搞了半天，死活想不通，后来发现是 chromium 挂了。。重启 ok。

部署完毕，暂时没发现其他问题。

项目地址：

https://github.com/15921483570/hydro-ide