Fa.Shapouri Fa.Shapouri - 28 days ago 16
HTML Question

Get data by socket.io in html page

I have read a lot of tutorial, and sample code to send data from a node.js class to an html page and show this data.
such as link1, link2,link3,link4,link5
and some others.

I am getting some data from UDP listener and need to send it after some processing to an html page to show it. here is my code:

The udp receiver:

var server_port = process.env.OPENSHIFT_NODEJS_PORT || 8080
var server_ip_address = process.env.OPENSHIFT_NODEJS_IP || '127.0.0.1'

var http = require('http'),
dgram = require('dgram'),
socketio = require('socket.io'),
fs = require('fs');

var html = fs.readFileSync(__dirname + '/html/showMap.html');

var app = http.createServer(function(req, res) {
res.writeHead(200, {
'Content-type': 'text/html'
});
res.end(html);
io.sockets.emit('welcome', { message: 'Welcome!'});

}).listen( server_port, server_ip_address, function() {
console.log('Listening');
});

var io = socketio.listen(app),
socket = dgram.createSocket('udp4');

socket.on('message', function(content, rinfo) {
console.log('got message', content, 'from', rinfo.address, rinfo.port);
io.sockets.emit('udp message', 'content' /*content.toString()*/);
});

socket.bind(5001);


and my html page which is called 'showMap.html'

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Get Data</title>
<script src="/socket.io/socket.io.js"></script>
</head>
<body>
<div id="results"> This text will change </div>
<div id="date">sample another temp text</div>
<script>
// client code here
var socket = io.connect('localhost', {port: 8080});
socket.on('udp message', function(message) {
console.log(message)
document.getElementById("date").innerHTML = "My new text!";‚Äč
});
socket.on('welcome', function(data) {
document.getElementById("results").innerHTML = data.message;
});
</script>
</body>
</html>


but by sending packet, html page has not changed.
Here is my console log of running code:


Atis-MacBook-Pro:startWithNode muser$ npm start


StartWithNodejs@1.0.0 start /Volumes/Project/Project/NodeJS/startWithNode
node index.js


Listening got message from 127.0.0.1 64047


What is wrong in my code?

dan dan
Answer

I tested this locally. In your HTML file I made two changes and it worked.

1 - Replace io.connect('localhost', {port: 8080}); with io.connect('localhost:8080');

2 - There was a strange \u200b character at the end of the document.getElementById("date").innerHTML = "My new text!"; line. I deleted that and ended up with:

<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Get Data</title>
    <script src="/socket.io/socket.io.js"></script>
  </head>
    <body>
      <div id="results">    This text will change     </div>
      <div id="date">sample another temp text</div>
    <script>
      // client code here
      var socket = io.connect('localhost:8080');
      socket.on('udp message', function(message) {
      console.log(message)
        document.getElementById("date").innerHTML = "My new text!";
      });
      socket.on('welcome', function(data) {
        document.getElementById("results").innerHTML = data.message;
      });
    </script>
  </body>
</html>

Which replaces the content of results.

Comments