通过在页面中的socket.io获取数据

我已经阅读了很多教程和示例代码，以便将数据从node.js类发送到html页面并显示此数据。如link1，link2，link3,link4,link5 等等。通过在页面中的socket.io获取数据

我从UDP监听器获取一些数据，需要将它发送到一个HTML页面以显示它。这里是我的代码：

UDP的接收器：

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);

和我的html页面被称为 '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>

但通过发送数据包，HTML页面没有改变。这里是正在运行的代码我的控制台日志：

ATIS-的MacBook-PRO：startWithNode MUSER $ NPM启动

[email protected]启动/卷/项目/工程/的NodeJS/startWithNode 节点index.js

听力得到消息从127.0.0.1 64047

我的代码有什么问题？

来源

2016-11-04 Fa.Shapouri

如果需要更多信息，我准备分享 –

你好。而不是'io.connect（'localhost'，{port：8080}）;'尝试'io.connect（'127.0.0.1:8080'）;' – dan

@dan问题仍然存在。 –

我在本地测试了这个。在你的HTML文件中，我做了两个更改并且工作。

1 - 更换io.connect('localhost', {port: 8080});与io.connect('localhost:8080');

2 - 有在document.getElementById("date").innerHTML = "My new text!";线的端部的奇怪\ u200b字符。我删除，并结束了：

<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>

它取代的results内容。

来源

2016-11-04 16:17:00 dan

谢谢，我花了很多时间和这个html作品 –

@ Fa.Shapouri没问题:) – dan

在这个例子中，您将能够从php文件中获取JSON数据并将其发送给所有连接的客户端。

RunThisFileThroughNodeJs.js

var app = require('express')(); 
var http = require('http').Server(app); 
var io = require('socket.io')(http); 
var port = process.env.PORT || 3000; 
var request = require("request") 
var url = "http://localhost/api/index.php"; 
events = require('events'), 
    serverEmitter = new events.EventEmitter(); 
app.get('/', function(req, res){ 
    res.sendFile(__dirname + '/index.html'); 
}); 


io.on('connection', function(socket){ 


    setInterval(
     function(){ 

      request({ 
       url: url, 
       json: true 
      }, function (error, response, body) { 

       if (!error && response.statusCode === 200) { 
        io.emit('chat message', body); 
       } 
      }); 
     },5000); 




}); 


http.listen(port, function(){ 
    console.log('listening on *:' + port); 
});

不要忘记安装快递，请求的NodeJS

现在做出这个文件我将它称为index.html的，所以我的文件的响应会在这里。

的index.html

<!doctype html> 
<html> 
<head> 
    <title>Prices API</title> 
    <script src="http://localhost/js/socket.io.js"></script> 

</head> 
<body> 
<div id="price_list"></div> 
<script> 
    var socket = io(); 
socket.on('chat message', function(msg){ 

    document.getElementById("price_list").innerHTML = JSON.stringify(msg); 

    console.log(msg); 
}); 

</script> 
</body> 
</html>

来源

2017-10-25 11:42:14 Adam

通过在页面中的socket.io获取数据

回答

相关问题