node.jsreal-time

node js is not connecting with client side javascript to enable run time chat application


I wrote this code for client and for server side but its not working what will ne the problem

client.js



const socket = io('http://localhost:8000');
        const form = document.getElementById('send-container');
        const messageInput = document.getElementById('messageInp');
        const messageContainer = document.querySelector('.container');

        const append = (message, position) => {
            const messageElement = document.createElement('div');
            messageElement.innerText = message;
            messageElement.classList.add('message');
            messageElement.classList.add(position);
            messageContainer.append(messageElement);
        }

        form.addEventListener('submit', (e) => {
            e.preventDefault();
            const message = messageInput.value;
            append(`You: ${message}`, 'right');
            socket.emit("send msg", message);
            messageInput.value = '';
        });

        const name = prompt("Enter Your Name to join");
        socket.emit('new-user-joined', name);

        socket.on('user-joined', name => {
            append(`${name} joined the chat`, 'right');
        });

        socket.on('receive', data => {
            append(`${data.name}: ${data.message}`, 'left');
        });

        socket.on('left', name => {
            append(`${name} left the chat`, 'left');
        });

index.js/server.js

const express = require('express');
const http = require('http');
const socketIO = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = socketIO(server);

const users = {};

io.on('connection', (socket) => {
    socket.on('new-user-joined', (name) => {
        console.log('New user', name);
        users[socket.id] = name;
        socket.broadcast.emit('user-joined', name);
    });

    socket.on('send msg', (message) => {
        socket.broadcast.emit('receive', { message: message, name: users[socket.id] });
    });

    socket.on('disconnect', () => {
        socket.broadcast.emit('left', users[socket.id]);
        delete users[socket.id];
    });
});

const PORT = process.env.PORT || 8000;
server.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`);
});

I tried again to run but it fails no error but app is not working these are 2 files by which I cannot establish the connection beacause there is no any action performed in the browser


Solution

  • I tryed your server code and it works fine, but before make the socket connection amongs server and client you have to send any file to the client adding this type of code at the bottom of your server code:

    app.get("/", function(request, response) {
    response.sendFile(__dirname + "/client.js");});
    

    This is for routing the client requests and sending files from server to clients

    the file client.js must be in the root of your app

    Then after started the server you can try on your browser this url: http://localhost:8000

    and you will see the text of your client.js code shown in the browser

    Hope this will help you starting develop your server / client chat apps