如何避免混合使用 GET 请求和 socket.io 消息？

Question

我正在努力学习如何使用 node.js、angular.js 和 socket.io 开发实时网站，并且相对快速地运行喜欢这个：

html

<div ng-controller="myController">
   <p> {{name}} = {{value}} </p>
</div>

客户端js

var app = angular.module("myApp",[]);
var socket = io()

app.controller("myController", function($scope, $http) {

    $http.get("myData").then(function(response){
        $scope.name = response.data.name
        $scope.value= response.data.value
    });

    socket.on('myDataSocketMsg', function(message){
        $scope.$apply(function(){
            $scope.name = message.name
            $scope.value = message.value
        });
    });
});

服务端js

// data from text file
function getDataFromFile() {
   data = JSON.parse(fs.readFileSync('dataFile'));
   io.socket.emit("myDataSocketMsg",data)
};
fs.watchFile('dataFile', function(curr, prev) {
    getDataFromFile();
});
getDataFromFile();

// router
app.get('/myData', function(req, res){
    res.json(data);
});

如您所见，它在页面首次加载时使用 get 请求填充 html，并在服务器中 json 时使用套接字消息将更新推送到视图变化。如果我不在客户端中使用 get 请求，那么 html 在页面首次加载时不包含任何数据。当然，当我更新数据文件时，套接字仍然会更新它。

我觉得这很笨拙，因为我必须在服务器和客户端上做两次：服务器必须通过路由器使 json 可用，并用套接字消息发送它。并且客户端必须处理将数据解析为 $scope.name 和 $scope.value 用于套接字和获取请求。

有没有better/moreelegant/best的练习方法可以达到这个目的？有没有办法摆脱获取请求来初始填充 html?

Answer 1

您可以使用服务器端的连接事件来发送初始数据。

io.on('connection', function (socket) {
  data = JSON.parse(fs.readFileSync('dataFile'));
  io.socket.emit("myDataSocketMsg",data)
});

如何避免混合使用 GET 请求和 socket.io 消息？

How to avoid having a mixture of GET request and socket.io messages?

node.js

socket.io

angularjs