richardeschloss / Nuxt Socket Io
Licence: mit
Nuxt Socket IO - socket.io client and server module for Nuxt
Stars: ✭ 148
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Nuxt Socket Io
video-group-meeting
WebRTC video chat for multi users using React and Node Express.
Stars: ✭ 40 (-72.97%)
Mutual labels: socket, socket-io
Socket.io Redux
Redux middleware to emit action via socket.io
Stars: ✭ 103 (-30.41%)
Mutual labels: socket, socket-io
Dodgem
A Simple Multiplayer Game, built with Mage Game Engine.
Stars: ✭ 12 (-91.89%)
Mutual labels: socket, socket-io
Socketify
Raw TCP and UDP Sockets API on Desktop Browsers
Stars: ✭ 67 (-54.73%)
Mutual labels: socket, socket-io
Socket.io Rpc
Extend your promises across a network with socket.io
Stars: ✭ 67 (-54.73%)
Mutual labels: socket, socket-io
Graphql Live Query
Realtime GraphQL Live Queries with JavaScript
Stars: ✭ 112 (-24.32%)
Mutual labels: socket, socket-io
socket-chat
This project will help you build a chat app by using the Socket IO library.
Stars: ✭ 36 (-75.68%)
Mutual labels: socket, socket-io
TweetMigration
A WebGL heatmap of global Twitter activity
Stars: ✭ 42 (-71.62%)
Mutual labels: socket, socket-io
Angular Contacts App Example
Full Stack Angular PWA example app with NgRx & NestJS
Stars: ✭ 570 (+285.14%)
Mutual labels: socket, socket-io
SocketIOUnity
A Wrapper for socket.io-client-csharp to work with Unity.
Stars: ✭ 69 (-53.38%)
Mutual labels: socket, socket-io
video-chat
Simple Web Application that offer you to create video meeting room using WebRTC and Socket.
Stars: ✭ 32 (-78.38%)
Mutual labels: socket, socket-io
Progress Bot
High-tech weaponized moe progress delivery bot for IRC, Discord, and web
Stars: ✭ 38 (-74.32%)
Mutual labels: socket, socket-io
Rltm.js
Easily swap realtime providers with a single code base
Stars: ✭ 106 (-28.38%)
Mutual labels: socket, socket-io
nuxt-socket-io
Socket.io client and server module for Nuxt
Features
- Configuration of multiple IO sockets
- Configuration of per-socket namespaces
- Automatic IO Server Registration
- Socket IO Status
- Automatic Error Handling
- Debug logging, enabled with localStorage item 'debug' set to 'nuxt-socket-io'
- Automatic Teardown, enabled by default
- $nuxtSocket vuex module and socket persistence in vuex
- Support for dynamic APIs using the KISS API format
- Support for the IO config in the new Nuxt runtime config (for Nuxt versions >= 2.13)
Important update
- v1.1.14+ uses socket.io 3.x. You may find the migration here
- v1.1.13 uses socket.io 2.x . Clamp the version to 1.1.13 if not ready to update.
Setup
- Add
nuxt-socket-io
dependency to your project
yarn add nuxt-socket-io # or npm install nuxt-socket-io
- Add
nuxt-socket-io
to themodules
section ofnuxt.config.js
{
modules: [
'nuxt-socket-io',
],
io: {
// module options
sockets: [{
name: 'main',
url: 'http://localhost:3000'
}]
}
}
- Use it in your components:
{
mounted() {
this.socket = this.$nuxtSocket({
channel: '/index'
})
/* Listen for events: */
this.socket
.on('someEvent', (msg, cb) => {
/* Handle event */
})
},
methods: {
method1() {
/* Emit events */
this.socket.emit('method1', {
hello: 'world'
}, (resp) => {
/* Handle response, if any */
})
}
}
}
Documentation
But WAIT! There's so much more you can do!! Check out the documentation:
There you will see:
- More details about the features, configuration and usage
- Demos and examples, and link to a codesandbox so you can try things out as you follow along!
- All the old docs that you originally saw here were moved there and better organized. Things should be much easier to follow now!
Resources
- Follow me and the series on medium.com
- Socket.io Client docs here
- Socket.io Server docs here
Development
- Clone this repository
- Install dependencies using
yarn install
ornpm install
- Start development server using
yarn dev
ornpm run dev
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].