浪潮服务器上小灯泡亮红_通过无服务器和灯泡众包装饰

浪潮服务器上小灯泡亮红

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

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

用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的绑定。

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

现在为代码做好准备……

所有要做的就是返回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资源以开始使用。

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

浪潮服务器上小灯泡亮红

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值