【问题标题】:Socket seems to duplicate the emission套接字似乎复制了发射
【发布时间】:2018-06-17 13:36:16
【问题描述】:

我正在使用 ionic 应用程序中的 socket.io 为我们的应用程序构建一个小主题/聊天。 我的问题是每次我创建一个新主题时,我都会在主题中多了一条第一条消息,截图会更好地解释它:My list of topics

First time I create a topic after launching my app

Second time

我实际上不需要提交新主题,只是推送到添加主题页面(或离开它?)正在触发“新事件?”导致添加新消息。

这是我的添加主题页面(相关部分):

  constructor(public navCtrl: NavController,
          public navParams: NavParams,
          public chatService: ChatService,
          private socket: Socket,
          public events: Events) {

            this.socket.on('add-message', (data) => {
              console.log("recu la reponse = " + JSON.stringify(data));
              this.chatService.sendMsg(data);
            });

            this.chatService.getUserInfo()
            .then((res) => {
                this.user = res
            });
}

this.chatService.sendSalon(newSalon, newMsg)
.then(() => {
  console.log("Message envoyé et contenu : " + newSalon);
  this.navCtrl.setRoot(ChatListPage);
})

这是服务器代码:

io.on('connection', (socket) => {

console.log("socket-chat-connection");

//Receive a salon
socket.on('add-salon', (envoi) => {
salon = envoi.salon;
message = envoi.message;
salon._id = new ObjectID();

db.collection("chatSalons", function(err, collection) {
  collection.save(salon, function(err, result) {
    if(err) {
      console.log('parse : err2 ' + err);
    }
    message.chatId = new ObjectID(salon._id);
    console.log("message.chatId = " + JSON.stringify(message));
    socket.emit('add-message', message);
  });
});
io.emit('salon-received', {text: salon.title, from: salon.userId, created: new Date()});
});
//Receive a message
socket.on('add-message', (message) => {
  message._id = new ObjectID();

  console.log("debut message = " + JSON.stringify(message));

  db.collection("chatMsgs", function(err, collection) {
      collection.save(message,  function(err, result) {
          if (err) {console.log('parse :err1'+err);}
      });
  });
  io.emit('message-received', {text: message.message, from: message.userId, created: new Date()});

});


});

这里是处理发送到服务器的聊天服务行:

mockNewSalon(salon, message) {
  setTimeout(() => {
      console.log(salon);
      console.log("contenu message avant envoi vers le serveur = " + JSON.stringify(message));
      this.socket.emit('add-salon', {salon, message});
  }, Math.random() * 50);
}

mockNewMsg(msg) {

  setTimeout(() => {
      console.log(msg)
      this.socket.emit('add-message', msg);
      //this.events.publish('chat:received', mockMsg, Date.now())
  }, Math.random() * 50)
}

  sendSalon(salon: ChatSalon, message: ChatMessage) {
  console.log("chat service sendSalon = " + salon);
  return new Promise(resolve => setTimeout(() => resolve(salon), Math.random() * 1000))
  .then(() => this.mockNewSalon(salon, message));
}

sendMsg(msg: ChatMessage) {
  return new Promise(resolve => setTimeout(() => resolve(msg), Math.random() * 1000))
  .then(() => this.mockNewMsg(msg));
}

对于奇怪的代码演示感到抱歉。 所以,首先我发送主题(沙龙),当服务器完成将其保存到数据库时,它会发回带有这个新主题 id 的消息,然后客户端发送消息,就像他实际上在主题,这是使用它的正常方式。 此外,在我遇到两个用户(一个在我的浏览器中,一个在我的 iPhone 上)出现问题之前:如果我在浏览器中创建一个主题,然后在我的 iPhone 上创建一个主题,iPhone 将发送两条第一条消息。我通过更改解决了这个问题

io.emit('add-message', message);

通过

socket.emit('add-message', message);

【问题讨论】:

  • 我无法理解代码的运行情况,尤其是主题和消息之间的区别。但是,不同类型的 Socket.io 传输的 Stack Overflow summary 可能有用。 io.emit 发送给所有客户端,包括发送者。如果您的客户端代码在客户端发送消息时更新自己的视图并且从服务器响应该消息,这将导致重复。
  • 我没有复制/粘贴所有内容,只有我将主题发送到服务器的部分,服务器将其保存在数据库中并将 add-message 事件发送回客户端,然后客户端发回本主题的第一条消息。
  • 我确实将 io.emit 更改为 socket.emit,这样只有发送主题的客户端才会收到回复,它确实解决了我的问题。但是我不明白为什么当我进入添加主题页面时收到越来越多的第一条消息。如果我只是在我的应用程序启动时进入添加主题页面并返回主题列表 5 次,那么我将在第一次发送主题时发送 5 条第一条消息。我以为我每次进入 add-topic 页面时都会创建一个新套接字,但使用 nodemon 监视服务器,console.log("socket-chat-c​​onnec") 告诉我事实并非如此。

标签: javascript node.js sockets ionic-framework socket.io


【解决方案1】:

我想我找到了问题并解决了它,我只是不确定这是正确的方法,但可以。 事实上,我每次进入 add-topic 页面时都会开始一个全新的页面,因此是一个新的 socket.on 监听器。 我以为我可以通过返回离子函数this.navCtrl.pop(); 来“删除”页面,但问题仍然存在。

所以我用socket.removeListener('add-message'); 删除了监听器 我不确定每次推送到这个页面时留下一个带有套接字的新页面会有多糟糕,但优化会在以后进行。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-07-17
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-01-26
    相关资源
    最近更新 更多