Cannot Established connection to Express Websocket Server from Nuxt JS using nuxt-socket-io - express

Question

I have this following problem where I cannot establish connection from nuxt js app to express websocket
Here's my following code :
Server Side (websocket server) at index.js
const express = require('express');
const app = express();
const http = require('http').createServer(app);
const io = require('socket.io')(http, {
cors: {
origin: '*'
}
});
const port = 4000;
http.listen(port, () => {
console.log('server is up');
io.on('connection', (socket) => {
console.log('Connection established');
console.log(socket.id);
})
})
Client Side (nuxt js)
In nuxt.config.js
...
modules: [
...
'nuxt-socket-io'
]
...
io: {
sockets: [{
name: 'arena',
default: true,
url: 'http://localhost:4000',
}]
}
In component that uses websocket :
<template></template>
<script>
export default {
data() {
return {
socket: {},
};
},
mounted() {
this.socket = this.$nuxtSocket({
name: "arena",
channel: "/index",
reconnection: false,
});
this.socket.emit('connection')
},
};
</script>
The error I got from console log is :
GET http://localhost:4000/socket.io/?EIO=4&transport=polling&t=OMPZ7YZ&sid=WOhe-UjXtVOJoPlIAAAG 400 (Bad Request)
And the console.log from the server does not produce any output
What did I missed?