Javascript try 使用 Websocket 和 Express 服务器发布产品表

我试图用websocket制作一个产品表，用于"实时"响应，只是想了解一下，我试图将一个旧项目升级到这种方法，显然我没有做到，这就是为什么我在这里

我真的不知道这里的问题，所以我有点迷路了， idea 是用户输入3个输入(标题、价格、缩略图)，然后使用websocket，它将在下面显示为一个使用 bootstrap 属性的表格，供所有用户实时查看.

以下是我目前的代码:

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

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

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);
    })
})

现在的问题是，当我单击"发送"按钮时，它什么都不做，服务器给了我一个新的连接，就是这样，从今天的websocket开始，所以我假设问题是一些非常基本的事先道歉