发送到我的 node.js 服务器的数据没有被发送回客户端

Question

我对node.js还是比较陌生，所以我决定用一个简单的程序来练习。我制作这个程序是为了使用 node.js、express 和 socket.io.

测试客户端和服务器之间的连接

这是我的server.js

// Create an http server with Node's HTTP module. 
const http = require('http');

// Create a new Express application
const express = require('express');
const app = express();

const clientPath = `${__dirname}/../client`;
console.log(`Serving static from ${clientPath}`);

app.use(express.static(clientPath));

const socketio = require('socket.io');

// Pass the http server the Express application 
const server = http.createServer(app);

const io = socketio(server);

io.on('connection', function (socket) {
    console.log("There's been a connection");

    socket.on("console output", function (input) {
        console.log(input)
    });

    socket.on("text alter", function(data){
        var display = "'" + data + "' An interesting set of characters";

        io.sockets.emit("display string", display);
    })
})

    //Listen on port 8080
    server.listen(8080, function () {
        console.log("Listening on port 8080");
    })

这是我的index.js


const socket = io();
let players = [];


function serverOutput(){
    socket.emit("console output", "You suck at programming");
}

function serverAlter(){
    const alterInput = document.querySelector('#userinput1').value;

    socket.emit("text alter", alterInput);
}

socket.on("display string", function(){
    const outputArea = document.querySelector('#outputspace1');

    var fullLine = document.createElement("p");

    outputArea.appendChild(fullLine);

})

最后是我的index.html

<html lang="en">

<head>
    <title>Home</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>

    <div id="main-menu" class="page-templates">
        <h3>Part 1: Press the button to see the server send a message</h3>
        <button onclick="serverOutput()">Server message</button>
        <br>


        <h3>Part 2: Type in a string, and the server will add to it</h3>
        <input type="text" id="userinput1">

        <div id="outputspace1">

        </div>
        <button onclick="serverAlter()">Create sentence</button>


        <script src="/socket.io/socket.io.js"></script>
        <script src="src/index.js"></script>

</body>

</html>

从代码的运行方式来看，服务器能够从客户端获取数据，但是当我尝试更改数据并将其发回时，本应输出字符串的段落没有数据.我有一种感觉我错误地执行了“io.sockets.emit()”，但是如果你们能告诉我，我将不胜感激。

Answer 1

在客户端代码中，当您将数据添加到您的#outputspace1 元素时：

socket.on("display string", function(){
    const outputArea = document.querySelector('#outputspace1');

    var fullLine = document.createElement("p");

    outputArea.appendChild(fullLine);

});

您所做的只是向 #outputspace1 添加一个空的 <p></p> 元素。相反，您需要通过在 .on() 事件处理程序上声明正确的传入函数参数来捕获发送回给您的数据，然后您需要将该数据添加到您创建的 p 元素中，如下所示：

socket.on("display string", function(newText){
    const outputArea = document.querySelector('#outputspace1');

    var fullLine = document.createElement("p");
    fullLine.innerHTML = newText;

    outputArea.appendChild(fullLine);

});

发送到我的 node.js 服务器的数据没有被发送回客户端

Data sent to my node.js server isn't being sent back to the client

javascript

sockets

node.js

express

socket.io