html页面通过socket.io获取数据
Posted
技术标签:
【中文标题】html页面通过socket.io获取数据【英文标题】：Get data by socket.io in html page 【发布时间】：2017-03-18 12:13:46 【问题描述】：我已经阅读了很多教程，以及将数据从 node.js 类发送到 html 页面并显示这些数据的示例代码。 如link1,link2,link3,link4,link5 和其他一些人。
我正在从 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);
还有我的名为“showMap.html”的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 muuser$ npm start
StartWithNodejs@1.0.0 启动 /Volumes/Project/Project/NodeJS/startWithNode 节点索引.js
监听从 127.0.0.1 64047 收到消息
我的代码有什么问题？
【问题讨论】：
如果需要更多信息，我准备分享 嗨。而不是io.connect('localhost', port: 8080); 尝试io.connect('127.0.0.1:8080');
@dan 问题依然存在。
【参考方案1】：
我在本地对此进行了测试。在您的 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的内容。
【讨论】：
谢谢你，我花了很多时间，这个 html 作品 @Fa.Shapouri 没问题 :)【参考方案2】：在此示例中，您将能够从 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);
);
别忘了安装 express ，请求 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>
【讨论】：
以上是关于html页面通过socket.io获取数据的主要内容，如果未能解决你的问题，请参考以下文章
获取 http://localhost:3000/socket.io/socket.io.js 404（未找到）
使用 socket.io 在 Node.js 中使用 MySql 数据库进行 HTML5 页面日志记录