【问题标题】：Display Redis values in HTML using Node.JS and AngularJS使用 Node.JS 和 AngularJS 在 HTML 中显示 Redis 值
【发布时间】：2014-08-23 13:41:37
【问题描述】：

我正在从事一个大数据项目，该项目不断将实时数据推送到 Redis 数据库。现在，我存储的密钥数量随着时间的推移而增加。我想：

在通过网页更新时显示这些计数
使用 node.js 从 Redis 查询值
使用 AngularJS 查询 node.js 以显示值。

我可以在终端中运行以下 node.js 应用程序以打印出键值

NodeApp.js

var redis = require("redis"),
client = redis.createClient();

client.on("error", function (err) {
    console.log("Error " + err);
});

client.on('connect', runSample);

function runSample() {

    var myTimer = setInterval(function() {

        console.log('=============================');
        console.log('            Totals           ');
        console.log('=============================');

        client.get('launch', function (err, reply) {
            if(reply) {
                console.log('launch: ' + reply.toString());
            }
        });
        client.get('resume', function (err, reply) {
            if(reply) {
                console.log('resume: ' + reply.toString());
            }
        });
    }, 500);
}

index.html

<!DOCTYPE html>
<html lang="en" ng-app="APP">
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.min.js"></script>
        <script src="EventTypeController.js" type="text/javascript"></script>
        <link rel="stylesheet" href="theme.css">
        <title>Redis Data</title>
    </head>
    <div id="main" ng-controller="EventTypeController" ng-init="init()">

        <h1>Event Types</h1>
        <div class="centerwrapper">

            <div class="box">

                <p class="eventCount">{{launch}}</p>
                <p class="eventName">Launch</p>
            </div>
            <div class="box">

                <p class="eventCount">{{resume}}</p>
                <p class="eventName">Resume</p>
            </div>
    </div>
</html>

EventTypeController.js

angular.module('APP', [])
  .controller('EventTypeController', ['$scope', function($scope) {

    $scope.launch = 0;
    $scope.resume = 0;

    $scope.init = function() {
        // run nodeapp.js file
        // set $scope.launch to redis key value
        // repeat for $scope.resume
        // continue to read over time interval
    };
}]);

如何从 HTML 文件中的 reply.toString() 中获取值以不断更新

的文本？

【问题讨论】：

听起来像是 Redis pub/sub 与 socket.io 结合的工作。

标签： javascript html node.js angularjs redis

【解决方案1】：

Angular 运行在客户端，node 运行在服务器上，所以你需要一种方式在两者之间进行通信。假设您的阅读和写作水平相当低，您可以坚持使用$http service 或其变体。这还需要在服务器端使用HTTP server 将值写入响应，而不仅仅是使用console.log。如果您期望高频率的读取和写入，您最好使用web sockets。

【讨论】：

【解决方案2】：

您需要设置双向通信系统来完成此操作。由于您使用的是 NodeJS，因此您可以安装您选择的 HTTP 服务器以在服务器端提供您的内容。在客户端，您可以使用 Angular 的 $http 服务进行查询，并使用它们的 $interval 函数进行重复调用。正如 Explosion Pills 所说，如果您期望高频率的读/写，最好转向 websockets。

这是一个使用express 的非常基本的服务器端示例：

var redis = require('redis');
var express = require('express');
var app = express();

// Add your redis setup here
var client = redis.createClient();

app.get('/query', function(req, res){
    // Query your redis dataset here
    client.get('data', function(err, reply) {
       // Handle errors if they occur
       if(err) res.status(500).end();
       // You could send a string
       res.send(reply.toString());
       // or json
       // res.json({ data: reply.toString() });
    });
});

app.listen(3000);

由于您使用的是 AngularJS，因此您可以使用$http 服务以使用$interval 以设定的时间间隔按需提取数据。

下面是 Angular 的 $interval 示例的基本示例：

angular.module('app', []).controller('YourController', ['$scope', '$http', '$interval', function($scope, $http, $interval) {

    $scope.value = '';
    var query;

    $scope.init = function() {
        // Check if we already have an active interval in the scope
        if(angular.isDefined(query)) 
            return;

        // Setup query interval
        query = $interval(function() {
            // Call the endpoint where you will retrieve data from
            $http.get('/query')
            .success(function(data) {
                // Handle data, you could 
                // update one or both values
                $scope.value = data;
            })
            .error(function(err) {
                // Handle errors
            });
        }, 100); // Execute every 100 milliseconds
    };

    $scope.cancel = function() { 
        if(angular.isDefined(query)) {
            $interval.cancel(query);
            query = undefined;
        }
    });

    $scope.$on('$destroy', function() {
        // Make sure that the interval is destroyed too
        $scope.cancel();
    });
}]);

无论如何，这只是为了让您了解解决问题的一种方法。祝你好运。

【讨论】：

我最终以与您建议的方式类似的方式使用 socket.io 进行实施。谢谢！