socket.io在连接上发出

Question

socket.io的新功能并进行试验。 这个应用程序非常简单，当我单击显示按钮时，图像会实时显示在屏幕上。 我有2个问题。

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

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

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

• 我创建了另一个事件，但不会在客户端连接上触发。 （我的“附加”事件）。

我的另一个问题：这不会一直发生，但是如果有几个客户端连接在一起（大约7或8 ish），如果我添加说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

似乎我的发射事件没有触发，我也不明白为什么。 解释我背后的思考过程

您无需在服务器上执行socket.on('connect', ...) （仅适用于客户端）。 当服务器上出现io.on('connect', function(socket) {...})事件时，套接字已经连接。 只是做socket.emit()里面io.on('connect', function(socket) {...})

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