云服务器价格_云数据库_云主机【优惠】最新活动-搜集站云资讯

华为云_阿里云服务器被攻击_新注册优惠

小七 141 0

快车用Pusher开发实时协同编辑了解如何开发一个实时web应用程序,使多个用户能够轻松地处理同一个文档。

DR:在本文中,您将学习如何构建一个实时的协作注释编辑器应用程序,该应用程序允许多个用户同时处理同一个文档。若要创建此应用程序,您将使用以下工具节点.js、Express、Pusher和Auth0。如果需要,您可以在这个GitHub存储库中找到最终应用程序的代码。"使用正确的工具,构建实时、协作的应用程序很容易。"在推特上留言你要建造什么?正如您可以从文章的标题猜到的,您将构建一个实时的web编辑器,使不同的用户能够协作地处理来自不同地方的同一文档。也就是说,您和一个或多个朋友(例如)可以同时键入和编辑同一个文档。就像你在编辑一个googledocs单词,但你自己构建的。有多酷啊?无论如何,要构建此web应用程序,您将使用以下工具:节点.js:一个基于Chrome V8处理器的运行时引擎,允许您在计算机和服务器上使用JavaScript编程语言(即,外部web浏览器)。Express:一个快速且极简的web框架节点.js.Pusher:一个托管服务,帮助你用更少的代码构建实时应用程序。Auth0:web、移动和遗留应用程序的通用身份验证和授权平台。你要为这些服务和工具付钱吗?不,你不会的。节点.jsExpress是开源项目,您可以免费使用它来构建您想要构建的任何东西。Pusher和Auth0确实有付费层,你可以使用高级功能来构建更好的应用程序,但它们也包括一些很酷的免费层。你将能够使用这些服务在短时间内构建出令人惊叹的应用程序,而不用花很长时间一分钱。但你的应用程序很难流行,对吗?先决条件要继续阅读本文,您需要了解JavaScript和相关技术(如HTML和CSS)的一些基本知识。另外,您需要在您的机器中安装节点.js还有NPM。如果您没有,您可以转到的官方下载页面节点.js然后按照那里的说明操作。NPM捆绑到节点.js.安装后节点.js和NPM,打开一个终端并发出以下命令,以确保一切都已设置好:节点-v#输出类似于v9.11.1净现值-v#输出类似于5.6.0什么是推进器?Pusher是一种托管服务,它使得向web或移动应用程序添加实时功能变得非常容易。这项服务提供了帮助无缝构建聊天应用程序、实时图表、协作编辑器等的库。您可以在他们的网站上找到有关Pusher及其功能的更多信息。在本文中,您将使用Pusher提供的名为TextSync的特性来构建应用程序。基本上,TextSync提供了允许用户与其他人实时处理文档的功能。除此之外,它还将处理授权和您在构建应用程序时看到的其他一些事情。搭建你的项目首先,您必须为您的应用程序创建一个目录。因此,在终端上,移动到要保存工作的目录并运行以下命令:#为项目创建目录mkdir协作实时编辑器#进去吧cd协同实时编辑器你要构建的应用程序不会很复杂。因此,此应用程序的目录结构也相当简单:+资产- 应用程序js- 主.css+观点- 编辑.pug- 索引哈巴狗- 布局.pug+ 包.json+ 服务器.js+ 变量.envassets目录将包含所有样式表(CSS规则)和前端JavaScript代码。views目录将包含所有前端视图(HTML代码)。这个服务器.js文件将包含运行应用程序的服务器端代码。这个变量.env文件将保存一些全局环境变量(一些密钥,您将需要运行您的应用程序)。而.pug文件就是你的HTML文件。接下来,您将看到这些文件如何适合您的应用程序。注意:如果您不知道为什么要使用.pug文件,请不要担心。Pug是一个模板引擎节点.js这有助于编写HTML文件。如你所见,使用哈巴狗真的很简单。接下来,可以使用NPM将目录初始化为节点.js运行项目:#从项目目录npm初始-y正在安装依赖项正确启动目录后,您必须安装必要的软件包,以帮助您构建应用程序的某些部分。为此,请在终端中运行以下命令:npm安装正文分析器dotenv express session passport passport-auth0 pug textsync服务器节点以下是一些软件包将帮助您实现的功能:您将使用passport和passport-auth0包来实现auth0的用户身份验证。您将使用textsync服务器节点来处理Pusher textsync授权。您将使用dotenv从变量.env归档到节点.js的进程.env对象。您将使用pug作为服务器端模板。别担心,如果现在所有这些都没有意义。当你读完这篇文章时,你将学会如何使用它们。设置Pusher TextSync帐户如前所述,您将使用Pusher的一个名为TextSync的特性来支持应用程序的实时特性。因此,你需要一个推送帐户来继续构建你的应用程序。所以,去TextSync的网页注册一个新帐户。注册后,您可以转到新Pusher帐户的TextSync部分,然后单击Create按钮。点击这个按钮将使Pusher显示一个对话框,在那里它将询问您新TextSync实例的名称。在这个对话框中,您可以输入类似"Collaborative Real Time Editor"的内容,然后点击Create按钮。Pusher将用不到一秒钟的时间为您创建新实例,然后将您重定向到一个页面,其中将显示有关如何使用此实例的说明。虽然这些说明很有用,但现在,您对它们不感兴趣。您感兴趣的是此页中名为"凭据"的框。此框将有两个密钥,您将很快使用:实例定位器和密钥。所以,在返回代码之前,找到这个框并保持页面打开。用哈巴狗设置视图下一步,你将用你的服务器端创建模板。哈巴狗提供了很多功能你不会在本文中探讨的。所以,如果您需要更多关于这些特性的信息,可以在这里找到它们。有鉴于此,您首先要做的就是在项目根目录中创建views目录,并创建一个名为布局.pug在里面。然后,在该文件中插入以下代码:doctype htmlhtml(lang="en")头meta(字符集="UTF-8")meta(name="viewport"content="width=设备宽度,初始比例=1.0")meta(http equiv="X-UA-Compatible"content="ie=edge")链接(rel="stylesheet"href="/主.css")标题实时编辑器主体.main块内容这就是哈巴狗档案的样子。如果这还不够清楚,这里有一个更好的解释帕格如何处理这个文件。Pug使您能够以一种不太冗长的语法来组织文档,从而有助于编写HTML文件。在这种情况下,帕格将:将doctype html转换为element;将html(lang="en")转换为;将head转换为,因为它在html下面缩进,所以它将添加到中;转换head的每个子元素(即meta、link和title)并添加到其中;和改造主体.main插入并插入。好吧,你明白了吧?总之,为了更好地说明这一点,下面是上面文件的输出:在很容易,不是吗?但是等等!区块内容呢。好吧,这也很简单,这是一个占位符的真实内容。这个占位符被Pug称为模板继承。用他们自己的话说:Pug支持模板继承。模板继承通过块工作并扩展关键字。在模板中,块仅仅是子模板可以替换的Pug的"块"。-帕格的模板继承创建你的哈巴狗视图现在已经有了Pug模板,您将创建Pug视图和一个文件来设置它们的样式。对于初学者,您可以创建一个文件,该文件包含将用于创建新文档和编辑会话的表单。所以,创建一个名为索引哈巴狗在views目录中添加以下代码:扩展布局块内容登录导航button.login_button=用户名.displayName表单(action="/note"method="POST")输入(type="text"name="title"placeholder="新注释的标题")输入(type="hidden"name="slug")按钮(class="create_note")创建脚本。变量段塞=数学随机()toString(36),切片(2);document.querySelector('input[name="slug"]').value=slug注意:你看到这个文件中的扩展布局行了吗?这告诉帕格这个视图正在使用(或扩展)布局.pug以前创建的模板。另外,这个文件中的block-content告诉Pug这个元素的子元素将进入模板的block-content元素中。在索引哈巴狗文件中包含一个名为slug的变量,该变量包含一个随机的字母数字字符串。当这个视图创建的表单被提交时,slug被发送到服务器端。然后,在您的服务器中,您将使用它创建一个唯一的链接(URL),其他用户在加入正在进行的会话时将引用该链接