Socket.io“发射但没有响应”

Question

我正在开发一个实时 socket.io 项目。 这将是一个协作白板应用程序。 我发射有问题。

服务器.js

 const express = require('express')
const app = express();
const http = require('http').createServer(app);
const io = require('socket.io')(http, {
    cors: {
        origin: '*',
    }
});
app.use('/',express.static('ui'))

var connections = []

io.on('connect', (socket) => {
    
    connections.push(socket)
    console.log(`${socket.id} has connected`);

    io.emit('currentCanvas')
    //socket.emit('currentCanvas') both of these doesnt work

    socket.on('image-data', (imageData) =>{
        socket.emit('setImageData', imageData);
    })

    socket.on('disconnect', () => {
        connections = connections.filter((cn) => cn.id !== socket.id);
        console.log(`${socket.id} is disconnected`);
    })

    socket.on('draw', (data) => {
        socket.broadcast.emit('onDraw',data)
    })
    
    socket.on('down',(data) =>{
        socket.broadcast.emit('onDown',data)
    } ) 

})

http.listen(5000, () => console.log('listening on port 5000'));

客户端连接后，我无法发出“当前画布”

    var canvas = document.getElementById('my-canvas');

canvas.width = 0.98 * window.innerWidth;
canvas.height = 0.9 * window.innerHeight;

var io = io();
 
let ctx = canvas.getContext('2d');
let x,y;
let lineActive = false;

canvas.addEventListener('click',(e) => {
    lineActive = !lineActive
    ctx.moveTo(x, y)
    io.emit('down',{x,y})
})

io.on('onDraw', (data) => {
    ctx.lineTo(data.x,data.y)
    ctx.stroke();
})

io.on('onDown', (data) => {
    lineActive = !lineActive
    ctx.moveTo(data.x, data.y)
})

io.on('currentCanvas', () =>{
    var imageData = ctx.getImageData(0,0,canvas.width,canvas.height)
    console.log(io.id + "current-canvas alındı");
    //io.emit('image-data',imageData)
});

io.on('deneme', () =>{
    console.log('deneme');
})

io.on('setImageData',(imageData) =>{
    ctx.putImageData(imageData,0,0)
})

window.onmousemove = (e)=>{
    x = e.clientX;
    y = e.clientY;

    if(lineActive){
        io.emit("draw",{x,y})
        ctx.lineTo(x,y)
        ctx.stroke();
    }
}

当我从调试中查看时，我知道它是由服务器发出的，但不是从客户端收到的

调试终端

我不知道它可能是什么。 提前致谢。

Answer 1

Lawrence Cherone 在评论区找到解决方案。

将所有客户端事件定义和逻辑包装在 socket.on('connect', () => { 将 io.emit('currentCanvas') 移动到服务器部分的底部，就像连接时一样触发