55 个小时开发出的 Web 版 Clubhouse 是如何进行技术选型

作者：白宦成

语音社群 Clubhouse 近期在全球爆红，LeanCloud 用户 Bestony（白宦成）花了 55 个小时就复刻出了 Clubhouse web 版、NES 风格的「NESHouse」，并且将它开源 。Bestony 表示 NESHouse 作为一个 Hackthon 项目，相比于其他正式运行的项目，可能生命周期更短，也不会走入正式运营的阶段，不过，项目的技术选型和设计上倒是有一些比较有意思的点，值得分享给大家。

Hackthon，要的就是快！

这几天陆续分享内容后，不断有一些开发者留言评论：这个项目使用的都是别人的服务，你的价值是什么？

NESHouse 作为一个 Hackthon 项目，目的是在有限的时间内，从 0 到 1 将需求实现，在这个过程中，开发者需要去仔细评估自己所拥有的资源和要达成的目标，让资源和目标匹配，才能很好的完成自己的开发工作，达成自己本次 Hackthon 的目标。

作为一个 go 后端开发者，在这个项目中，我使用的是 LeanCloud 提供的云服务，而不是使用 gin 自己写一个 http server，似乎不合常理，没有使用自己最熟悉的技术方案。但，如果将资源和需求结合起来看，就会发现这个选择是很正常的。Gin 固然我熟悉，但我不熟悉的是前端，如果我将一部分时间安排在了后端的研发上，必然挤压我在前端开发的时间。

所以在 NEShouse 项目中，我选择了我比较熟悉，且开发时间周期最短的 Serverless 云服务 —— LeanClod 来完成我的后端工作量，这样我可以几乎不用在后端上花费时间和精力来完成工作。而在音频服务上也选择了使用现成的服务，而不是自己实现一套，原因也一致，我的预期是在 72 小时内完成这个项目的研发，而不是自己打造一套完整的实时音频系统。所以我必然会选择更加好用，更加现成的解决方案，来简化我自己的工作。

此外，在这个项目中，有一个比较适合进行工作量评估的事情，便是我在项目中使用到了 LeanCloud 的 LiveQuery 的能力，LiveQuery 提供了实时数据同步的能力，你使用 WebSocket 也可以实现相同的功能，不过，如何能给又好又快，同时在 WebSocket 服务器上完成各种鉴权和扩展能力，是一个麻烦的事情。你可以用这个非常简单的功能，来评估假设你自己来完成所有的功能所需要耗费的时间。这样你就可以理解为什么在这个项目中，我选择 LeanCloud 来完成工作。

浏览器兼容，你是真的坑！

在 NESHouse 的开发中，其实并没有花费太多的时间，倒是中间因为我回老家，花了不少时间在路上。实际上，在整个项目中，最为费心的，是各种浏览器之间的兼容问题。

基于浏览器的 NESHouse 和其他基于系统原生 API 的音频应用相比，一个很大的问题在于浏览器在处理音频设备上的不同。NESHouse 使用的音频接口是基于浏览器封装后一层的 API，而这个 API 处于考虑保护用户的考虑，在某些特定的场景下，会要求你先产生一些操作才能触发音频播放，所以针对不同的浏览器，你需要编写不同的适配代码，这些代码最终就会让你的代码变得又臭又长，大量的冗余代码。

比如说，在微信浏览器中，默认情况下你是无法听到 WebRTC 传递回的音频的，需要用户在页面上进行点击，才能进行播放。

NESHouse 在实现这部分的逻辑时，采用的是判断用户如果是微信浏览器，则会显示一个用户授权页面，让用户主动去点击，来完成音频播放的能力。

Alpine.js, 真香

作为一个后端，对于前端的几大框架，也仅仅局限在可以用，可以写出我想要的功能的应用。但在具体的实现的时候，由于一些原因，我没有使用 Vue/React/Angular 之类的应用，再加上希望在 hackthon 中使用一些新的技术，我便使用了 Alpine.js。

什么是 alpine.js？Alpine.js 是一个在基础的 DOM 上实现了类似 Vue/React 的双向绑定的一个框架，使用 Alpine.js 和 Vue/React 的一个很大的不同点就在于，他可以让你在现有的 HTML 中非常轻松的实现双向绑定，而不需要重写整个代码。

举个例子来说，假设你想要在 Vue/React 中实现双向绑定，你需要将你的代码放在 template 中或者转换为 JSX 来获取相应的双向绑定的能力。但在 Alpine.js 中，你需要做的仅仅是在你需要绑定的地方加入 x-model=xxx 来实现绑定，十分简单。

不仅如此，Alpine 也实现了大部分 Vue/React 之类应用实现的功能，比如 x-for、x-on、x-if 等常用的命令，在实际写逻辑的时候，我大量的应用了这些逻辑来完成我自己的工作，十分方便

在 NESHouse 中，随处可见 Alpine.js 的应用

Alpine.js 可以很轻松让一个不熟悉 Webpack 等前端构建工具的后端工程师，在自己的应用中实现双向绑定。对于后端工程师来说，这个工具你们不可错过。

总结

NESHouse 的技术栈相比于很多复杂的应用来说，十分的简单，仅仅是 Leancloud + RTE 服务就可以完成几乎所有功能，但我相信，这样的技术架构选型，对于一些不需要那么大计算量、没有那么高业务负载的项目而言，是有帮助的。就算你有屠龙技，又何需在杀鸡之时用他呢？

点击文字查看开源项目