JS Socket.io: Client not catching event

Question

I'm trying to integrate socket.io in my app, I will use it as a way to pass commands and real-time updates from server to client. I am able to connect both client and server and I'm also able to put the client in a room in which I will be emiting my events. However, the client doesn't seem to be catching events.

CLIENT-SIDE:

Connects client when window loads:

const socket = io("/");

socketConnect = function(){
    socket.on("connect", () => {
        console.log(socket.id);
    })
};

window.onload = socketConnect();

Client clicks an upload button and form gets submitted, then client will wait for a confirmation from server:

(NOTE: This is a different .js file from the above code.)

submitForms = function(){

    socket.on("formOK", () => {
        console.log("form was sent");
        socket.disconnect();
    })

    document.getElementById("form1").submit();
}

SERVER-SIDE:

Gets connection and puts client in a room:

//initiates socket.io
io.on("connection", (socket) =>{
    clientID = socket.id;
    roomID = `ROOM:${clientID}`;

    //connects client to room where messages will be exchanged (room name = "ROOM:clientId")
    socket.join(roomID);
});

Server handles form and confirms success to client:

app.post("/uploads/kit-info", (req,res) => {
    //... handles post request

    //sends success confirmation to client
    io.to(roomID).emit("formOK");
    });

The problem:

Everything works fine but I am unable to get the "formOK" confirmation on the client-side. I've run tests and I confirm that the client is indeed in the room, so io.to(roomID).emit("formOK"); should be working, right?

I am not sure what is going wrong.

score 1 · Accepted Answer · answered Jul 14 '23 at 13:35

1

you are immediately invoking the socketConnect function instead of assigning it as a callback.

window.onload = socketConnect() 
window.onload = socketConnect //change it to this.

in your submitForms function, you're registering the event handler for the "formOK" event inside the function. This means that every time submitForms is called, a new event handler is registered. As a result after the first submission, multiple event handlers will be listening for the "formOK" event. you can move the event handler registration outside the submitForms function and call it once when the client connects to the socket. update your client side code to something like this,

const socket = io("/")

socket.on("connect", () => {
  console.log(socket.id)

  socket.on("formOK", () => {
    console.log("form was sent")
    socket.disconnect()
  })
})

window.onload = socketConnect

answered Jul 14 '23 at 13:35

Nazrul Chowdhury

1,483
1
5
11

Hey, thanks for the answer. I re-wrote my code with your tips but still I am not getting the "formOK" confirmation... – poltergaz Jul 14 '23 at 22:48
One thing I did notice is that, after the form submits (when button gets hit), the page reloads and the socket reconnects. Maybe this page reload is what is causing the problem (interrupting the code)? Maybe I can try preventing the page from reloading, I'll see what happens. – poltergaz Jul 14 '23 at 22:54
1

If the page reloads after the form submission, it will disconnect and reconnect the socket, potentially causing issues with event handling. To prevent the page from reloading, you can use the preventDefault() – Nazrul Chowdhury Jul 14 '23 at 23:02
1

Works like a charm now. preventDefault() does not work because prevents the form from being submitted, but I found a little hack that submits the form without reloading (no need for AJAX) in this thread -> https://stackoverflow.com/questions/25983603/how-to-submit-an-html-form-without-redirection, leaving this here in case anyone need to use it as well! – poltergaz Jul 15 '23 at 00:34

JS Socket.io: Client not catching event

1 Answers1