Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hlf20010508/vue3-socket.io
Socket.io implementation for Vue.js 3.0
https://github.com/hlf20010508/vue3-socket.io
socket-io vue3
Last synced: about 1 month ago
JSON representation
Socket.io implementation for Vue.js 3.0
- Host: GitHub
- URL: https://github.com/hlf20010508/vue3-socket.io
- Owner: hlf20010508
- License: mit
- Created: 2024-02-07T06:23:48.000Z (10 months ago)
- Default Branch: master
- Last Pushed: 2024-06-27T11:31:21.000Z (5 months ago)
- Last Synced: 2024-10-09T12:34:20.414Z (about 1 month ago)
- Topics: socket-io, vue3
- Language: TypeScript
- Homepage:
- Size: 465 KB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## Description
- Socket.io implementation for Vue.js 3.0.
- Based on [MetinSeylan/Vue-Socket.io](https://github.com/MetinSeylan/Vue-Socket.io).
- **Only Support Vue3.**
## Installation
```bash
npm install @hlf01/vue3-socket.io
```
## Example
### Register
#### Using Connection String
```js
import { createApp } from 'vue'
import App from '@/App.vue'
import Vue3SocketIO from '@hlf01/vue3-socket.io';
const vue3SocketIO = new Vue3SocketIO({
debug: true,
connection: 'https://example.com',
options: { path: "/my-app/" } //Optional options
});
const app = createApp(App)
app.use(vue3SocketIO)
app.mount('#app')
```
#### Using socket.io-client Instance
```js
import { createApp } from 'vue'
import App from '@/App.vue'
import SocketIO from 'socket.io-client';
import Vue3SocketIO from '@hlf01/vue3-socket.io';
const options = { path: "/my-app/" };
const vue3SocketIO = new Vue3SocketIO({
debug: true,
connection: SocketIO('https://example.com', options),
});
const app = createApp(App)
app.use(vue3SocketIO)
app.mount('#app')
```
### Usage
```js
import { onMounted, inject } from "vue";
import { useSocketIO } from "@hlf01/vue3-socket.io";
const socketIO = useSocketIO();
const socket = inject("socket");
onMounted(() => {
socketIO.subscribe("connect", () => {
console.log("Socket connected:", socket.id);
});
// Custom event name
socketIO.subscribe("getMessages", (messages) => {
console.log("Received messages:", messages);
});
});
// All event listeners will be unsubscribed automatically once the component is unmounted
function unsubscribeEvent(eventName) {
// Unsubscribe event for current instance
socketIO.unsubscribe(eventName);
}
function removeEvent(eventName) {
// Unsubscribe event for all instance
socketIO.removeEvent(eventName);
}
function sendMessage(message) {
// Emit event
socket.emit("sendMessage", message);
}
```
## Parameters
**Parameters**|**Types**|**Default**|**Required**|**Description**
-----|-----|-----|-----|-----
connection|String/Socket|`null`|Required|Websocket server url or socket.io-client instance.
debug|Boolean|`false`|Optional|Enable logging for debug.
options|Partial|`null`|Optional|Socket.io options for connection and configuration. See [socket.io-client options documentation](https://socket.io/docs/v4/client-options/) for more information.