https://github.com/wobsoriano/nuxt3-socket.io

Nuxt 3 and Socket.io integration.
https://github.com/wobsoriano/nuxt3-socket.io

nuxt socket-io

Last synced: 7 days ago
JSON representation

Nuxt 3 and Socket.io integration.

• Host: GitHub
• URL: https://github.com/wobsoriano/nuxt3-socket.io
• Owner: wobsoriano
• Created: 2022-12-01T20:15:22.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2024-11-11T21:59:17.000Z (about 2 months ago)
• Last Synced: 2024-12-25T16:05:43.546Z (14 days ago)
• Topics: nuxt, socket-io
• Language: TypeScript
• Homepage:
• Size: 381 KB
• Stars: 59
• Watchers: 3
• Forks: 10
• Open Issues: 3
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# nuxt3-socket.io

> [!WARNING]  

> This module will be deprecated before EOY in favor of the built-in [Nitro WebSocket](https://nitro.unjs.io/guide/websocket).

Just another [socket.io](https://socket.io/) module for Nuxt 3.

This module uses the Vite server in development and `req.socket.server` in production.

## Install

```bash

pnpm add nuxt3-socket.io

```

```ts

export default defineNuxtConfig({

  modules: ['nuxt3-socket.io'],

  socket: {

    // JSON serializable options only.

    // options object to pass when instantiating socket server.

    serverOptions: {}

  }

})

```

## Usage

### Client

```vue

const { $io } = useNuxtApp()

const connected = ref(false)

onMounted(() => {

  const socket = $io('http://localhost:3000')

  

  socket.on('connect', () => {

    connected.value = socket.connected

  })

  socket.on('disconnect', () => {

    connected.value = socket.connected

  })

})

  
Connected: {{ connected }}


```

### Server

By default, this module automatically creates a server instance. If you want access to that server instance, you can expose functions inside `server/socket` and use the `defineIOHandler` wrapper function:

```ts

// server/socket/example.ts

import { defineIOHandler } from 'nuxt3-socket.io/helpers'

export default defineIOHandler((io) => {

  io.on('connection', (socket) => {

    console.log('Connected ', socket.id)

  })

})

```

It's recommended to roll your own socket server if you need more customization other than what is specified here.

## Development

- Run `npm run dev:prepare` to generate type stubs.

- Use `npm run dev` to start [playground](./playground) in development mode.

## License

MIT