在 HTML 页面中显示 NodeJs 的 console.log答案

【问题标题】：Show console.log of NodeJs in HTML page在 HTML 页面中显示 NodeJs 的 console.log
【发布时间】：2017-04-17 14:12:40
【问题描述】：

我有一个服务器 app.js 和多个可以连接到我的服务器的客户端。我在 index.html 中显示服务器对客户端所说的内容，但我想在客户端与其交谈时对服务器执行相同的操作，并且 在 HTML 页面中显示我的客户端对服务器所说的内容。现在我用console.log()显示它

这是我的代码，我正在使用 Socket.io：（我是 Javascript 新手，这只是一个测试，所以这真的很简单）

app.js / 服务器：

var http = require('http'),
    fs = require('fs'),
    // NEVER use a Sync function except at start-up!
    index = fs.readFileSync(__dirname + '/index.html');

// Send index.html to all requests
var app = http.createServer(function (req, res) {
    res.writeHead(200, { 'Content-Type': 'text/html' });
    res.end(index);
});

// Socket.io server listens to our app
var io = require('socket.io').listen(app);

// Send current time to all connected clients
function sendTime() {
    io.emit('clearance', { time: new Date().toJSON() });
}

// Send current time every 10 secs
setInterval(sendTime, 10000);

// Emit welcome message on connection
io.on('connection', function (socket) {
    // Use socket to communicate with this particular client only, sending it it's own id
    socket.emit('welcome', { message: 'Welcome!', id: socket.id });

    socket.on('i am client', console.log);
    socket.on('receiveClerance', function (data) {
        console.log(data);
    });
});



app.listen(3000);

Index.html

<!doctype html>
<html>
    <head>
        <script src='/socket.io/socket.io.js'></script>
        <script>
            var socket = io();
            var data = "";
            socket.on('welcome', function(data) {
                addMessage(data.message);

                // Respond with a message including this clients' id sent from the server
                socket.emit('i am client', {data: 'foo!', id: data.id});
            });

            socket.on('clearance', function (data) {
                addMessage(data.time + data);
                $data = data;
            });

            socket.on('message', console.log.bind(console));

            function addMessage(message) {
                var text = document.createTextNode(message),
                    el = document.createElement('li'),
                    messages = document.getElementById('messages');

                el.appendChild(text);
                messages.appendChild(el);
                var btn = document.createElement("BUTTON");
                btn.textContent = "Test";
                btn.onclick = function () {
                    socket.emit('receiveClerance', "La clerance " + $data + " est recu");
                }
                messages.appendChild(btn);
            }
        </script>
    </head>
    <body>
        <ul id='messages'></ul>
    </body>
</html>

【问题讨论】：

标签： javascript html node.js socket.io console

【解决方案1】：

只需将您的 console.log(data) 更改为 socket.emit('message',data)。

或者让它成为一个你可以在任何地方使用的函数，比如：

function log(socket,data){
     console.log(data);
     socket.emit('message',data);
}

这样您仍会在服务器控制台上看到消息。

【讨论】：

我想过这个方案，但我真的不想为客户端做一个特殊的功能，我真的想把我的客户端和我的服务器分开，如果我这样做，我会只是创建一种新型客户端对吗？
不，你不是，你只是从服务器向你的客户端发送消息，就像你做的一样：socket.emit('welcome') 连接。 emit 是您的服务器与客户端通信的唯一方式 :) 并且您已经在客户端上有处理“消息”事件的处理程序，所以这是双赢的
以及如何在特殊页面上显示？因为我已经在 localhost:3000 上运行了一些东西
套接字连接绑定到你打开它的页面，所以你不能这样做。您可以使用 Angular 或 React 制作单页应用程序，并使用“假”网址，例如 localhost:3000/#logs
这对我的水平来说似乎真的很复杂：/我想没有简单的方法可以做到这一点:(