SocketCluster - `procedure` and `receiver` in a single loop - sockets

Question

I am trying out SocketCluster for an app where I will need both RPC style as well as One way Event based communication. I am following the Basic Usage section https://socketcluster.io/docs/basic-usage/
If I include socket.procedure and socket.receiver in the same listener loop it won't invoke the event. I want to understand why it is like that.
Really appreciate any input that will clear-up the concept.
Thanks!
My Server Side/Node:
const http = require("http");
const finalHandler = require("finalhandler");
const socketCluster = require("socketcluster-server");
const serveStatic = require("serve-static");
let serve = serveStatic("public", {index: ["index.html"]});
let httpServer = http.createServer(function onfRequest(req, res) {
serve(req, res, finalHandler(req, res))
});
let agServer = socketCluster.attach(httpServer);(async () => {
for await (let {socket} of agServer.listener("connection")) {
// RPC
(async () => {
for await (let req of socket.procedure("customProc1")) {
console.log(`Received RPC request`);
req.end("Success");
}
})();
// Event (One Way)
(async () => {
for await (let data of socket.receiver("customEvent1")) {
console.log(`Received Invoke data: ${data}`);
}
})();
}
})()
httpServer.listen(8000, () => {
console.log(`Server Started On : ${new Date().getTime()}`);
});
On the Client side Index.html/JavaScript:
function fireAnEvent() {
socket.transmit("customEvent1", "My Data");
}
async function callRpc() {
await socket.invoke("customProc1", {greetings: "Hey there function!"});
}