0.3.0 • Published 1 year ago
nuxt-io-socket v0.3.0
Forked from nuxt-internal-socket, and inspired by @BayBreezy from his video tutorial.
Nuxt IO Socket
Nuxt module that hooks into the listen
hook and creates a socket.io connection.
Why use this module?
You an use this modulke if you want socket functionality in your application but dont want to create a separate socket.io server.
How to use this module?
Follow these steps to get started
- Install the module
npm install nuxt-io-socket
- Add it to yor nuxt.config file
export default defineNuxtConfig({
modules: ["nuxt-io-socket"],
});
- Create your socket function file
mkdir sockets && touch sockets/index.ts
- Create your socket function
import { Server, Socket } from "socket.io";
export default function (io: Server) {
io.on("connection", (socket: Socket) => {
console.log("socket connected", socket.id);
socket.on("join room", (room) => {
socket.join(room);
});
socket.on("disconnect", (reason) => {
console.log("socket disconnected");
io.emit("user disconnected", socket.id);
});
});
}
- Add your socket function to the nuxt.config file & pass params to the module
import { defineNuxtConfig } from "nuxt";
import functions from "./sockets/index";
export default defineNuxtConfig({
modules: ["nuxt-io-socket"],
socketIO: {
/** Required */
socketFunctions: functions,
/** Optional - these are the defaults
*/
serverOptions: {},
/** Optional - these are the defaults
* managerOptions is of type ManagerOptions from the socket.io-client library
*/
clientOptions: {
uri: "/", // If you want to connect to a different server than the one created by this plugin
managerOptions: {},
},
},
});
What this module does?
This module will hook into the listen
hook and create a socket.io connection.
You can access the socket client instance through the useNuxtApp
composable withing your application.
// get socket from nuxt instance
const { $io } = useNuxtApp();
Then in a function you can use the socket client to emit events to the server.
$io.emit("event", { data: "hello" });