'socket.emit' not sending messages to the client which sent it,while
'socket.broadcast.emit' sending messages to all the clients including the sender.
I cannot figure out what I am missing here.
For the second case, I checked for socket.id while sending the message and logged it when response is received,it turned out to be the same
socket.js
var socket = require('socket.io')(),
socketApi = {};
socketApi.io = socket;
socketApi.io.on('connection',(client) => {
client.on('clientMessage', (msg) => {
console.log('hi');
client.emit('serverMessage',msg);
})
client.on('disconnect',() => {
socketApi.io.emit('serverMessage','client is disconnected');
console.log('disconnected');
})
})
module.exports = socketApi;
client.js
getServerResponse() {
socket.on('serverMessage',(msg) => {
console.log(msg);
})
}
According to the docs broadcast.emit sends to all except the sender and emit sends to the sender only: https://socket.io/docs/emit-cheatsheet/.
I was in the same issue so I ended up calling both:
// socket.io server
io.on('connection', socket => {
socket.on('message', (data) => {
messages.push(data)
socket.broadcast.emit('message', data) // sends to all except the sender
socket.emit('message', data) // sends to the sender
})
})
Related
I've had a problem with receiving message from client to server with using React and ExpressJS. After launch sendMessage function on client side I want to send to server my message, but, I don't know why this message is not being received by my server and io.on("message", (message) => { is not launched with his console.log :/
Here is my code
Server side:
index.ts
const server = http.createServer(app);
export const socketIo = socket(server);
socket.ts
export const socket = (httpServer: any) => {
const io = new Server(httpServer, { cors: { origin: "http://localhost:5000" } });
io.on("connection", (socket) => {
console.log("Socket connected!")
socket.emit('connection', null);
});
io.on("message", (message) => {
console.log("NEW MESSAGE: ", message)
})
}
Client side:
App.tsx
const SOCKET_SERVER = "http://127.0.0.1:3000";
export const socket = socketClient(SOCKET_SERVER);
socket.on('connect', () => {
console.log('CONNECTED WITH BACKEND SOCKET')
})
Chat.tsx
const sendMessage = () => {
const message = form.getFieldsValue()["typedMessage"];
socket.emit("message", message);
form.resetFields();
};
thanks for any help!
io.on("connection", (socket) => {
console.log("Socket connected!")
socket.emit('connection', null);
});
io.on("message", (message) => {
console.log("NEW MESSAGE: ", message)
})
The "connection" is triggered on the server listener and provides a connected socket. The socket is then used to receive messages. This means receiving messages must be done on socket, not on the listener io:
io.on("connection", (socket) => {
console.log("Socket connected!")
socket.emit('connection', null);
socket.on("message", (message) => {
console.log("NEW MESSAGE: ", message)
});
});
I am using socket.io in nodejs for chat system, and I am able to send the message on server in socket.js file in nodejs. But when I emit that message to other users from socket in nodejs. Then this message is not receiving on the client side.
Here is my nodejs code:
var users = [];
const io = require('socket.io')(server, {
pingInterval: 5000,
pingTimeout: 5000
});
io.on('connection', (socket) => {
console.log("User connected: ", socket.id);
socket.on("user_connected", function (id) {
users[id] = socket.id;
io.emit("user_connected", id);
});
socket.on('message', (msg) => {
var socketId = users[msg.friendId];
socket.to(socketId).emit('new_message', msg);
let chat = new ChatData({
user: msg.userId,
friend: msg.friendId,
message: msg.message
});
chat.save().then(() => {
console.log('message saved');
}).catch((err) => {
console.log('error is ', err);
});
});
});
Here is my client side code:
const socket = io("ws://localhost:3000");
socket.on('connect', function() {
socket.emit("user_connected", userId);
});
function sendMessage(message) {
let msg = {
userId: userId,
friendId: friendId,
message: message.trim()
}
// Send to server
socket.emit('message', msg);
}
// Recieve messages
socket.on('new_message', (msg) => {
console.log(msg)
});
Client side socket js library https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.1.2/socket.io.js
Hey super new to socket io and web sockets in general. I have a chatting app scenario with socket io where client emits to the server and the server emits back to the client.
In my case the emits from the client side are picked up on the server side so far no problems.
However on the client side there are some socket.on statements there to pick up stuff from the server. A generic console.log after connection fires, but the other socket.on statements do not.
My thought was that maybe the server side emits aren't firing. Where it gets weird though is that when I change something in the client side file with the socket.on statements, the client side statements will pick up the emits from the server until the next time I refresh the page.
It is also work noting that these client on statements work with the info that was gathered before the save: if something is like
Client-side:
socket.on("message", (data) => {
console.log(foo)
});
and I change it to
socket.on("message", (data) => {
console.log(bar)
});
and then trigger the chain of emits,
the socket.on("message... will fire properly but it will log "foo". My guess is that saving the client side socket file is creating a new connection or something, but I'm curious as to why only the old connection is picking up things from the server and not the new one?
My code for reference:
(client)
const token = localStorage.getItem("messenger-token");
const socket = io.connect('http://localhost:3001', {
query: {token}
});
//const socket = io('http://localhost:3001');
socket.on("connect", () => {
console.log("connected to server");
socket.on("new-message", (data) => {
console.log(data.message)
store.dispatch(setNewMessage(data.message, data.sender));
});
socket.on("mark-as-read", (data) => {
store.dispatch(markedAsRead(data.convoToUpdate,'socket'));
});
});
(server)
//www
const server = http.createServer(app);
app.io.attach(server,{'pingInterval': 2000, 'pingTimeout': 50000});
//app
app.io = require('socket.io')();
require('./sockets')(app)
app.io.use(function(socket, next){
const token = socket.handshake.query.token
if (token) {
jwt.verify(token, process.env.SESSION_SECRET, (err, decoded) => {
if (err) {
return next(new Error('Authentication error'));
}
User.findOne({
where: { id: decoded.id },
}).then((user) => {
return next();
});
});
} else {
return next();
}
})
//sockets module
module.exports = (app) => {
app.io.on("connection", (socket) => {
console.log("connected")
socket.on("new-message", (data) => {
socket.broadcast.emit("new-message", {
message: data.message,
sender: data.sender,
});
socket.on("mark-as-read", (data) => {
socket.broadcast.emit("mark-as-read", {
convoToUpdate:data.convoId
});
});
});
I don't know if this is appropriate but it turns out I didn't have a problem.
the server logic:
socket.broadcast.emit("mark-as-read", {
convoToUpdate:data.convoId
});
});
uses broadcast.emit instead of regular emit. This sends the new info to everyone except the sender as seen in the docs. oops
I have a Vue app that sets up a socket connection when the user logs in.
My component has a method that accesses an outer variable socket I made so that I can emit events in other methods..
onLoginSuccess() {
socket = io(`${process.env.SERVER_URL}`);
socket.emit('login', localStorage.getItem('username'));
socket.on('login-response', (response) => {
if (!response.status) {
alert(response.message);
return false;
} else {
this.$router.push("/home");
this.$refs.form.reset();
}
});
}
However, when I try to do socket.emit in another event it doesn't work:
onSocketLogout() {
console.log('socket logout call', socket)
socket.emit('delete_username_from_array', localStorage.getItem('username') );
},
Socket doesn't seem to be null/undefined on the console and I tried putting the same event emitter on the onLoginSuccess function and it works fine. It just doesn't work when I use socket in other functions or places outside the initial connection.
Here's my socket io server code:
let logged_in_users = [];
const io = require('socket.io')(http);
io.on('connection', function(socket){
console.log(`Socket ${socket.id} connected`);
socket.on('login', function(username){
// check duplicates
if(logged_in_users.includes(username)){
socket.emit('login-response', {
message: 'It seems that you have already logged in on another browser. Please logout first.',
status: false
});
return false;
}else{
socket.emit('login-response', {status: true});
console.log(`${username} logged in`)
logged_in_users.push({ username, id: socket.id });
}
});
// for logout
socket.on('delete_username_from_array', function(username){
console.log('removing username from array')
// delete the username from the array of logged in users
logged_in_users.splice( logged_in_users.indexOf(username), 1 );
});
socket.on('test', () => {
console.log("TEST")
})
socket.on('disconnect', () => {
console.log(`Socket ${socket.id} disconnected`);
console.log(logged_in_users)
})
});
I'm having problem finding the right answer for my problem. I want to had private messaging for every user like Telegram if I may say. Or like notifications on StackOverflow the socket event are only send to specific user.
io.on('connection', function (socket) {
// this will be only sent to a user that just connected
socket.emit('news', { hello: 'world' });
});
But how to send specific message with custom id?
Here my socket.js
const socketio = require('socket.io')
const { redis, saveUser } = require('./redis')
module.exports.listen = function(app){
io = socketio.listen(app)
io.on('connection', socket => {
console.log('connected user', socket.id)
socket.on('join', (payload) => {
redis.get(payload.email (err, socket_id) => {
socket.broadcast.to(socket_id).emit('join', `Hello ${payload.whoChat.name} Chat you`)
})
})
})
return io
}
but this doesn't send anything to my user, if using rooms it will send directly to the rooms and when i look for docs io.to() and io.broadcast.to() can be use with sockets rooms.
so i decided to take it simple but wrong here my server.js rigth now.
io.on('connection', function (socket) {
socket.on('join', payload => {
socket.emit('join', payload)
})
and on client-side
socket.on('join', (payload) => {
// Compare data from socket with local data if match then push the message
// to users who recieve
if ( payload.userId === localData.userId ) {
this.message.push(payload.message)
}
})
but with that actually I send it to all users... how to do it properly and right? and how to save the users socket.id? since socket.id are generated randomly how do you save it for the future request when user disconnect?
You need to maintain a map of _socket_id/user_id_
Server
const sessionsMap = {};
io.on('connection', (socket) => {
socket.emit('askForUserId');
socket.on('userIdReceived', (userId) => {
sessionsMap[userId] = socket.id;
});
socket.on('send', (message) => {
const receiverId = sessionsMap[message.receiverId];
const messageData = message.data;
socket.broadcast.to(receiverId).emit('my message', messageData);
});
});
Client
const userId = 'FOO';
io.on('askForUserId', () => {
io.emit(userId);
});
io.on('send', (message) => {
console.log('You received a message');
console.log(message.data);
});
Note
Make sure to check out the Socket.IO cheatsheet it covers a lot of commands and use cases.