javascript - 尝试使用 Websocket 和 Express 服务器发布产品表

Question

我试图用 websocket 制作一个产品表以获取“实时”响应，只是了解它并且我试图将一个旧项目升级到这种方法，显然我没有成功，这就是为什么我在这里

我真的不知道这里的问题所以我有点迷路了，这个想法是用户输入 3 个输入(标题、价格、缩略图)并且使用 websocket 它将在下面显示为一个表格，使用实时的引导属性用户看到。

到目前为止，这是我的代码:

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，所以我认为问题是非常基本的提前道歉

Answer 1

问题可能是您在从客户端接收到 product 消息时在服务器上使用的发射方法，它可能已被弃用，因此请尝试将其更改为另一个。

改变这个:

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

收件人:

socket.emit("products", data);

或者:

io.emit("products", data);

您应该在 HTML 文件中使用本地版本的 socket.io:

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

有关更多信息，请查看 Getting started guide或 Socket.IO emit cheatsheet .