使用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中文網其他相關文章！