通过无服务器和灯泡众包装饰

很难知道如何装饰空间。 墙壁应该是什么颜色? 哪种家具最适合这些房间尺寸? 悬挂这张让·克劳德·范·达姆抱着小狗的照片的最佳地点在哪里?

通过无服务器和灯泡众包装饰

我不知道任何一个问题的答案-也许是第三个问题(“在床上”),但我确实通过让互联网通过互联网连接设置办公室的颜色来解决我自己的一些装饰难题。 灯泡

用LIFX设定心情

我有一个简单的LIFX迷你彩色灯泡 我要提到的是,由于LIFX的帮助 ,您可以自己购买一个代码IENJOYLAMP,并节省20%。 如果您这样做,我不会从中获利,但这会使LIFX更像我,并且是否确保每个人都喜欢您才是真正的生活?

我用LIFX灯泡进行了数十个项目。 这是我最喜欢的东西之一。 我将一个名为“ www.ienjoylamp.com ”的网站(因为已经使用ilovelamp.com)放在一起,并使用一个UI来设置我的灯的颜色。

通过无服务器和灯泡众包装饰

ienjoylamp.com不仅允许您更改灯泡的颜色,还可以更改灯泡的颜色。 顺便说一下,您现在可以执行此操作。

直播流由Nest提供动力,并且明显延迟。 如果有人对简单的Live Stream'ing设置有一个更好的主意,而该主意不会太慢,那么,请让我知道,因为所有这些都是圣洁的。

因此,我主要是出于强烈的无聊感和过多的盒装红酒而制作的,然后我在推特上发布了……。没人在意。

然后大约一个月左右,我再次发布了推文……

通过无服务器和灯泡众包装饰

杰夫·桑德奎斯特( Jeff Sandquist)提取了该推文并进行了RT处理,整个互联网都降落在我的灯泡上。 这告诉我们,如果您真的想让某人做某事,请以孩子为中心。

通过无服务器和灯泡众包装饰

此后一直持续着。 我不是在开玩笑。 即使我写这篇文章,我的灯泡每隔几秒钟就要换一次,而且一个多月后才改变

每当灯泡变色时,我就知道有人在某个地方这样做,并且在这短暂的时间内,无论这个人在世界上什么地方,我们都有联系。 即使我们从不说任何话,每个颜色的变化就像整天与人的微小互动。

等一下-我刚刚找到了解决内向的方法吗?

通过无服务器和灯泡众包装饰

这个项目的有趣之处在于它正在使用Vue,NodeJS API和Web套接字。 发生的事情比目睹的更多。

Azure Functions在此处提供API终结点,而Azure SignalR提供实时功能。 让我们看一下它是如何工作的。

Azure Functions API

前端调用的主要端点根本不是很复杂。 它具有一种方法“ setColor”。

本质上就是整个API。 它是LIFX自己的API的一个薄包装。 它只是将请求代理到LIFX的服务器,但是将其抽象到我们自己的API中会带来一些好处。

  1. 我可以隐藏我的LIFX令牌,因为它隐藏在我的API后面。
  2. 我可以使用Azure Functions中的CORS设置来控制谁可以调用此API。
  3. 我可以将Azure Functions令牌用于安全性并随意旋转它们。
  4. 我可以使用Azure SignalR绑定实时添加。

使用无服务器实时进行

在我的灯在Twitter上转了一圈后不久,朱Chu铭在我的推特上说:

通过无服务器和灯泡众包装饰

现在,开源的第一条诫命说:“谁请求功能,那么他们也应该提出拉取请求,这是令人愉快的牺牲”。

通过无服务器和灯泡众包装饰

此后不久,提出了上述牺牲并令人高兴……

通过无服务器和灯泡众包装饰

当您在ienjoylamp.com上更改灯的颜色时它将更改站点的背景颜色以进行匹配。 安东尼所做的工作是将网站连接起来,这样无论何时何地任何人更改灯的颜色,背景都会改变。 这意味着我们现在都以某种较小的方式联系在一起。

太激动了。

Anthony通过将我现有的API绑定到Azure SignalR来做到这一点。

Azure SignalR

SignalR最初是Web套接字上的ASP.NET抽象。 它减少了开发人员要做的样板和布线,以及处理了您宁愿不做的事情,例如,如果客户端不支持Web套接字,则退回长时间的轮询。 尽管现在是2019年,但大多数浏览器都支持套接字。

Azure SignalR对此进行了进一步的抽象,并将整个过程转变为您从中发送和接收消息的托管服务。

您可以像其他任何Azure服务一样,从Azure门户对其进行设置。

通过无服务器和灯泡众包装饰
通过无服务器和灯泡众包装饰

然后创建服务,并像Mary Poppins一样坐在云中。

通过无服务器和灯泡众包装饰
最伟大的电影,还是最伟大的电影?

为了从Azure Functions谈起这件事,我们必须为SignalR创建一个绑定。 为此,您必须为Azure Functions安装Azure SignalR绑定。

func extensions install --package Microsoft.Azure.WebJobs.Extensions.SignalRService -Version 1.0.0-preview1-10025

现在,您需要创建的Azure SignalR实例的连接字符串。 可以在门户的Azure SignalR服务的“**”部分中找到。

通过无服务器和灯泡众包装饰

将该连接字符串作为变量添加到local.settings.json文件中。

{
"IsEncrypted": false,
"Values": {
"AzureWebJobsStorage": "",
"FUNCTIONS_WORKER_RUNTIME": "node",
"LIFX_TOKEN": "nunya",
"AzureSignalRConnectionString": "Endpoint= https://nunya.service.signalr.net;AccessKey=nunya;Version=1.0 ;"
}
}

然后在function.json文件中为我们之前创建的SignalR服务添加一个绑定。

绑定到位后,我们可以将消息发送到Azure SignalR集线器。 本文前面的代码段中的这段代码就是这样做的。

“目标”是您希望Azure SignalR集线器调用的方法的名称。 您希望收到有关此事件的通知的任何客户端都需要侦听colorChanged事件,我们将在短短的时间内了解到该事件。

在实际连接客户端之前,我们需要为客户端添加一个连接位置。 按照惯例,SignalR寻找“协商”端点。 稍后,这将更有意义,但是目前,我们需要在API中使用第二个函数“ negotiate”。 该端点所做的全部工作就是返回集线器连接信息以及允许客户端与SignalR服务进行通信的令牌。

这个新函数是HTTP函数,它被称为“协商”。 function.json文件中添加Azure SignalR的绑定。

请注意,安东尼以我的名字命名“枢纽”。 您可以随意命名集线器。 只需确保在所有绑定中使用相同的名称,即可与同一个集线器通信。

现在为代码做好准备……

所有要做的就是返回SignalR集线器的连接信息。

我很抱歉在此没有足够的无聊信息。 您是否希望我对异步/等待的优点赞不绝口? 没有? 您宁愿得到根管? 然后继续。

我们现在准备为所有这些连接前端。

接线灯

该应用程序的前端是使用Vue构建的,因为这是新的热点,而且Vue已经有一个很棒的颜色选择器组件,称为vue-color 它是如此容易使用,使您的牙齿受伤。

通过无服务器和灯泡众包装饰

很漂亮-是吗? 现在,只要有人更改颜色,我就会调用无服务器 API并发送颜色值。 我还同时设置了页面的背景色。

通过无服务器和灯泡众包装饰

现在。 让我们谈谈每当其他人忙于颜色选择器时如何更改页面的颜色。

为此,我们需要收听SignalR集线器进行更改,然后更新页面颜色。 为此,我们需要npm的SignalR软件包。

npm i @aspnet/signalr

现在,我们连接到集线器。 由于我正在使用Vue,因此可以在组件mounted方法中执行此操作。

请记住,只要我们更改服务器上的颜色便会调用此“ colorChanged”回调。 我们的无服务器API在更改灯泡颜色时会自动触发此操作。 因此,我们现在要做的就是调用设置灯泡颜色的端点。

通过无服务器和灯泡众包装饰

那几乎就是整个应用程序了。 在实际应用中,有一些延迟问题需要处理。 例如,当您更改颜色时,您必须等待服务器响应该颜色已更改,并且这不是立即发生的。 我要做的是显示一个微调器,然后每当服务器响应灯泡更新时(而不是以前)更改页面的颜色。 这就是您知道FO SHO灯泡已更改为页面上颜色的方式。

顺便说一句,您是否知道可以使用Spin.js向您的应用程序添加简单的微调器? 现在是2019年,使用npm软件包不能做什么? 上帝保佑互联网。

您可以做的其他事情

SignalR和Azure Functions还可以做很多其他事情。 实时打开了全新的可能性领域。 我有很多与此灯站点有关的其他想法。

在我进行此工作时,请确保您签出这些Azure Functions / SignalR资源以开始使用。

From: https://hackernoon.com/crowd-source-your-decor-with-serverless-and-lightbulbs-cb27b34522e7