事件监听器中的 Socket.io

Question

每当用户单击带有 socket.io 的按钮时，我都会尝试发送消息。这是我的服务器端代码：

const app = express()
const http = require('http')
const server = http.createServer(app)
var io = require('socket.io')(server);

io.on('connection', (socket) =>
{
  io.emit("message")
})

server.listen(PORT, () => {
    console.log(`Server is on port ${PORT}`);
});

这是我的前端 js 代码：

var socket = io()

const button = document.querySelector(".yolla")
const form = document.querySelector(".form")
const yazi = document.querySelector(".mesajlar")

form.addEventListener("submit", (e) => 
{
  socket.on("message", () => 
  {
    console.log(yazi.value) 
  })
})

这是我的哈巴狗代码：

extends ../header2.pug
block unique-css
    include ../../public/css/mentor/chat.css
block unique-content
    .main
        .ekran
            .ust
                h2 Özgür Arslan
                hr
            .msg
            form(action="" class="form")
                input(type="text" class="mesajlar" placeholder="Mesajınızı giriniz.")
                button(class="yolla" type="button") Gönder
    script(src="/socket.io/socket.io.js")
    script(src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/3.0.1/mustache.min.js")
    script(src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js")
    script(src="https://cdnjs.cloudflare.com/ajax/libs/qs/6.6.0/qs.min.js")
    script
        include ../../public/js/mentor

当我单击按钮时，没有任何反应。我想在这个聊天应用程序中为所有在线用户打印输入元素的值。感谢阅读。

Answer 1

您的发射/开启功能倒退。 socket.on 应该发生在服务器中，以对应该发生在客户端（前端）中的 socket.emit 做出反应。

// Server
io.on('connection', (socket) => {
  io.emit('message', 'Welcome'); // To the frontend

  socket.on('message', (msg) => { console.log('Message', msg); }); // From the frontned
});

客户：

// Frontend
socket.on("message", (msg) => { console.log(msg); }); // From server

form.addEventListener("submit", (e) => {
    socket.emit("message", yazi.value); // To server
});