Search code examples
javascriptnode.jsdebuggingsocket.ioconsole.log

Chat message not logging nodejs

Aim: To make the chat message the user entered to appear in the console (terminal). It currently isn't logging anything and I don't know how to debug this problem. Please keep in mind that I'm a beginner to NodeJS and know probably only the basics.

Server-side NodeJS code

const http = require("http");
const host = 'localhost';
const port = 8000;
const express = require('express');
const app = express();
app.use(express.static('./'));
const socketIO = require("socket.io");

// creating the server and starting it on port 8000
const server = http.createServer(app);
server.listen(port, host, () => {
    console.log(`Server is running on http://${host}:${port}`);
});
// making io object
const io = socketIO(server, {cookie: false});


// listening to connections to the server
io.on('connection', (socket) => {
    console.log('a user connected');
    // chat message coming to server

    socket.on("details", (chatBundle) => {
        console.log(join(chatBundle[0], ": ", chatBundle[1]));
    }); 
});

Client-side HTML code

<!DOCTYPE html>
<html>
    <body>
        <h1>CHAT ROOM</h1>
        <form onsubmit="return sendServer()">
            <label for="name">Name: 
                <input id="name" name="name" type="text">
            </label>
            
            <label for="text">Message: 
                <input id="text" name="text" type="text">
            </label>
            
            <input type="submit" id="send" >
        </form>
        <script src="/Users/chanson/node_modules/socket.io/client-dist/socket.io.js">
        </script>
        <script>
            const chatmsg = "details"; // added
            const socket = io(); // added
             function sendServer(){
                var sender = document.getElementById("name");
                var text = document.getElementById("text");
                var tempArray = [sender, text]
                socket.emit(chatmsg, tempArray)
                return false; // added
            };
        </script>
        
    </body>
</html>

Please help me debug this code.

Solution

  • in your client file import the socket io like this:

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

    instead of

    <script src="/Users/chanson/node_modules/socket.io/client-dist/socket.io.js">

    as by default, the Socket.IO server exposes a client bundle at /socket.io/socket.io.js.

    Also make sure you are hosting the client file from you server's static resources or other wise like so:

    // creating the server and starting it on port 8000
app.get('/', (req, res)=>{
    res.sendFile(path.join(__dirname, 'public', 'index.html'))
})
const server = http.createServer(app);
server.listen(port, host, () => {
    console.log(`Server is running on http://${host}:${port}`);
});

    Also in you client file's sendServer function correct the following lines:

    var sender = document.getElementById("name").value;
var text = document.getElementById("text").value;

    use .value to capture the user input