socket.io服务器发送空数据
socket.io服务器发送空数据
提问于 2018-06-09 10:21:07
我有一个实验性的，简单的应用程序，我正在尝试学习socket.io。基本上，当你点击显示按钮时，它所做的一切都会显示一些图像，并且它应该实时发送这些图像，而且当一个新的客户端连接时，它应该会看到与以前连接的客户端看到的图像相同的图像。其工作原理是，我通过jquery克隆html，并将其转换为发送到服务器的字符串。通过一些故障排除，服务器似乎正在接收数据，但发送的数据却为空。
奇怪的是，它有时会起作用。当我通过控制台登录服务器时，收到了数据，但随后数据被清除了，我想这就是所有客户端得到的结果。很难解释，但我会把它放在代码的底部。我有点怀疑这是个时机问题，但我不确定。
服务器代码
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 " }回答 1
Stack Overflow用户
发布于 2018-06-10 07:20:50
我在我的服务器emit处理器上放了一个setTimeout，现在它的工作更稳定了。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50770354
复制相关文章
相似问题