How to create and access Socket IO server in nuxt3 - websocket

Question

Here i will show how to create and access socket io server in newest nuxt v.3, for many developers migration from .2 may be difficult beacause of new features.

Answer 1

This will create your socket io server
// modules/ws-server.ts
import { Server } from 'socket.io'
import { defineNuxtModule } from '#nuxt/kit'
export default defineNuxtModule({
setup(options, nuxt) {
nuxt.hook('listen', async (server) => {
const io = new Server(server)
nuxt.hook('close', () => io.close())
io.on('connection', (socket) => {
console.log(`Socket connected: ${socket.id}`)
})
})
}
})
Now we want to access socket in front-end:
// plugins/socket.io.ts
import io from 'socket.io-client'
export default defineNuxtPlugin(() => {
const socket = io(useRuntimeConfig().url)
return {
provide: {
io: socket
}
}
})
```ts
Now import module & plugin into nuxt config:
// nuxt.config.ts
...
modules: ['./modules/ws-server']
...
Here's example of usage in component:
```vue
<template>
<button #click="func()" class="bt">
<slot>Button</slot>
</button>
</template>
<script slang="ts">
export default {
data: () => ({
}),
methods: {
func() {
this.$io.emit('event_name', {})
}
}
}
</script>
<style lang="scss" scoped>
.bt {
background: #202225;
outline: none;
border: none;
color: #fff;
font-family: proxima-nova, sans-serif;
padding: 5px 10px;
border-radius: 5px;
transition: 200ms;
cursor: pointer;
&:hover {
background: #272a2e;
}
}
</style>