Question

socket.io的新手并尝试使用它。这个应用程序很简单，当我点击显示按钮时，屏幕上会实时显示一个图像。我有两个问题。

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

添加图像后，我用jquery克隆html容器然后转换为HTML。
此数据已成功发送到服务器，我将其存储在我的服务器中 jqueryImage变量
我创建了另一个事件，但它不会在客户端上触发连接。（我的＆＃39;追加＆＃39;事件）。

我的另一个问题：这并不是一直发生的，但是当有几个客户端连接时（大约7或8个ish）如果我添加可以说6个图像，一些客户端将不在同步。一些将显示6个图像，一些将显示4个，其他5个，等等。我将这归因于我的连接/滞后，但我并不完全确定。有没有办法检查这是什么，我将如何缓解它？

SERVER

 // 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(...);
});

socket.io在连接上发出

1 个答案: