今年最牛逼的愚人节项目是怎么做出来的

　　

　　

关注我，拉动“认知升级”进度条 10%

　　Reddit，2013 年公布的独立用户数量超过 7.3 亿，是一个孕育了许多流行文化的社区。Reddit 本身由数量庞大的子版块支撑，子版块由用户自己建立，主题无所不包，包括新闻、教育、娱乐、以及各种网络亚文化。

　　这是一个依赖用户自己生产、百花齐放鱼龙混杂的社区，还是不少争议性事件的发源地，比如著名的 AMA（Ask Me Anything）栏目，邀请过霍金和奥巴马来做亲民问答游戏；以及这里是非常多负面新闻的爆料地，如 14 年的美国女星裸照泄露事件，以及索尼影业被黑客攻击的文件，最初都在这里发酵。

　　

　　原始的蓝白论坛网页设计

　　在成立的第十二个年头，Reddit 做了一个极其吸引眼球、社会学实验意义深远的愚！人！节！活动——一个大型多人参与的在线游戏，超过 100 万网民参与。

　　2017 年 4 月 1 日，Reddit 在 /r/place 板块置顶了一块 1000 × 1000 像素的空白画布，让每位注册用户可以从 16 种颜色选择一种，填充在画布的 1 颗像素上。

　　画布最初是这样的▼

　　

　　72 小时后，变成了这样▼

　　

　　外媒说这是一场战争▼

　　

　　是的，这绝对是一场没有硝烟的战争，如果将这张画布上每颗像素的争斗展现出来，是这样的▼

　　

　　活动上线后，不同地区、国籍、民族的网民自发行动占领有限版图的位置，上百万名网民经历了从无序到有序，混乱和破坏，组织和创造之间的演变。

　　从最终的结果看来，《星球大战》的箴言悬挂在醒目位置，中间位置是美国国旗，各国国旗对峙并相互结合，各种经典作品、游戏、动漫亚文化符码是跨越国界的桥梁，这些元素就是 Reddit 用户描绘出来的网络世界。

　　日本动漫强势输出▼

　　

　　“单独的你可以创造一些东西，联合起来你可以创造更多的东西”。

　　

　　Reddit 网友这么总结：

　　这是一个完美的互联网传播和组织构成的例子，诠释了互联网上特性如何使世人通过模仿传播的！

　　正如 Meme 所定义的那样：文化或行为系统的一个元素通过模仿或其他非遗传手段从一个个体传递到另一个个体。具体例如图像、视频、文本等。互联网用户通过复制迅速传播，但是在传播中略有变化。

　　开始可能仅仅是一个模糊的指示，放下一个单一颜色的色块，用户每 5 分钟就可成为一个社区行为的驱动者。这简单的行为催生了对空白画布的控制、侵略、协调、努力、攻击、防御和重建。

　　人们为相互的位置分布而讨论，为完成图案而进行完外交谈判和联盟等——这一直是互联网上最有趣的事情之一。

　　

这个有趣又好玩的活动是怎么做出来的？

　　事后，Reddit 公布了整个活动的技术总结，小豹（微信号：Cheetahmobile）挑了重要的部分翻译出来：

　　Reddit 愚人节项目技术总结

　　我们每年愚人节的传统是发起一次探索人类大规模互动的项目。今年的项目是创造一块协作画板，每个用户每 5 分钟可以填充一个像素点。这种方式降低了个人在复杂创作中的重要性，且使得大规模的协作变为必须。每个像素点都实时展示给观众。

　　这个项目涵盖了前后端研发和移动研发的支持，并且大部分基于Reddit现有技术实现。本文将会从技术角度详述如何实现这一项目的。

定义需求

　　定义愚人节项目需求至关重要，因为没有少量测试的机会，一上线即面向所有Reddit用户。如果上线功能不够完美，很难吸引足够的用户来完成这个项目并做的很有意思。

画布必须为1000*1000才足够大

所有人同时都必须看到同一画面，否则很难协作

至少支持10万人同时协作

用户每五分钟可以涂一个像素，意味着我们要支持每五分钟10万个像素点更新（333次/秒）

即便在访问高峰期也不会影响网站其它功能的正常使用

需要灵活的设置以备意外的瓶颈或者失败。这就要求画板大小和更新速度云端控制以防数据过大或者刷新过快

需要开放 API 和保持透明，如果需要，Reddit 社区才能在上面工作。

后端研发

　　后端的挑战在于要保证所有用户的页面实时一致。解决方案是一旦用户方接收到像素点的变更，会初始化用户页面状态，并立即向服务端请求完整的最新画板。要做到这点，我们需要保证画板完整状态的请求发送速度足够快。

API

接收全画板

填充像素

获取单像素的详情

Websockets

前端研发

　　跨平台无缝体验对前端有很大挑战 – 要跨越桌面端，移动网页端，iOS端和安卓端。相应的 UI 需要满足 3 样条件：

实时显示画板

允许用户和画板互动

在各平台都可以进行操作，包括移动应用端

　　UI 的主要精力放在画板上，Canvas API 非常合适。具体工作如下：

做画板

做初始状态画板

处理 websocket 更新

与画板的互动

画板缩放 – 方便查看效果

相机控制板 – 方便移动和切换位置

对移动应用的支持

经验和教训

1. 永远无法面面俱到，总会遗漏：

2. 由于有个技术问题没有想得深入，在问题出现初期被忽略了，导致后来要不停的手动切换连接超时时间。

3. 机器永远只是机器：