'How to host Socket io web appplication on heroku

I am trying to host the web application on heroku but every time it shows page not found. i have followed all the steps of the documentation but all in vain. Please help.

I am enclosing the code files. please let me know if there is any problem in it my heroku url is https://shrouded-fortress-31591.herokuapp.com/

package.json

{
    "name": "nodeserver",
    "version": "1.0.0",
    "description": "Chat application",
    "main": "index.js",
    "scripts": {

        "test": "echo \"Error: no test specified\" && exit 1",
        "devStart": "nodemon index.js",
        "start": "node index.js"
    },
    "author": "Vedant",
    "license": "ISC",
    "dependencies": {
        "express": "^4.18.1",
        "nodemon": "^2.0.16",
        "socket.io": "^4.5.0",
        "ws": "^8.6.0"
    }
}

client.js

const io = require('socket.io')(process.env.PORT || 8000, {
    cors: {
        origin: '*',
    }
});


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', message => {
        socket.broadcast.emit('receive', { message: message, name: users[socket.id] })
    });
    socket.on('disconnect', message => {
        socket.broadcast.emit('left', users[socket.id]);
        delete users[socket.id];
    });
})

server.js

const socket = io('https://shrouded-fortress-31591.herokuapp.com/');

const form = document.getElementById('sending');
const messageInput = document.getElementById('messageInp');
const messageContainer = document.querySelector(".container");
var audio = new Audio('message.mp3');
const append = (message, position) => {
    const messageElement = document.createElement('div');
    messageElement.innerText = message;
    messageElement.classList.add('message');
    messageElement.classList.add(position);
    messageContainer.append(messageElement);
    if (position == 'left') {
        audio.play();
    }

}



form.addEventListener('submit', (e) => {
    e.preventDefault();
    const message = messageInput.value;
    append(`You: ${message}`, 'right')
    socket.emit('send', 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`, 'right');
})

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">
    <title>TeamChat-Realtime Chat APP</title>
    <script defer src="https://shrouded-fortress-31591.herokuapp.com/socket.io/socket.io.js"></script>
    <script defer src="client.js"></script>
    <link rel="icon" type="image/x-icon" href="icon.png">
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap" rel="stylesheet">
</head>

<body>
    <nav>
        <img class="logo" src="icon.png" alt="">
        <h1 class="heading" style="font-family: 'Ubuntu', sans-serif;">TeamChat-Connecting to your favorite ones</h1>
    </nav>

    <div class="container">

    </div>

    <div class="send">
        <form action="#" id="sending">
            <input type="text" name="messageInp" id="messageInp">
            <button class="btn" type="submit">Send</button>
        </form>
    </div>

</body>

</html>

Solution 1:^[1]

You can use this alternative if thumbnails arent working:

embed.set_image(url="http://images.craigslist.org/00t0t_5kQLEkwjBAnz_0fu0bC_600x450.jpg")

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	jsxtdavee

'How to host Socket io web appplication on heroku

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]