Question

socket.io/angular/node新手，我正在尝试创建一个显示许可证数量的页面。基本上我的服务器上有一个cron，它每小时运行一次并更新文件。我希望我的应用程序初始化，读取文件，并将结果绘制在条形图中。我还希望它在每次文件更改时重新读取文件。我一直在玩弄一些东西，所以这就是我到目前为止所做的：

服务器文件

const path = require('path');
const express = require('express');
const webpack = require('webpack');
const webpackMiddleware = require('webpack-dev-middleware');
const webpackHotMiddleware = require('webpack-hot-middleware');
const config = require('./config/webpack.prod.js');

const port = process.env.PORT || 8080;

const app = express();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.use(express.static(__dirname + '/dist'));
app.get('*', function response(req, res) {
  res.sendFile(path.join(__dirname, 'dist/index.html'));
});

io.on('connection', function(socket){
  console.log('==> ' + socket.handshake.address + ' User Connected');
});

io.on('disconnect', function (socket) {
  console.log('<== ' + socket.handshake.address + ' User Disconnected');
  socket.removeAllListeners('send message');
  socket.removeAllListeners('disconnect');
  io.removeAllListeners('connection');
});

const fs = require('fs');
fs.watch(__dirname + "/public/agent_count/agent_count_apm", function(event,     filename) {
  console.log("Event:", event);

  if (event == "change") {
    fs.readFile(__dirname + "/public/agent_count/agent_count_apm","UTF-8",     function(err, data) {
      readFile(false);
    });
  }

});

http.listen(port, '0.0.0.0', function onStart(err) {
  if (err) {
    console.log(err);
  }
  console.info('==> Listening on port %s. Open up http://0.0.0.0:%s/ in your     browser.', port, port);

  readFile(true);
});

function readFile(init) {
  fs.readFile(__dirname + "/public/agent_count/agent_count_apm","UTF-8",     function(err, data) {
      if (err) throw err;
      io.emit("agent_count_apm", data );
      console.log("agent_count_apm %s", init? "initialized" : "reread");
    });
}

内容文件

[{
  "DEV": 7,
  "TEST: 50,
  "PROD": 100
}]

我尝试了一些简单的事情

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title><%= webpackConfig.metadata.title %></title>

  <meta name="description" content="<%= webpackConfig.metadata.description     %>">

  <% if (webpackConfig.htmlElements.headTags) { %>
  <!-- Configured Head Tags  -->
  <%= webpackConfig.htmlElements.headTags %>
  <% } %>

  <script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
  <script>
    var socket = io();

    socket.on('agent_count_apm', function(msg){
      console.log(msg);
      document.getElementById("agent_count_apm").value = msg;
    });
  </script>

  <!-- base url -->
  <base href="<%= webpackConfig.metadata.baseUrl %>">
</head>

<body>
<app>
</app>

<input id="agent_count_apm" value="" />

</body>
</html>

但是看起来“输入”只有在我更新文件后才会更新。如果我刷新页面，输入值将再次变为空。

Answer 1

您的应用程序没有状态，没有范围，没有角度，没有。

当页面加载时，您需要调用函数updateInput()或fetchFileData。

该函数将负责调用读取文件的服务并设置输入值，就像您已经在socket.on函数中进行的那样。

我不知道您是否已经拥有了从该文件获取数据的服务，但您需要一个服务。

使用Socket.io定期读取文件以更新图表

1 个答案: