socket.io 在连接时发出 [英] socket.io emit on connect
问题描述
socket.io 的新手并尝试使用它.这个应用程序非常简单，当我点击显示按钮时，屏幕上会实时显示一个图像.我有两个问题.
new to socket.io and experimenting with it. this app is pretty simple, when i click the display button, an image appears on the screen in real time. i have 2 questions.
我的主要问题:添加后，所有客户端的图像都显示正常.我现在的目标是让任何连接的新客户端都能看到相同的数据.例如，如果我向屏幕添加 4 个图像，然后连接一个新客户端，则新客户端根本看不到任何图像.似乎我的发射事件没有触发，我不明白为什么.解释我背后的思考过程:
my main question: the images appear fine across all clients when added. my goal now is to get any new clients that connect to see the same data. for example, if i add 4 images to the screen, and then a new client connects, the new client does not see any images at all. seems my emit event is not triggering and i don't understand why. to explain my thought process behind it:
附加图像后，我使用 jquery 克隆 html 容器然后转换为html.
after an image is appended, i clone the html container with jquery then convert to html.
这个数据成功发送到服务器，我存储在我的jqueryImage 变量
this data is successfully sent to the server, which i store in my jqueryImage variable
我创建了另一个事件，但它不会在客户端上触发联系.(我的追加"事件).
i create another event, but it doesn't trigger on a client connection. (my 'append' event).
我的另一个问题:这不会一直发生，但是当有几个客户端连接时(大约 7 个或 8 个 ish)，如果我添加 6 个图像，一些客户端将不同步.有些将显示 6 张图像，有些将显示 4 张，其他 5 张等等.我将此归因于我的连接/延迟，但我对此并不确定.有没有办法检查这是什么以及我如何减轻它?
my other question: this doesn't happen all the time, but when there are a couple of clients connected (about 7 or 8 ish) if i add lets say 6 images, some of the clients will be out of sync. some will show 6 images, some will show 4, others 5, etc. i kind of attribute this to my connection/lag but i'm not absolutely sure on that. is there a way to check what this is and how would i aleviate that?
服务器
// 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 jqueryImage;
// on client connect
io.on('connection', (socket) => {
console.log('made connection!!!');
// events
socket.on('client-image', function(data){
console.log('SERVER ' + data.image);
io.sockets.emit('client-image', data);
});
socket.on('new-client-append', function(data){
jqueryImage = data.clone;
console.log('jqueryImage ' + JSON.stringify(jqueryImage));
});
io.on('connect', (socket) => {
console.log('append emitting!!!');
console.log('current clone ' + JSON.stringify(jqueryImage));
socket.emit('new-client-append', jqueryImage);
});
});
// errors
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';
class Display extends SaveInput {
constructor(){
this.mainContainer = $('.main-container');
this.pGrid = $('.pic-grid-container');
this.display = $('#btn-display');
this.buttons();
}
buttons (){
// click buttons
this.display.click(this.displayEls.bind(this));
}
//display images with names
displayEls() {
let img = 'https://secure.gravatar.com/avatar/22f38e0216f57af53a1776fb2a72c436?s=60&d=wavatar&r=g';
let $picContainer = $('<div class="picture-frame"></div>');
let $newImg = $('<img>');
// clone pic-grid-container
let htmlClone = this.pGrid.clone();
let stringClone = htmlClone.html();
// EMIT
//send image url
socket.emit('client-image', {
image: img
});
// send dom clone to server
socket.emit('new-client-append', {
clone: stringClone
});
// LISTEN
// append image in real time
socket.on('client-image', (data) => {
let foo = data.image.toString();
$newImg.attr('src', foo);
console.log(data);
console.log(foo);
$newImg.appendTo($picContainer);
this.pGrid.append($picContainer);
console.log('after append clone ' + stringClone);
});
socket.on('new-client-append', (data) => {
console.log('NEW CLIENT ENTERED');
});
}
export default Display;
更新:调整服务器代码，服务器现在发出，但客户端看不到它.
UPDATE: adjusted server code, server now emits, but client does not see it.
//SERVER
socket.on('new-client-append', function(data){
jqueryImage = data.clone;
console.log('jqueryImage ' + JSON.stringify(jqueryImage));
});
io.on('connect', (socket) => {
console.log('append emitting!!!');
console.log('current clone ' + JSON.stringify(jqueryImage));
socket.emit('new-client-append', jqueryImage);
});
//client
// send dom clone to server
socket.emit('new-client-append', {
clone: stringClone
});
socket.on('new-client-append', (data) => {
console.log('NEW CLIENT ENTERED');
});
推荐答案
似乎我的发射事件没有触发，我不明白为什么.解释一下我背后的思考过程
seems my emit event is not triggering and i don't understand why. to explain my thought process behind it
您不在服务器上执行 socket.on('connect', ...) (仅用于客户端).当您在服务器上收到 io.on('connect', function(socket) {...}) 事件时，套接字已经连接.只需在 io.on('connect', function(socket) {...}) 中执行 socket.emit().
You don't do socket.on('connect', ...) on the server (that's only for the client). The socket is already connected when you get the io.on('connect', function(socket) {...}) event on the server. Just do the socket.emit() inside the io.on('connect', function(socket) {...}).
io.on('connect', function(socket) {
socket.emit(...);
});
这篇关于socket.io 在连接时发出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
