https://github.com/sush1lemon/nuxt-socket.io
Nuxt3 Socket.io Chat
https://github.com/sush1lemon/nuxt-socket.io
nuxt nuxt3 socket-io
Last synced: 3 days ago
JSON representation
Nuxt3 Socket.io Chat
- Host: GitHub
- URL: https://github.com/sush1lemon/nuxt-socket.io
- Owner: sush1lemon
- Created: 2023-04-13T08:32:30.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-01-23T19:13:14.000Z (about 2 years ago)
- Last Synced: 2024-01-23T20:33:52.054Z (almost 2 years ago)
- Topics: nuxt, nuxt3, socket-io
- Language: Vue
- Homepage: https://nuxt-socket.onrender.com/
- Size: 607 KB
- Stars: 18
- Watchers: 2
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Nuxt3 + Socket.io + Turso Chat
### Demo
https://nuxt-socket.onrender.com
### How does this works?
By using a custom nitropack preset and entry files that contains the socket.io server, we can add the socket.io server.
### Related Files
**Nitro Default entry files**
https://github.com/unjs/nitro/blob/main/src/runtime/entries/node-server.ts
https://github.com/unjs/nitro/blob/main/src/runtime/entries/nitro-dev.ts
**Custom Nitropack Preset/Entry**
```
preset/entry.dev.ts
preset/entry.ts // for production build
preset/nitro.config.ts // preset
```
**nitro-socket.ts and nitro-dev.ts changes**
```ts
// preset/entry.ts and preset/entry.dev.ts
import { socketHandler } from "~/socket/handler";
import { Server as SocketServer } from 'socket.io';
// Inside the server.listen callback
const io = new SocketServer(server);
socketHandler(io);
```
**Socket Handler**
```
socket/handler.ts
```
**Nuxt Config Changes**
```ts
plugins: ['~/plugins/socket.client'],
nitro: {
entry: process.env.NODE_ENV == 'production' ? undefined : "../preset/entry.dev",
preset: "./preset",
},
```
You can use your own socket.io client nuxt plugin, or just copy the related files