这是一篇有关我最近正在从事的黑客项目的文章，我想分享一些有关为什么以及如何构建它的信息。
tl; dr这是GitHub上 的演示和项目 。
协同聆听
这个想法是基本的。 您会转到一个页面，在其中可以提议要听的歌曲，其他人也可以做同样的事情。 回放将为该时刻连接的所有用户同步。
这些页面称为“房间”，通常基于某些类型，以指导用户提出歌曲。 您不希望在“ 80年代经典精选”房间中的最新摇滚专辑中听到“ Despacito”的声音。 队列中接下来要播放的歌曲也可以被选中（有时也可以被选中）。 如果您不想提议新歌，但是在提议的歌曲中看到自己喜欢的歌，那就太好了。
就像我说的那样，这根本不是什么新鲜事，实际上，自2011年底以来，它作为Spotify应用程序已成为Spotify桌面应用程序的一部分：
Apps API是我在2012年加入Spotify时从事的第一个项目。我将审查提交的内容，支持对如何使用它有疑问的开发人员，并创建示例应用程序。
该项目已于2014年底终止，并且已集成了这些功能。 Apps API被移动SDK（iOS和Android）和REST API（我们称为Web API）所取代。 Web API具有用于通过某些作用域获取元数据和管理用户的库的端点。 如果您曾经使用OAuth 2.0使用过其他任何API，则该方法将采用相同的方法。
尽管在这段时间内添加了许多端点，但是仍然无法通过API控制播放。 随着Connect端点的发布，这种情况最近发生了变化。
Spotify Connect
假设您正在手机上播放音乐。 您到家了，想开始在桌面应用程序上播放。 您可以将播放的内容从手机传输到桌面，然后从桌面开始播放。 组合电话↔桌面也可以与扬声器，视频控制台和Web Player一起使用，这使其功能非常强大。 这些功能称为连接。
连接端点允许您列出用户可用的设备，并在它们之间传输播放。 端点集仍处于测试阶段，并且可能会发生变化，但是使用一些技巧很方便。
正在播放
几周前，我发表了一篇文章，谈论了一个小型图书馆，我建立了这个图书馆来获取您在Spotify上播放的内容。 该库非常方便，无需处理授权流程，并且可以很容易地创建如下所示的可视化内容：
使用Spotify帐户登录时，您将进入一个房间， 您可以在其中添加歌曲并让网站控制您的播放 （您应该打开一个Spotify应用程序，例如移动应用程序，桌面应用程序或网络播放器）
如果您考虑一下， 添加歌曲的房间基本上就是聊天室 。 您无需发送常规文本消息，而是发送“添加歌曲”或“删除歌曲”之类的命令，并且服务器确保所有连接的用户都能获取更新并保持同步。
一个用例是仅将演示用作控制器，而不用作扬声器。 想象我们有一位发言人在工作。 我们可能想将歌曲排入队列，但不希望它们从计算机上播放。 这就是“静音/取消静音”按钮的作用。 它将静音或停止将您的播放与房间的播放同步。
另一个功能（或缺少它）是控制器是网站而不是服务器。 只要打开网站，您的播放就会与房间同步 。 可以通过让服务器代表您发出这些请求来更改此设置。 毕竟，它可以在登录时访问您的刷新令牌。但是，很容易忘记您没有从演示中注销，而在某些随机更改您的回放时却感到异常惊讶，所以这就是为什么我不这样做方法。
局限性在于，由于Connect端点上的此限制，该项目仅适用于Spotify Premium帐户。 您仍然可以添加歌曲，但是如果您的帐户是免费帐户，则“播放”命令将不起作用。
机器人
您并不孤单。 名为“机器人”的漫游器始终处于在线状态 ，它会根据用户之前提交的歌曲，在歌曲排空时将歌曲添加到队列中。
数据由Web API通过其“基于种子”的“获取建议”端点提供。 该端点返回基于艺术家，流派和曲目列表的曲目列表，您可以对许多音乐属性设置约束。
因此，您可能希望机器人在星期五放更多充满活力的音乐。 或者让机器人在Rock Room中根据Rock音乐添加推荐。 对于这一类，请查看可用类型种子的列表。 目前有126种类型。 不错！
未来？
该演示是基本的。 设计未打磨，场地仅限于一个房间。 但是，在自定义实例上部署很容易，其主要目标是为希望与Spotify的API集成的其他用户提供服务。 它是开源的，因此您可以将其分叉并随心所欲。
该项目将很容易进行调整以涵盖其他用例。 其中之一将是同步会话 。 假设我听很棒的音乐（不，我不），并且有人想收听并完全听我在听的音乐。 您只需要假设每个发布用户都是一个会议室，聆听用户回放中的更改并将其发布，即可同步已订阅的用户。
书呆子的细节
该项目使用React + Redux进行渲染，后端使用Node，所有这些都使用Next.js完成，这也使服务器端渲染变得容易。 另一个调整是，在生产中将React替换为Preact，以减少有效负载。 整个事情都部署在Heroku实例上。
我想要破解Next.js的原因之一是对其开销有一个更好的了解。 对于此黑客，主页为缩小并gzipped的〜2.8kB索引页加载了捆绑包，缩小并gzip压缩了80.6kB的公共捆绑包。 这不是最简单的选择，但是Next.js的设计可在您向站点添加更多页面时很好地扩展 ，这是因为捆绑包是如何在每页中立即拆分的。 在一个页面上添加大型组件不会影响为另一页面加载的JS。
我在代码库中考虑了一些想法，这就是为什么它不是非常统一的原因，例如，您会看到几种CSS-in-JS的制作方法。
我使用这种技巧来尝试一些新的库和技术，使它们成为我工具的一部分，并可能在某些实际项目中使用它们。 给Spotify的Web API人员一些有关端点的反馈也很好。
关于Next.js，该项目几乎是尝试该库/框架的借口。 是的，我可以选择其他任何项目，但我的想法总是围绕Spotify-stuff吸引。 我想看看它是多么自以为是，SSR如何在他们使用的页面组件模式下工作，以及使用它的感觉如何。
为什么选择Next.js
如果您曾经尝试设置自己的React.JS + ES6 + Webpack + react-intl + whatnot而成功了，那么我就是您的忠实拥护者。 每当我尝试时，我总是最终使用某个样板项目并将所有内容放置在适当的位置。
我喜欢create-react-app。 它使一切变得如此简单，并且您随时可以通过弹出退出向导模式。 没有锁定。
我从远处一直在关注Next.js。 我会读一读，但是却没有时间或精力尝试一下。 我决定是时候将它付诸实践了。
我开始阅读一些内容，然后关注LearnNext.js。 一开始我发现它太基础了，然后跳到了代码，但很快不得不回到教程。 最好不要走捷径。 他们的教程可能看起来很简单，但是有些概念很重要，否则您很快就会遇到问题。
我为Next.js找到的最佳资源是其存储库中的examples文件夹。 是纯金。 关于如何将Next.js与几乎所有内容结合使用的许多简洁示例。 选择“ n”混合。 我想将express + preact + redux + socket.io结合起来，并且在这里有所有示例。
我要说的最困难的部分是当您意识到部分代码正在服务器上运行时。 这很令人惊讶，但这就是SSR的目的。 localStorage和fetch将会失败，并且在使用JS时我们会访问其他仅浏览器属性。
总的来说，我真的很高兴。 您的大多数代码是相同的，您只需要对它们的路由进行一些调整即可。 这就是我最喜欢的。 它为您提供了将所有内容组合在一起的粘合剂，但是您仍然可以使用惯用的工具。
Zeit的项目真的很棒。 简单但非常有用。
如果尚未完成，请查看GitHub上 的演示和项目 。
