我真的不太确定这方面的术语,所以很抱歉造成任何混淆。基本上我有一个应用程序,当显示按钮被点击时,它会添加一个图像到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;
发布于 2018-05-28 14:06:25
当客户端连接到服务器时,您可以向它们发送一条包含系统初始状态的消息。这可以在io.on('connection' ...)
事件处理程序中完成。
但是,为了让它正常工作,除了客户端之外,您还需要跟踪服务器上的状态。
https://stackoverflow.com/questions/50559668
复制相似问题