个人中心
gpt4 book ai didi

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

转载 作者：可可西里 更新时间：2023-11-01 11:21:55 24 4
gpt4 key购买 nike

我正在从事一个大数据项目，该项目不断将实时数据推送到 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/

24 4 0
文章推荐： redis - 无法在 redis-cli 中正确输入
文章推荐： c++ - Windows UAC 设置为始终通知时无法写入注册表
文章推荐： C# 将 key 发送到其他应用程序到特定的文本字段
文章推荐： caching - Redis 或 Hazelcast，或其他？
可可西里
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com