Trying to post a table of products with Websocket and Express server

Question

I was trying to make a table of products with websocket for the "real-time" response, just learn about it and i was trying to upgrade an old project to this method, clearly i didn't make it and that's why im here

I really dont know the issue here so im kinda lost, the idea is that the user enters 3 inputs (title, price, thumbnail) and with websocket it would display below as a table using bootstrap properties in real time for all the users to see.

Here is my code so far:

html

    <div class="container mt-3 bg-dark">
        <h1 class="text-center text-primary">Ingrese datos</h1>

        <form class="text-light">

            <div class="form-group">
                <label for="title"><b>Producto</b></label>
                <input id="title" type="text" name="title">
            </div>
        
            <div class="form-group">
                <label for="price"><b>Precio</b></label>
                <input id="price" type="number" name="price">
            </div>
        
            <div class="form-group">
                <label for="thumbnail"><b>Thumbnail</b></label>
                <input id="thumbnail" type="text" name="thumbnail">
            </div>
        
            <button id="send">Postear</button>
        
        </form>

        <h2 class="text-center text-danger">Historial</h2>

        <div id="output"></div>
    </div>

js for the products

const socket = io();

let title = document.getElementById("title")
let price = document.getElementById("price")
let thumbnail = document.getElementById("thumbnail")
let btn = document.getElementById("send")
let output = document.getElementById("output")


btn.addEventListener("click", function(){
    socket.emit("products", {
        title: title.value,
        price: price.value,
        thumbnail: thumbnail.value
    });
});

socket.on("products", function (data) {
    output.innerHTML += `
    <table class="table table-dark">
                <tr class="text-warning">
                    <th>Title</th>
                    <th>Price</th>
                    <th>Thumbnail</th>
                </tr>
                    <tr>
                        <td>
                            ${data.title}
                        </td>
                        <td>
                            ${data.price}
                        </td>
                        <td>
                            ${data.thumbnail}
                        </td>
                    </tr>
            </table>
    `
})

js for the server

const path = require("path")
const express = require("express")
const app = express()

app.set("port", process.env.PORT || 8080)

app.use(express.static(path.join(__dirname, "public")))

const server = app.listen(app.get("port"), ()=>{
    console.log("server on port", app.get("port"))
})

const SocketIO = require("socket.io")
const io = SocketIO(server)

io.on("connection", (socket)=>{
    console.log("new connection", socket.id)

    socket.on("products", (data) => {
        io.sockets.emit("products", data);
    })
})

The problem right now is that when i click the send button it doesnt do anything, the server gives me a new connection and thats it, started today with websocket so i assume that the problem is something very basic apologies in advance

Answer 1

The problem could be the emitting method you are using on the server when receiving the product message from the client, it may be deprecated, so try to change it to another.

Change this:

io.sockets.emit("products", data);

To:

socket.emit("products", data);

Or:

io.emit("products", data);

You should use the local version of socket.io in the HTML file:

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

For more information check the Getting started guide or the Socket.IO emit cheatsheet.