在 5 分钟内使用实时事件构建一个简单的无服务器时钟
介绍
每当我们在 Web 开发领域工作时，我们都会尝试尽可能简化我们的解决方案，使其更易于使用且更易于开发。“无服务器”概念和实时存储就是这种简化的典范。这些想法改善了我们的工作方式，减少了样板代码，最重要的是确保开发人员安心。
本文将展示如何使用stdlib和deepstreamHub构建时钟应用程序。时钟将从服务器检索时间信息，然后将其转发到浏览器进行渲染。
stdlib 和“无服务器”特性
stdlib是“无服务器”概念的实现。正如人们常犯的错误，“无服务器”并不意味着“没有服务器”，它只是意味着我们不必处理服务器细节和操作即可提高效率。采用“无服务器”路线，开发人员可以编写部署并产生 API 端点的函数。您可以在其维基百科页面上阅读有关无服务器技术的更多信息
设置 stdlib
现在是时候使用我们最喜欢的工具设置一切了——如果你猜的是npm*（Node 包管理器），那你猜对了。不过在此之前，你需要创建一个 stdlib帐户，将你链接到你将需要的功能/服务。
创建帐户后，使用 npm 安装 CLI（命令行界面）工具以与您的帐户交互。CLI 工具简化了创建、运行和部署功能：
npm install lib.cli -g
您需要创建一个工作区。工作区是一个目录，其中存放了在给定用户下注册的一组函数。创建工作区就像创建目录一样简单：
mkdir your-workspace-name
在您的工作区中，通过使用您在注册时创建的凭据进行身份验证来初始化 stdlib：
lib init
现在，你的机器已经映射到你的账户了。然后你可以创建一个新的服务/功能，并希望与你的 stdlib 服务器同步：
lib create clock
这将创建一个名为clock的目录，其中包含一个包含函数的主文件夹。index.js文件包含一个样板函数，您可以运行它来查看stdlib如何工作的示例：
lib http
上述命令将默认在localhost:8170本地提供你的功能。
deepstream 用于实时 PubSub
stdlib 能够将您的函数转换为API 端点。尽管此功能对于用户和开发人员来说在组织上都很方便，但“端点必须是静态的”。这意味着如果您需要发送一些实时数据，stdlib 的 API 端点就会出现问题。然而，使用deepstream，实时数据传输从未如此简单。我们将使用 deepstream 的 PubSub 功能从我们的 stdlib 函数发出实时事件。
您需要创建一个免费的 deepstreamHub帐户，该帐户会生成一个 API 密钥来与服务器交互。
首先，让我们将 deepstream 客户端安装到我们的时钟功能上：
npm install --save deepstream.io-client-js
将 deepstream 导入到main/index.js：
const ds = require("deepstream.io-client-js");
使用 deepstreamHub URL 创建一个 deepstream 实例，并以匿名身份登录以开始与服务器通信：
const ds = require("deepstream.io-client-js");
module.exports = (params, callback) => {
const client = ds("<APP-URL>").login();
callback(null, "hello world");
};
您可以通过客户端变量所表示的对象开始发出事件。我们正在构建一个时钟，因此，以间隔方式发出事件的最佳方式是使用setInterval方法：
const ds = require("deepstream.io-client-js");
const moment = require("moment");
module.exports = (params, callback) => {
const client = ds("<APP-URL>").login();
setInterval(() => {
client.event.emit("time", moment().format("MMMM Do YYYY, h:mm:ss a"));
}, 1000);
callback(null, "hello world");
};
我们还导入了moment来帮助我们格式化时间。示例格式如下所示：
May 1st 2017, 7:26:39 AM
通过客户端订阅
目前，在/clock路由中，我们的逻辑通过 web socket 发出实时数据。只要我们有deepstream 的连接 URL ，我们就可以从任何地方使用这些实时数据。
我们可以通过从 CDN（内容分发网络）导入 deepstream、登录并将发出的事件记录到控制台来实现这一点：
<html>
<body>
<script src="https://code.deepstreamhub.com/js/2.x/deepstream.min.js"></script>
<script>
var client = deepstream('APP-URL')
client.login()
client.event.subscribe('time', time => {
console.debug(time)
})
</script>
</body>
</html>
我们不是发射事件，而是订阅时间事件，并在事件发射时记录有效负载：
我们可以在浏览器中显示时间，而不是将其打印到控制台：
var client = deepstream("APP-URL");
client.login();
var timeP = document.getElementById("time");
client.event.subscribe("time", time => {
timeP.innerHTML = time;
});
结论
希望您已经学会了一种构建实时（和静态）Web 应用程序的更快方法。时钟示例很基础，但如果您处理的是更复杂的项目，它应该会对您有所帮助。实时数据存储和无服务器理念具有难以想象的力量，您可以利用这些力量使您的应用程序更可靠、更酷。
感谢阅读！
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~