javascript - 使用 Node.JS 和 AngularJS 在 HTML 中显示 Redis 值

标签 javascript html node.js angularjs redis

我正在从事一个大数据项目,该项目不断将实时数据推送到 Redis 数据库。现在,我存储的 key 的计数会随着时间的推移而增加。我想:

  • 在网页更新时显示这些计数
  • 使用 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>

事件类型 Controller .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() 获取值以不断更新

的文本?

最佳答案

您需要设置双向通信系统才能完成此操作。由于您使用的是 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();
    });
}]);

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

关于javascript - 使用 Node.JS 和 AngularJS 在 HTML 中显示 Redis 值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24536645/

相关文章:

javascript - 函数不会返回值

javascript - 在封闭的 react native 应用程序(Android)中处理静默推送通知?

javascript - Html 隐藏按钮隐藏所有按钮而不是一个

javascript - 如何将文件上传文本更改为图像并上传文件并渲染到 div

javascript - 有一种简单的方法可以确保 JavaScript 中 forEach/for 循环的正确顺序吗?

node.js - Nodejs,如何检测关闭的套接字?

javascript - 在 Javascript 中检测 HTML <a> 点击通话支持

css - div 中的图像对齐

node.js - 无法删除定义 Lambda 支持的自定义资源的 CloudFormation 堆栈

javascript - 用于获取 ngTableParams 的通用排序功能不适用于非分组表