CODEWITHSUNDEEP
javascriptnode.jsexpresssocketssocket.io
YawZing6
YawZing6

Reputation: 13

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

I'm still relatively new to node.js, so I decided to practice with a simple program. I made this program to test the connectivity between the client and the server using node.js, express and socket.io.

This is my 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");
    })

This is my 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);

})

Lastly my 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>

From how the code runs, the server is able to pick up the data from the client, but when I try to change the data and send it back, the paragraph that is meant to be outputting the string has no data. I have a feeling I implemented the "io.sockets.emit()" incorrectly, but please if you guys can enlighten me, I would be so grateful.

Upvotes: 0

Views: 129

Answers (1)

jfriend00
jfriend00

Reputation: 708046

In the client code, when you add data to your #outputspace1 element with this:

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

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

    outputArea.appendChild(fullLine);

});

All you are doing there is adding an empty <p></p> element to #outputspace1. Instead, you need to capture the data being sent back to you by declaring the right incoming function parameter on your .on() event handler and then you need to add that data to the p element you created like this:

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

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

    outputArea.appendChild(fullLine);

});

Upvotes: 1

Related Questions