Question

对于这个术语并不十分确定，对于任何混乱都很抱歉。基本上我有一个应用程序，当单击显示按钮时，它会向dom添加一个图像，所有客户端都可以看到实时添加此图像。我的问题是关于连接到服务器的新客户端。让我说我添加了4张图片。 4张图片显示正常。但是，如果在添加这些图像后连接新客户端，则他们看不到页面上显示的图像。因此，如果我点击显示按钮并再添加1个图像，则1个客户端现在可以看到5个图像，而新客户端只能看到1个图像。如何让所有客户端看到相同的东西，无论他们何时连接到服务器？下面的代码没有被破坏，只显示我的应用程序的基本功能，我只是不知道从哪里开始或添加什么。

服务器

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;

Answer 1

当客户端连接到服务器时，您可以向它们发送包含系统初始状态的消息。这可以在class A { int mAId; List<B> mBList; } class B{ int mId; } public void loop(List<A> list){ Observable.fromIterable(list) .flatMapIterable(objs-> objs.mBList) .filter("filtering each b") .toList() .map("add back the list of b to the right a") .subscribe() }事件处理程序中完成。

为此，除了客户端之外，您还需要跟踪服务器上的状态。

使用socket.io同步新客户端

1 个答案: