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 >
        <h1 >Ingrese datos</h1>

        <form >

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

        <h2 >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 >
                <tr >
                    <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

CodePudding user response：

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.

CodePudding user response：

You need to prevent the navigation when you submit the form using e.preventDefault();

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

CodePudding user response：

I found the problem, I had misspelled "products" in one of the emits and i was missing the e.preventDefault() too...