2017-09-16 29 views
0

我正在使用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> 

回答

0

您所發出已有更改客戶端的Socket連接。

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 
     } 
    }); 
}); 
+0

再次它沒有工作..當顏色改變後,我作爲客戶端連接到頁面,但它看到未改變的頁面。 – Mehdi

+0

我剛剛編輯了一些代碼,您可能必須使用變量來跟蹤用戶更改,並且必須將其發送給客戶端進行連接。 – vikram

+0

謝謝,但請你寫下代碼。因爲我是新手。我嘗試了很多次,但是出現了錯誤。請更新您的答案。 – Mehdi

相關問題