问将新客户端与socket.io同步

EN

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);

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

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

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

});

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';

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


class Display extends SaveInput {

  constructor(){


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

  }

  buttons (){

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


  }

  //display images 
  displayEls() {
    let img = './assets/images/baseball/team0.jpg';
    let $picContainer = $('<div class="picture-frame"></div>');
    let  $newImg = $('<img>');

    // EMIT
    socket.emit('test', {
      image: img
    });

    // listen
    socket.on('test', function(data) {
        let that = this;
        let foo = data.image.toString();

        $newImg.attr('src', foo);
        $newImg.appendTo($picContainer);
        that.pGrid.append($picContainer);
    });


  }

}

export default Display;