I am building a little topic/chat for our application with socket.io in an ionic app. My problem is that each time I create a new topic, I end up with one more first message in the topic, a screenshot will explain it better : My list of topics
First time I create a topic after launching my app
I don't need to submit the new topic actually, just pushing to the add-topic page (or leaving it?) is triggering the "new event?" resulting in adding a new message.
Here is my add-topic page (the concerned part) :
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);
})
Here is the server code :
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()});
});
});
And here are the Chat Service lines handling sending to the server :
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));
}
Sorry for the weird code presentation. So, first I send the topic (salon), when the server is done saving it to the database, it emits back the message with the id of this new topic and then the client send the message as it would if he was actually in the topic which is the normal way of using it. Also, before I had the trouble with two users (one in my browser, one on my iPhone) : if I created a topic in my browser and then on my iPhone, the iPhone would send two first messages. I fixed this by changing
io.emit('add-message', message);
by
socket.emit('add-message', message);