使用backbone.js和socket.io构建网络应用程序-js教程-PHP中文网

使用backbone.js和socket.io构建网络应用程序

钥匙要点

> socket.io是一个JavaScript库，可以通过允许Web客户端和服务器之间的双向通信启用实时Web应用程序。它用于在用户的浏览器和服务器之间创建交互式通信会话。> PubSub模式是一种异步消息范式，可帮助避免耦合，使代码更加灵活，可扩展和可维护。 backbone.js使实施此事件系统直接实现。

> 在提供的示例中，backbone.js和socket.io用于创建图形可视化工具，其中数据实时跨用户同步。该代码的结构是允许轻松自定义和迁移到其他库或数据库。

>在本地运行该示例涉及克隆github存储库，安装依赖项，启动应用程序并前往http：// localhost：5000以查看运行应用程序。

本文由Thomas Greco和Marc Towler进行了同行评审。感谢SitePoint所有的同行评审员制作SitePoint内容的最佳功能！

>你们中的许多人都知道，backbone.js是一个众所周知的MV*框架。它通过为键值绑定和自定义事件提供模型，具有丰富的枚举功能的收集，具有声明性的事件处理的视图，并将其全部连接到您现有的API，并将其全部连接到您现有的API，从而，它托管在GitHub上，并通过为Web应用程序提供结构。一个安息的JSON界面。

>在本文中，我们将使用backbone的内置功能，称为>事件来实现异步消息传递范式以避免耦合。这个想法是将高度依赖彼此的代码组分开。

> 我要显示的示例是一个图形可视化工具，其中数据是精美的交叉用户。 Websocket的使用将使可以在用户的浏览器和服务器之间打开交互式通信会话。的目标是使示例尽可能简单。这里学到的概念将有助于您减少耦合。此外，这是构建可扩展，灵活和可维护的代码的一种非常有用的方法。在我们的实验结束时，我们将取得以下结果：

backbone.js

backbone.js是一个框架，可以通过提供

>模型>，> views ，>控制器> Controllers>， collections>， 自定义事件。它的结构有助于我们将用户界面与业务逻辑分开。在本文中，我将仅在其中一些元素上向您介绍，但如果您想要更深入的指南，我建议您阅读文章“ Backbone.js Basics：模型，视图，收藏和模板”。 🎜>

模型代表数据，可以通过扩展brockbone.model：来创建数据。

a视图是将用户界面组织到逻辑视图中的一种方式，并由模型支持。它不包含HTML标记，而只是将模型数据显示给用户的逻辑。要创建一个视图，您需要扩展骨链。查看如下：

<span>var MyModel = Backbone.<span>Model</span>.extend({
</span>  <span>initialize: function () {
</span>    <span>console.log('model initialized');
</span>  <span>}
</span><span>})</span>

登录后复制

>事件是一个可以混合到任何对象的模块，使对象具有绑定和触发自定义命名事件的能力。

<span>var MyView = Backbone.<span>View</span>.extend({
</span>  <span>el: 'div#my-view-container',
</span>  <span>initialize: function (options) {
</span>    <span>this.model = new MyModel()
</span>    <span>console.log('view initialized')
</span>  <span>}
</span><span>})</span>

登录后复制

模型

和 view都有此模块事件，它使我们能够将事件绑定到> model>或> view 。一个常见的模式是创建对模型变化的视图。该技术通常旨在允许视图在基础数据更改时自动重新呈现自己。。为您提供了这些元素如何一起工作的示例，我已经在Codepen上创建了一个演示。

>请参阅codepen上的sitepoint（@sitepoint）的笔xxpwmq。

>每当我们更改

input >

时，更改我们的型号。击中确定按钮后，视图将呈现新的ID值。> >服务器和客户端之间的实时通信 Websockets是一种高级方法，可以在用户的浏览器和服务器之间打开交互式通信会话。使用此API，用户可以将消息发送到服务器并接收以事件为导向的响应，而无需对服务器进行轮询以进行回复。该合同是描述规则和预期行为的协议，并需要双方的行动。当这两个部分通过API链接时，它是集成服务器和客户端的胶水。> 在桥梁类比中，一旦到位，数据和说明就可以越过桥梁。例如，服务器接收指令，执行操作，然后处理指令后，它将信息返回到Web应用程序。双方之间的奉献。使用此抽象层（API），我们隐藏了Web服务的复杂事物，而无需了解有关服务器如何执行操作的更多详细信息。

> socket.io是用于实时Web应用程序的JavaScript库。它可以在Web客户端和服务器之间进行双向通信。双方具有相同的API，并且像Node.js一样驱动事件驱动。要在浏览器和服务器之间打开此交互式通信会话，我们必须创建HTTP服务器以实现实时通信。它将允许我们发出和接收消息。套接字是处理Web客户端和服务器之间此通信的对象。

下面的代码使用socket.io与Express Framework创建该服务器。

<span>var MyModel = Backbone.<span>Model</span>.extend({
</span>  <span>initialize: function () {
</span>    <span>console.log('model initialized');
</span>  <span>}
</span><span>})</span>

登录后复制

创建该服务器后，我们将拥有IO类，该类允许设置一个将套接字作为参数的回调。使用此套接字对象，我们能够在用户的浏览器和服务器之间创建连接。>

>在浏览器中，客户端链接到呼叫IO函数的服务器，该函数返回连接的套接字：

<span>var MyView = Backbone.<span>View</span>.extend({
</span>  <span>el: 'div#my-view-container',
</span>  <span>initialize: function (options) {
</span>    <span>this.model = new MyModel()
</span>    <span>console.log('view initialized')
</span>  <span>}
</span><span>})</span>

登录后复制

>说，让我们创建一个简单的通信，数据和说明可以越过桥梁。>

<span>var express = require('express'),  
</span>    app     <span>= express(),
</span>    http    <span>= require('http').<span>Server</span>(app),
</span>    io      <span>= require('socket.io')(http);
</span>
http<span>.listen(process.env.PORT || 5000, function(){  
</span>  <span>console.log('listening on *:5000');
</span><span>});</span>

登录后复制

使用此代码，我们能够构建以下演示：>

请参阅codepen上的sitepoint（@sitepoint）的笔mvrymw。

io<span>.on('connection', function(socket) {  
</span>  <span>console.log('a user connected');
</span>  socket<span>.on('disconnect', function(){
</span>    <span>console.log('user disconnected');
</span>  <span>});
</span><span>});</span>

登录后复制

如果您想了解有关socket.io和Express的更多信息，我建议您以下文章：>

均值堆栈的简介

使用Express 4

创建RESTFUL API

构建一个节点.js供电的聊天室网络应用：节点，mongodb和套接字

>使用socket.io
带有socket.io
在本节中，我将向您展示如何使用backbone.js使用socket.io的示例：

请参阅codepen上的sitepoint（@sitepoint）的pen qydxwo。

>带有骨干的pubsub.js

PubSub是一种异步消息范式。它提供了一项功能，可以避免耦合。耦合是当一组代码高度依赖彼此时，这意味着，如果一块代码更改，则需要对使用此代码的所有内容进行更新。

pubsub是一种具有同步解耦的模式。它使用了一个事件系统，例如广播的工作方式：广播电台广播（

<span>var socket = io("http://pubsub-example-with-backbone.herokuapp.com/");</span>

登录后复制

发布

），任何人都可以收听（

> sisscribes ）。此外，您可以在共享广播电台上发布消息，而不是直接与其他对象交谈。该事件系统允许我们定义可以传递包含订户所需值的参数的事件。 Backbone.js使此事件系统实现非常简单。您只需要将骨干束混合到一个空物中，以这种方式：

<span>var MyModel = Backbone.<span>Model</span>.extend({
</span>  <span>initialize: function () {
</span>    <span>console.log('model initialized');
</span>  <span>}
</span><span>})</span>

登录后复制

在这一点上，您可以使用标准触发器和方法发布和订阅消息：

这样做，然后您现在可以从我们的骨干视图中删除socket.io。

<span>var MyView = Backbone.<span>View</span>.extend({
</span>  <span>el: 'div#my-view-container',
</span>  <span>initialize: function (options) {
</span>    <span>this.model = new MyModel()
</span>    <span>console.log('view initialized')
</span>  <span>}
</span><span>})</span>

登录后复制

目标是避免模块之间的依赖关系。每个模块都可以拥有一个频道，例如广播电台发射事件（发布者），其他任何模块都可以收听希望接收通知（订阅者）的事件。

<span>var express = require('express'),  
</span>    app     <span>= express(),
</span>    http    <span>= require('http').<span>Server</span>(app),
</span>    io      <span>= require('socket.io')(http);
</span>
http<span>.listen(process.env.PORT || 5000, function(){  
</span>  <span>console.log('listening on *:5000');
</span><span>});</span>

登录后复制

获得的结果如下：

请参阅codepen上的sitepoint（@sitepoint）的笔GPGNPZ。

图可视化示例

>我们的图形可视化使用客户端上的两个模块：一个用于绘制有向图的图形，另一个用于存储和获取数据。图形图模块使用名为“力编辑器”的工具。我们称该模块在代码中称为ForceView，使我们可以以简单而直观的方式将图的节点放置在二维空间中。我们称为DBAA的存储模块使用socket.io启用Web客户端和服务器之间的实时，双向通信。他们都不知道，

forceview

和

> dbaas

，都知道其他任何一个。他们的行为都是孤立的。 >两个模块均以A> publish/subscribe样式设置，以避免依赖关系。他们以与广播作品相同的方式使用事件系统，并带有广播电台广播（发布）和无线电接收器（订阅）。每个模块没有直接与另一个模块进行交谈，而是在共享的“

无线电站

”上发布他们的消息，在自己的频道上启动事件，而另一个也可以聆听任何其他渠道。 >这里唯一的依赖性是在每个无线电通道上的API很小。重要的是，该通道正在触发哪个消息，并确保系统正确对事件做出反应。如果他们触发事件并给出正确的事物，则系统将整体工作。查看下面的图像，以查看从这些模块中的每个模块中发出哪些事件。> >例如，如果我们想对其进行自定义以适合特定口味，我们可以轻松地拿起任何模块并以我们喜欢的任何方式更改它。我们可以用其他图库替换图形可视化，例如Jqplot，Dracula，Arborjs，Sigmajs，Raphaeljs等。或者，我们可以使用任何实时数据库，例如Firebase，AppBase，Neo4J，TitandB等。好消息是，我们只需要更改一个文件即可迁移到另一个库。下图说明了骨干视图与这两个模块之间的相互作用。

请注意，我们不使用任何数据库。数据存储在内存中。我们分解代码的方式允许我们连接到任何类型的数据库。>

运行我们的图形可视化示例本地

整个代码可在GitHub上找到。您可以克隆存储库或下载代码。

>

然后执行从控制台安装的NPM安装以安装所有依赖项。

接下来，执行Node Server.js启动应用程序。>

<span>var MyModel = Backbone.<span>Model</span>.extend({
</span>  <span>initialize: function () {
</span>    <span>console.log('model initialized');
</span>  <span>}
</span><span>})</span>

登录后复制

>前往http：// localhost：5000带有浏览器以查看运行应用程序。如果您只想查看应用程序中的应用程序，则可以在此处找到一个演示。

结论

完成！我们只是使用骨干的内置功能来实现PubSub模式。此外，我们使用此模式代表和存储图形数据，其中数据在跨用户之间完美同步。如您所见，我们在一个很好的例子中混合了一些有趣的概念，可以看到脱钩的代码一起工作。

>下一步是将其自定义并将数据存储在数据库中，而不是在内存中。但是，我们可能会在即将发布的一篇文章中讨论自定义。

>随时在下面的部分中分享您的评论。

>常见问题（常见问题解答）有关使用backbone.js and socket.io

>构建网络应用程序的问题（常见问题解答）

backbone.js在构建Web应用程序中的作用是什么？具有丰富的枚举功能的API，具有声明性事件处理的视图，并将其全部连接到您现有的API，并通过静止的JSON接口将其连接到现有的API。它有助于组织您的代码并更容易管理。在处理复杂的用户界面和大量数据时，它特别有用。

> socket.io如何增强Web应用程序的功能？

socket.io是一个JavaScript库，可以实现实时，双向和基于事件的浏览器和服务器之间的通信。它由两个部分组成：一个在浏览器中运行的客户端库和Node.js的服务器端库。两个组件都有相同的API。 socket.io在创建实时应用程序（例如聊天应用程序，实时分析，二进制流，即时消息传递和文档协作）中非常有用。

>

>如何处理Backbone.js中的事件？ >

>如何将socket.io与express.js？可以轻松地与express.js集成，express.js是一个流行的网络应用程序框架。您可以创建一个express.js应用程序，然后将socket.io服务器附加到它。然后，您可以使用socket.io来处理客户端和服务器之间的实时通信。 express.js和socket.io的这种组合非常强大，可用于创建复杂的Web应用程序。

>

>我如何使用backbone.js使用RESTFUL API？旨在与Restful API一起使用。您可以使用“获取”方法从服务器检索数据和“保存”方法将数据保存到服务器。您还可以使用“销毁”方法从服务器删除数据。 backbone.js将模型数据发送到服务器时，将您的模型数据自动将其转换为JSON格式，并在从服务器接收时将其转换回模型数据。 >

socket.io支持二进制数据，例如斑点和数组缓冲区。您可以将二进制数据从客户端发送到服务器或从服务器发送到客户端。 socket.io自动照顾编码和解码二进制数据。

>我如何处理Backbone.js？ backbone.js中的错误。处理错误。您可以使用“ ON”方法将错误处理程序绑定到模型，然后使用“触发”方法触发错误事件。错误处理程序将以模型和错误作为参数来调用。

如何处理socket.io？

socket.io中的断开连接。断开客户端时，服务器上会发出“断开连接”事件。重新连接客户端时，客户端会发出“重新连接”事件。您可以使用这些事件来处理应用程序中的断开和重新连接。

>如何扩展backbone.js模型和视图？

backbone.js允许您扩展其模型和视图以创建自己的自定义模型和视图。您可以使用“扩展”方法来创建模型或视图的子类。然后，您可以将自己的方法和属性添加到子类中。

>如何缩放socket.io应用程序？

socket.io支持通过使用多个节点和负载平衡来支持水平缩放。您可以使用“ socket.io-redis”适配器来启用多个socket.io节点之间的通信。您也可以使用“粘性”模块来确保客户端的所有请求始终发送到同一节点。

以上是使用backbone.js和socket.io构建网络应用程序的详细内容。更多信息请关注PHP中文网其他相关文章！