Question

我正在尝试将数据从我的nodejs应用程序获取到我的html页面。我看过Express和socket.io。据我所知，必须将传输的数据传输到套接字上的文件中，例如本地主机：8080 。我希望数据显示在我的Web服务器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>

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

Answer 1

很简单，您必须在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

Express Server

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

});

Answer 2

您可以尝试使用此jQuery更改HTML页面值

将其添加到index.html

<!doctype html>  
<html lang="en">  
    <head>
        <script src="./node_modules/jquery/dist/jquery.js"></script>
        <script src="./socket.io.js"></script>
        <script>

 var socket = io.connect("http://localhost:4200");
 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>

    </body>
</html>

服务器端代码发出x值

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

从Node.js到HTML获取数据

2 个答案: