在 5 分钟内使用实时事件构建一个简单的无服务器时钟

发布日期:2026-07-12 03:55:05   来源 : 杭州电子商务研究院    作者 :Christian Nwamba    浏览量 :8
Christian Nwamba 杭州电子商务研究院 发布日期:2026-07-12 03:55:05  
8

介绍

每当我们在 Web 开发领域工作时,我们都会尝试尽可能简化我们的解决方案,使其更易于使用且更易于开发。“无服务器”概念和实时存储就是这种简化的典范。这些想法改善了我们的工作方式,减少了样板代码,最重要的是确保开发人员安心。

本文将展示如何使用stdlibdeepstreamHub构建时钟应用程序。时钟将从服务器检索时间信息,然后将其转发到浏览器进行渲染。

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 应用程序的更快方法。时钟示例很基础,但如果您处理的是更复杂的项目,它应该会对您有所帮助。实时数据存储和无服务器理念具有难以想象的力量,您可以利用这些力量使您的应用程序更可靠、更酷。


感谢阅读!

以上内容来自杭州电子商务研究院推送
关注
关于我们
热门推荐
合作伙伴
免责声明:本站部分资讯来源于网络,如有侵权请及时联系客服,我们将尽快处理
Copyright © 2025-2027 ToB产业网址导航 公安备案 浙公网安备33010602013138号 浙ICP备16025413号-9
支持 反馈 关注 数据