在现代Web应用程序中，单页面应用程序（SPA）已经成为越来越流行的选择之一。 Backbone.js是一款流行的JavaScript框架，它提供了一种灵活而简洁的方式来构建SPA。但是，在服务器端处理与模型相关的逻辑时，使用Backbone.js可能会比较棘手。本文将介绍如何将Backbone.js模型与Node.js和WebSocket结合使用，以便在客户端和服务器端之间共享模型。
WebSocket和Node.js
WebSocket是一种实时通信协议，允许在客户端和服务器端之间双向通信。与传统的HTTP请求不同，WebSocket打开一个持久连接，可以在任何时候发送消息。 Node.js是一种非阻塞式I/O平台，它非常适合处理实时应用程序，因为它可以同时处理多个并发连接。
因此，将Backbone.js模型与WebSocket和Node.js结合使用是一种自然的方式，可以极大地简化客户端和服务器端之间的通信，并使客户端和服务器端的代码保持一致。
服务器端设置
首先，我们需要安装所需的软件包：
npm install express express-ws backbone underscore
然后，我们可以设置服务器端文件server.js：
-- -------------------- ---- -------
----- ------- - ------------------
----- --------- - ---------------------
----- -------- - -------------------
----- - - ---------------------
----- --- - ---------
--------------
----- ------ - ---------------- -- -- -
------------------- ------- -- ---- ---------
--
----- ----------- - --
----------- ---- -- -
--------------------
-------------- -- -- -
---------------------- ---
--
--
-------------- -- -
----- ----- - --- ---------------- ---------- ---------- --
----- --------- - --------------
------------------------ -- -
----------------------------------
--
-- -----在此示例中，我们使用了express和express-ws模块来设置WebSocket服务器。我们还创建了一个名为connections的全局数组，用于存储所有连接到服务器的WebSocket客户端。
接下来，我们定义了一个WebSocket路由，并将其附加到应用程序中的根路径。在该路由处理程序中，我们使用push方法将新连接添加到connections数组中，并在连接关闭时使用without方法将其从数组中删除。
最后，我们使用setInterval函数每秒钟创建一个新的Backbone.js模型，并将其JSON序列化后发送到所有WebSocket客户端。
客户端设置
在客户端，我们需要安装所需的软件包：
npm install backbone underscore socket.io-client
然后，我们可以设置客户端文件index.html：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------ --------- ---------------
------- ---------------------------------------------------------------------------------
------- ---------------------------------------------------------------------------------------------
------- ----------------------------------------------------------------------------------------
------- ---------------------------------------
-------
------
---- ---------------
--------------- --------- ------------
------- ---------- ----- --------------------------
------
--------
----- ------ - ---------------------------
-------------------- -- -- -
---------------------------
--
-------------------- ------ -- -
--------------------- ------- -----
------------------------------------
--
---------
-------
-------在此示例中，我们使用了jQuery、Underscore.js和Backbone.js库，以及从服务器端提供的socket.io
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/29779