Question

我有一个实验性的，简单的应用程序我正在四处学习socket.io。基本上，当你单击一个显示按钮时它会显示一些图像，并且它应该实时发送它，并且当新客户端连接时它应该看到先前连接客户端看到的相同图像。这是如何工作的，我通过jquery克隆html并将其转换为发送到服务器的字符串。通过一些故障排除，似乎服务器正在接收数据，但发送出null。

奇怪的是，它有时候。当我控制台登录服务器时，收到数据，但数据被清空，我认为这是所有客户端得到的。有点难以解释，但我会把它放在代码的底部。我有点怀疑这是时间问题，但我不确定。

服务器代码

const express = require('express');
const socketIO = require('socket.io');
const http = require('http');


// 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 domClone;

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


  console.log('client has entered...');

  socket.on('new-client-append', function(data){
            domClone = data;
            console.log('NEW-CLIENT-APPEND ' + JSON.stringify(domClone));
    });

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

    // events
    socket.on('client-real-time', (data) => {
        socket.broadcast.emit('client-real-time', data);
        console.log('client-real-time ' + data.image);
    });

});


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

客户代码

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


// make connection
const socket = io.connect('localhost:3000');



class Display extends SaveInput {

  constructor(names, numbers){
    super(names, numbers);

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


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

        this.pGrid.append(data);
    });

    socket.on('connect_error', function(){
        console.log('fail');
    });

  }

  buttons (){

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

    this.reset.click( () => {
       this.pGrid.html("");

    });


  //display images with names
  displayEls() {
    let that = this;


    this.names.forEach(function(name, i) {

    let $picContainer = $('<div class="picture-frame"></div>');
    let  $newImg = $('<img>');
    let  $newName = $('<p>');



    // append to DOM
      $newImg.appendTo($picContainer);
      $newName.text(name);
      $newName.appendTo($picContainer);

      if (baseball.checked) {
           $newImg.attr('src', "./assets/images/baseball/team" + that.numbers[i] + ".jpg");
         } else if (football.checked) {
           $newImg.attr('src', "./assets/images/football/team" + that.numbers[i] + ".gif");
       }
      that.pGrid.append($picContainer);

    });

    let htmlClone = that.pGrid.clone();
    let stringClone = htmlClone.html();


    // EMIT

    //update all clients real time
    socket.emit('client-real-time', {
      image: stringClone
    });



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

    // LISTEN

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

        let foo = data.toString();

        this.pGrid.append(foo);

            });

  }  //displayEls end

}




export default Display;

服务器控制台日志

console.log('client-real-time ' + data.image);

//yields
"client-real-time very long html string here"
"client-real-time " (blank data)

console.log('NEW-CLIENT-APPEND ' + JSON.stringify(domClone));

//yields
NEW-CLIENT-APPEND {"clone":"\n    " }

Answer 1

我在我的服务器上放置一个setTimeout发出处理程序，现在它的工作更加一致。

socket.io服务器发送空数据

1 个答案: