javascript - socket.io 在连接时发出

Question

socket.io 新手并正在尝试它。这个应用程序非常简单，当我单击显示按钮时，屏幕上会实时出现图像。我有 2 个问题。

我的主要问题:添加后，图像在所有客户端上显示正常。我现在的目标是让所有连接的新客户端都能看到相同的数据。例如，如果我向屏幕添加 4 个图像，然后新客户端连接，则新客户端根本看不到任何图像。似乎我的发出事件没有触发，我不明白为什么。解释一下我背后的思考过程:

• 附加图像后，我使用 jquery 克隆 html 容器 然后转换为html。

• 此数据已成功发送到服务器，我将其存储在我的 jqueryImage变量

• 我创建了另一个事件，但它没有在客户端上触发 联系。 (我的“追加”事件)。

我的另一个问题:这种情况不会一直发生，但是当有几个客户端连接时(大约 7 或 8 个左右)，如果我添加 6 个图像，某些客户端将不同步。有些会显示 6 个图像，有些会显示 4 个，其他的 5 个，等等。我将此归因于我的连接/延迟，但我对此并不完全确定。有没有办法检查这是什么以及我该如何缓解这种情况？

服务器

 // app set up
    const app = express();
    const server = http.Server(app);
    // const  = new socket(server);
    let port = process.env.PORT || 3000;

    // static files
    app.use(express.static('app'));

    // socket setup & pass SERVER
    const io = new socketIO(server);

    let jqueryImage;

    // on client connect
    io.on('connection', (socket) => {


        console.log('made connection!!!');

        // events
        socket.on('client-image', function(data){
            console.log('SERVER ' + data.image);
            io.sockets.emit('client-image', data);
        });

        socket.on('new-client-append', function(data){
        jqueryImage = data.clone;
        console.log('jqueryImage ' + JSON.stringify(jqueryImage));
  });


io.on('connect', (socket) => {
  console.log('append emitting!!!');
  console.log('current clone ' + JSON.stringify(jqueryImage));

    socket.emit('new-client-append', jqueryImage);

});



    });



    // errors
    io.on('connect_error', function(){
        console.log('fail');
    });


    server.listen(port, () => {
        console.log('server running....');
    });

客户端

import $ from 'jquery';
import SaveInput from './SaveInput';
import io from 'socket.io-client';



class Display extends SaveInput {

  constructor(){


    this.mainContainer = $('.main-container');
    this.pGrid = $('.pic-grid-container');
    this.display = $('#btn-display');

    this.buttons();
  }

  buttons (){

    // click buttons
    this.display.click(this.displayEls.bind(this));


  }

  //display images with names
  displayEls() {

    let img = 'https://secure.gravatar.com/avatar/22f38e0216f57af53a1776fb2a72c436?s=60&d=wavatar&r=g';
    let $picContainer = $('<div class="picture-frame"></div>');
    let  $newImg = $('<img>');

    // clone pic-grid-container
    let htmlClone = this.pGrid.clone();
    let stringClone = htmlClone.html();

    // EMIT

    //send image url
    socket.emit('client-image', {
      image: img
    });

    // send dom clone to server
    socket.emit('new-client-append', {
      clone: stringClone
    });

    // LISTEN

    // append image in real time
    socket.on('client-image', (data) => {

        let foo = data.image.toString();

        $newImg.attr('src', foo);
        console.log(data);
        console.log(foo);
        $newImg.appendTo($picContainer);
        this.pGrid.append($picContainer);

        console.log('after append clone ' + stringClone);
    });

    socket.on('new-client-append', (data) => {
  console.log('NEW CLIENT ENTERED');

});

}

export default Display;

更新:调整服务器代码，服务器现在发出，但客户端看不到它。

  //SERVER
socket.on('new-client-append', function(data){
        jqueryImage = data.clone;
        console.log('jqueryImage ' + JSON.stringify(jqueryImage));
  });


io.on('connect', (socket) => {
  console.log('append emitting!!!');
  console.log('current clone ' + JSON.stringify(jqueryImage));

    socket.emit('new-client-append', jqueryImage);

});

//client

 // send dom clone to server
    socket.emit('new-client-append', {
      clone: stringClone
    });

socket.on('new-client-append', (data) => {
      console.log('NEW CLIENT ENTERED');

    });

Answer 1

seems my emit event is not triggering and i don't understand why. to explain my thought process behind it

您不要在服务器上执行 socket.on('connect', ...) (这仅适用于客户端)。当您在服务器上收到 io.on('connect', function(socket) {...}) 事件时，套接字已连接。只需在 io.on('connect', function(socket) {...}) 中执行 socket.emit() 即可。

io.on('connect', function(socket) {
    socket.emit(...);
});