CODEWITHSUNDEEP
node.jsreactjssocketssocket.io
thatguy1155
thatguy1155

Reputation: 102

socket io on client side only runs after I save the file containing the connection

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
      });
    });
  
    });

Upvotes: 0

Views: 503

Answers (1)

thatguy1155
thatguy1155

Reputation: 102

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

Upvotes: 0

Related Questions