时间戳

首页 > 解决方案 > 从 Nodejs 获取数据到 html

javascript - 从 Nodejs 获取数据到 html

问题描述

我正在尝试将数据从我的 nodejs 应用程序获取到我的 html 页面。我看过快递和socket.io。据我所知，传输的数据必须传输到套接字上的文件，例如localhost:8080。我希望数据显示在我的网络服务器 localhost 上，没有端口。

无论如何我可以做到这一点吗？

<!-- index.html -->
<!doctype html>  
<html lang="en">  
    <head>
    <script>  
 var socket = io.connect();
 socket.on('connect', function(data) {
    socket.emit('join', 'Hello World from client');
 });
 socket.on('broad', function(data) {
         $('#future').append(data+ "<br/>");
   });

 $('form').submit(function(e){
     e.preventDefault();
     var message = $('#chat_input').val();
     socket.emit('messages', message);
 });

  client.on('changeXvalue', function(data) {
         $("#future1").text(data);
   });
</script>  
    </head>
    <body>
        <h1>Hello World!</h1>
        <div id="future"></div>
        <div id="future1"></div>
        <form id="form" id="chat_form">
            <input id="chat_input" type="text">
            <input type="submit" value="Send">
        </form>
         <script src="./node_modules/jquery/dist/jquery.js"></script>
        <script src="./socket.io.js"></script>
    </body>
</html>

应用程序.js

    // app.js
    var express = require('express');  
    var app = express();  
    var server = require('http').createServer(app);  
    var io = require('socket.io')(server);

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

    io.on('connection', function(client) {  
        console.log('Client connected...');

        client.on('join', function(data) {
            console.log(data);
        });

        client.on('messages', function(data) {
               client.emit('broad', data);
               client.broadcast.emit('broad',data);
        });
        var data = "test";
        socket.emit('changeXvalue', data);

    });

    server.listen(4200);

标签： javascriptnode.js

解决方案

很简单，您应该必须在 HTML 页面中使用 socket.io 客户端库

按照以下步骤使用 socket.io 构建 Node JS

$ mkdir socket-app
$ cd socket-app
$ npm init

$ npm install socket.io express --save

$ npm install jquery --save

快递服务器

// app.js
var express = require('express');  
var app = express();  
var server = require('http').createServer(app);  
var io = require('socket.io')(server);

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

server.listen(4200);

HTML

<!-- index.html -->
<!doctype html>  
<html lang="en">  
    <head>
    <script>  
 var socket = io.connect();
 socket.on('connect', function(data) {
    socket.emit('join', 'Hello World from client');
 });
 socket.on('broad', function(data) {
         $('#future').append(data+ "<br/>");
   });

 $('form').submit(function(e){
     e.preventDefault();
     var message = $('#chat_input').val();
     socket.emit('messages', message);
 });
</script>  
    </head>
    <body>
        <h1>Hello World!</h1>
        <div id="future"></div>
        <form id="form" id="chat_form">
            <input id="chat_input" type="text">
            <input type="submit" value="Send">
        </form>
         <script src="/jquery/dist/jquery.js"></script>
        <script src="/socket.io/socket.io.js"></script>
    </body>
</html>

使用它运行它 

node app.js

让我们在服务器监听之前添加它

 io.on('connection', function(client) {  
    console.log('Client connected...');

    client.on('join', function(data) {
        console.log(data);
    });

    client.on('messages', function(data) {
           client.emit('broad', data);
           client.broadcast.emit('broad',data);
    });

});

推荐阅读