0

I am building a real-time chat application using Node.js and socket.io.

I have built two js files - index.js for handling socket connection server requests and client.js for the client-side code. When I include console.log, I cannot get the output in the command line.

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--connects server and client-->
    <script src="http://localhost:8000/socket.io/socket.io.js"></script>
    <script src="./js/client.js"></script>
    <link rel="stylesheet" href="./css/style.css">
    <title>NiChat App</title>
</head>

<body>
    <!--Navbar-->
    <nav>
        <img class="logo" src="logo.png" alt="Log">
    </nav>

    <!--Container for the chat app-->
    <div class="container">
        <div class="message" id="m-left">Palpatine: Did you ever hear the tragedy of Darth Plagueis the wise?</div>
        <div class="message" id="m-right">Anakin: No.</div>
    </div>

    <!--Send box-->
    <div class="send">
        <form id="send-container" action="#">
            <input type="text" name="msgInp" id="msgInp">
            <button class="btn" type="submit">Send</button>
        </form>
    </div>
</body>

</html>

index.js

//file which will host the socket io 

const io = require("socket.io")(8000)

const users = {};

io.on('connection', (socket) => { //io.on listens to several socket connections
    console.log('a user connected');
    socket.on('new-user-joined', Name => { //accepts an event 'new-user-joined' 
        console.log('New user', Name)
        users[socket.id] = Name;
        socket.broadcast.emit('user-joined', Name)
    });
    socket.on('send', message => {
        socket.broadcast.emit('receive', { message: message, name: users[socket.id] })
    });
})

client.js

const socket = io('http://localhost:8000');

const form = document.getElementById('send-container');const msgInp = document.getElementById('msgInp');const msgContainer = document.querySelector(".container")const Name = prompt("Enter your name to join");socket.emit('new-user-joined', Name)

The client.js file is within the js folder.

The index.js is within the node_modules folder.

enter image description here

Please help me out.

I tried putting console.log at different places of both the js files but am unable to produce an output.

Nisarg Kudgunti
  • 91
  • 1
  • 2
  • 10
  • Unfortunately, you won't be able to use console.log to output data in realtime, since it is not a real-time logging system. You can, however, use other logging libraries to output real-time data, such as Winston or Bunyan. – Talha Jan 21 '23 at 19:32
  • @Talha What do you mean by "`console.log` not being real-time"? – Bergi Jan 21 '23 at 19:37
  • Does your clientside script work? Are you getting any errors in the browser devtools? – Bergi Jan 21 '23 at 19:38
  • @Bergi Console.log is a logging system that outputs data to the console. It is not a real-time system, meaning that it does not output data as it is received. This means that if you are trying to log real-time data, such as data from a socket connection, you won't be able to use console.log to do this, as it will only output data after the connection is closed. To output real-time data, you need to use a logging library that is specifically designed for real-time logging. Examples of such libraries include Winston and Bunyan. – Talha Jan 21 '23 at 19:39
  • By "*Unable to console log*", do you mean that your code works without the `console.log` and you cannot get the logging to work, or that your code doesn't work at all and you don't know why the event handlers are not running while you expected them to be executed? – Bergi Jan 21 '23 at 19:40
  • @Talha "*it will only output data after the connection is closed*" - uh, no? What makes you think that? Are we talking about the same [`console.log`](https://nodejs.org/api/console.html#consolelogdata-args)? – Bergi Jan 21 '23 at 19:41
  • There is a prompt in the client.js. When I enter a data in the prompt, it is stored in the const name and I am emitting it to the index.js socket and there I am providing the output in the console.log But the output is not showing – Nisarg Kudgunti Jan 21 '23 at 19:42
  • @NisargKudgunti So, does the connection work at all? Do you see the expected request/messages in the network panel of your browser devtools? – Bergi Jan 21 '23 at 19:45
  • @Bergi Sir, I am getting the socket.io connection as blocked – Nisarg Kudgunti Jan 21 '23 at 19:49
  • Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8000/socket.io/?EIO=4&transport=polling&t=ONLuTVn. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 200. – Nisarg Kudgunti Jan 21 '23 at 19:50

1 Answers1

0

This answer provided the solution to my question. Here is the link

Adding this { transports: ['websocket'] } inside the io makes the problem go away.

Nisarg Kudgunti
  • 91
  • 1
  • 2
  • 10