连接到服务器应用程序时,客户端无法查看更新的数据

时间:2017-09-16 17:19:42

标签: javascript node.js ajax websocket socket.io

我使用node.js从我的Web应用程序(服务器)上的套接字读取数据。我收到数据并在网页上进行一些更改(例如:更改折线的颜色)但是当更改后的客户端连接时,除非将新数据发送到服务器,否则无法看到更改的颜色!那么客户端如何看到服务器上的先前更改呢?

这是我的代码

app.js

var http = require('http');
var express = require('express'),
    app = module.exports.app = express();

var server = http.createServer(app);
var io = require('socket.io').listen(server);  //pass a http.Server instance
server.listen(3000);  //listen on port 80

app.use(express.static('public'));
app.get('/', function(req, res) {
  res.sendFile(__dirname + '/index.html');
});

//var app = require('http').createServer(handler);
//var io = require('socket.io').listen(app);
var fs = require('fs');

var mySocket = 0;

//app.listen(3000); //Which port are we going to listen to?

function handler (req, res) {
  fs.readFile(__dirname + '/index.html', //Load and display outputs to the index.html file
  function (err, data) {
    if (err) {
      res.writeHead(500);
      return res.end('Error loading index.html');
    }
    res.writeHead(200);
    res.end(data);
  });
}

io.sockets.on('connection', function (socket) {
  console.log('Webpage connected'); //Confirmation that the socket has connection to the webpage
  mySocket = socket;
});

//UDP server on 41181
var dgram = require("dgram");
var server = dgram.createSocket("udp4");

server.on("message", function (msg, rinfo) {
  console.log("Broadcasting Message: " + msg); //Display the message coming from the terminal to the command line for debugging
  if (mySocket != 0) {
     mySocket.emit('field', "" + msg);
     mySocket.broadcast.emit('field', "" + msg); //Display the message from the terminal to the webpage
  }
});

server.on("listening", function () {
  var address = server.address(); //IPAddress of the server
  console.log("UDP server listening to " + address.address + ":" + address.port);
});

server.bind(41181);

的index.html

<html>
<script src="/socket.io/socket.io.js"></script>
            <script>
            var socket = io.connect('http://192.168.1.14:3000');
            socket.on('field', function (data) {
                console.log(data);
                $("#field").html(data);

                switch(data) 
                {
                    case "1": 
                    $("#path1").css("stroke", "red");
                    $("#progress1").css("backgroundColor", "red");
                    break;

                }



            });
        </script>
<body>
<polyline id="path1" points="600,270 560,262 460,270 440,300" style="fill:none;stroke:green;stroke-width:3" />
</body>
</html>

1 个答案:

答案 0 :(得分:0)

在连接时,您必须发出已存在的套接字客户端更改。

var myMessage;
io.sockets.on('connection', function (socket) {
    console.log('Webpage connected'); //Confirmation that the socket has connection to the webpage
    mySocket = socket;

    mySocket.emit('field', "" + myMessage); // <<-- like this
    server.on("message", function (msg, rinfo) {
      console.log("Broadcasting Message: " + msg); //Display the message coming from the terminal to the command line for debugging
      if (mySocket != 0) {
        myMessage = msg;
        mySocket.emit('field', "" + msg);
        mySocket.broadcast.emit('field', "" + msg); //Display the message from the terminal to the webpage
      }
    });
});