У меня есть экспериментальное, простое приложение, с которым я играю, чтобы изучить socket.io.в основном, все, что он делает, это отображает некоторые изображения, когда вы нажимаете кнопку отображения, и он должен отсылать это в режиме реального времени, а также, когда новый клиент подключается, он должен видеть те же изображения, что и ранее подключенные клиенты.как это работает, я клонирую html через jquery и преобразую его в строку, которая отправляется на сервер.после некоторого устранения неполадок кажется, что сервер получает данные, но отправляет их пустыми.
Странно то, что это работает иногда .когда я консоль регистрирую сервер, данные получены, но затем данные отключаются, и я думаю, что это то, что получают все клиенты.довольно сложно объяснить, но я положу это внизу кода.Я подозреваю, что это время, но я не уверен.
КОД СЕРВЕРА
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 " }