携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第6天，点击查看活动详情
这几年，在线编程面试比较吃香，早在17年我就全栈开发了我们内部的面试系统，基于动态表单技术，支持组题，判断，防作弊，单题和试卷，批量上传题库等能力。
最开始的时候题目是这样的，有单选，多选，判断和问答几个类型
答题多数选择单题模式，代码通过md渲染
问答题则是通过代码块支持多语言，JAVA/PHP/JS/C#等
问题
随着对技术深度的要求越来越高，面试中往往需要手写一些fn并且能够实时实现过程，从而更加客观的评测技术人员的能力。
需求：升级现有的答题模式，增加一个在线编程的模式，并且能够自动判断答案是否正确，还可以调取面试者的实现过程，如果能实时查看就更好了。
这部分的需求从技术方案来说，对于后端比较容易实现，直接使用docker沙盒环境运行代码片段返回运行结果即可。
方案
请勿选择所谓的自研，除非你们要靠这项系统实现商业化或者融资。现在的技术很普遍，解决方案也很多。
1，如果想要直接实现，不想开发前端的沙盒环境，可以选择SaaS服务，三方会提供SDK或URL来完成这一步的操作，只是后端需要处理一下身份和回传信息。
- 若选择自研技术方案实现，可以选择云编辑器，自动VScode公开以后，WebIDE不再是技术难题。而前端在线编程的环境一般情况下不需要太多的配置。只需要关注以下几个功能实现：
- 在线实时运行环境-简约编辑器
- 在线控制台输出环境-运行返回
- 面试过程全纪录，输入输出均可回放观看-录制视频
- 调起浏览器设备监听录屏，转为媒体流传输
可以试一试一个开源框架mini-sandbox,一个前端【代码/组件】的可视化方案，融合了【在线编辑 & 实时预览】等特点. 如果想要实现协同，简单实现可以用socket，完美方案用OT。感兴趣的可以体验Demo.
npm i mini-sandbox@latest
复制代码<div id="my-sandbox"></div>
<script src="https://unpkg.com/[email protected]"></script> <script>
new MiniSandbox({
el: '#my-sandbox',
files: {
'index.html': {
defaultValue: `<button onclick="alert('Hello')">按钮</button>`,
}
},
})
</script>
复制代码类似的方案还有很多，可以积Search，然后在评论区分享给作者，大家一起研究一起玩。
总结
对我来说，只需要接一个比较成熟的saas服务即可，因为题库，试卷，答题等系统已开发完，只需要把手写代码题一直到新的URL或者JSSDK中，获得最终答案即可。
没有选择自研的原因是，它并非一个核心业务，想要实现整个流程还是有很多细节要处理的。 目前我认为体验最佳的是腾讯会议的技术面试，从功能到体验都比较Nice。基于WebRTC的媒体流也是灰常的流畅，支持面试者一边写代码，多个面试官一边BB的场景。
闲着没事的朋友可以我，点个赞，评个论，收个藏，关个注。 手绘图，手打字，纯原创，摘自未发布的书籍：《高阶前端指北》，转载请获得本人同意。