‘Cannot set headers after they are sent to the client’ after second request

I made a web server that serves as a client-side using socket.io-client and express (because I have to use this form in other project).

It emits the string posted and when receiving ‘boom’ emit from io server it responds by sending the string served.

Posting ‘heat_bomb’ works well for the first time, but when I try second time ‘[ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client’ occurs at res.send(data) in socket.on().

Is there a way to refresh whenever post request is generated, so that each request uses independent response?

app.ts

import express from 'express'
import {io} from 'socket.io-client'
import bodyParser from 'body-parser'

const app=express()
const PORT=8080

const socket=io(`http://localhost:2002`, {
    query:{
        hello:"merhaba"
    }
})

app.use(bodyParser.urlencoded({extended:false}))

app.get('/', (req, res)=>{
    res.sendFile(__dirname+`/index.html`)
})
app.post('/heat_bomb', (req, res)=>{
    socket.emit('heat_bomb', req.body.elem)
    socket.on('boom', (data)=>{
        res.send(data)
    })
})

app.listen(PORT, ()=>{
    console.log(`Server Running: ${PORT}`)
})

index.html

$('#heat_button').click(function(){
    console.log('heating bomb')
    $.post('/heat_bomb', {elem: $('#input_number').val()},(data, status)=>{
        console.log(data)
        console.log('heated')
    })
})

Answer

Your /heat_bomb middleware registers a new boom handler for every request on the same globally defined socket. Although your code snippet does not show how the heat_bomb and boom events are connected, I assume that the emit('boom') during the second request re-triggers the heat_bomb handler that was registered during the first request, leading to another res.send for the res from the first request, which is already completed. This leads to the observed error message.