简单的目录列表与node.js和angular.js，注意新的文件
我设法创build了一个简单的angular度应用程序，列出文件夹的文件内容（使用吐出json的节点端点）。 现在我想要做的是以某种方式得到通知如果一个新的文件被添加到文件夹。 我需要在服务器和客户端这一点。
server.js：
var express = require('express'), fs = require('fs'), path = require('path'); var app = express(); function dirTree(filename) { var stats = fs.lstatSync(filename), info = { path: filename, name: path.basename(filename) }; if (stats.isDirectory()) { info.type = "folder"; info.children = fs.readdirSync(filename).map(function(child) { return dirTree(filename + '/' + child); }); } else { info.type = "file"; } return info; } app.set('jsonp callback', true); app.get('/', function(req, res) { res.header('Access-Control-Allow-Origin', '*'); res.header('Charset','utf-8'); res.header('Content-Type', 'application/json'); var jsonp_callback = app.get('jsonp callback name'); var jsonp = (req.query[jsonp_callback]); var result = dirTree('files'); if (jsonp) { res.jsonp(result); } else { res.json(result); } }); app.listen(3001); console.log('Listening on port 3001...'); angular度控制器：
'use strict'; angular.module('myApp').controller('PageCtrl', function($scope, folderUrl, $http) { $http.jsonp(folderUrl).success(function(data, status, headers, config) { console.log(data); $scope.files = data.children; }).error(function(data, status, headers, config) { console.log(data, status, headers, config); }); });
这工作完美无瑕。 但是，如果新文件添加到文件夹中，则需要刷新页面。 是的代码不包括这一点，并且实现也是非常小（使用控制器初始化一次获取请求将不足够）。
那么究竟是如何做到这一点？ 在节点端应该有一个监听器，它会以某种方式发出一个angular度可以捕获的事件（？） 。
- 我如何在node.js中侦听“新文件添加”
- 我如何发出一个事件/节点之间的沟通和angular度（可能是套接字）
所有的观察是欢迎的！
PS：我不想混合serverside和clientside逻辑！ 我需要一个干净的通信解决scheme/最佳实践
PS2：使用Express 4.x
Websockets是要走的路。
- 这个例子使用了socket.io ，所以在开始之前请确保
npm install --save socket.io。 - 原始dirTree和jsonpcallback保持不变
- angular度请求在callback中使用常规的json
server.js：
var http = require('http'), express = require('express'), fs = require('fs'), path = require('path'); var app = express(); var server = http.createServer(app); function dirTree(filename) { ... } app.set('jsonp callback', true); app.get('/', function(req, res) { ... }); app.get('/index.html', function (req, res) { res.sendfile('index.html'); }); var io = require('socket.io').listen(server); io.sockets.on('connection', function(socket) { var watcher = fs.watch('files', function (event, filename) { if (fs.existsSync('files/' + filename)) { socket.emit('change', dirTree('files/' + filename)); } }); socket.on('disconnect', function() { watcher.close(); }); }); server.listen(3001, function() { console.log('Listening on port 3001...'); });
所以我们主要是添加websocket监听器。 它等待连接，然后使用fs.watch方法内置的节点。 当它检测到一个变化时，它使用现有的dirTree方法来构造一个消息，然后发送给客户端。
index.html的：
<!doctype html> <html ng-app="myApp"> <head> <script src="/socket.io/socket.io.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script> <script> angular.module('myApp', []) .controller('PageCtrl', function($scope, $http) { $http.get('/').success(function(data, status, headers, config) { $scope.files = data.children; var socket = io.connect(); socket.on('change', function(msg) { $scope.files.push(msg); $scope.$digest(); }); }).error(function(data, status, headers, config) { console.log(data, status, headers, config); }); }); </script> </head> <body> <div ng-controller="PageCtrl"> <ul><li ng-repeat="f in files">{{f}}</li></ul> </div> </body> </html>
在这里，我们只需要使用socket.io连接到我们在server.js创build的webocket监听器，监听change消息，并将它们推送到已经由最初的json请求填充的现有$scope.files数组中。
这个例子还缺less一些其他消息，你需要处理文件重命名和删除，以及recursion工作的能力。
注意：实际上不要使用节点的fs.watch api来进行除了这样的概念代码certificate之外的其他任何事情。 如果你阅读文档，你会看到它从一个平台到另一个平台的行为不同。 高度build议第三方文件监视模块，如手表 。