Simple package for implementing WebSocket into your Vue 3 application using Composition API
Install dependency via npm
npm i vue3-websocket
For connection you should provide WS/WSS address as a string line or an object data
import { createApp } from 'vue'
import App from './App.vue'
import socket from 'vue3-websocket'
const app = createApp(App)
app.use(socket, 'ws://localhost:9000')
/* OR use object data:
app.use(socket, {
secured: false,
host: 'localhost:9000',
protocols: ['soap']
}) */
app.mount('#app')
Then you can use it in your components
<template>
<input v-model="text" />
<button @click="sendMessage">Send a message</button>
</template>
<script setup>
import { ref, inject } from 'vue'
import { onMessage, onOpen, onClose, onError } from 'vue3-websocket'
const text = ref('')
const socket = inject('socket')
const sendMessage = () => socket.value.send(text.value)
onOpen(() => {
console.log('WS connection is stable! ~uWu~')
})
onMessage(message => {
console.log('Got a message from the WS: ', message)
})
onClose(() => {
console.log('No way, connection has been closed ๐ฅ')
})
onError(error => {
console.error('Error: ', error)
})
</script>
You can also inject socket connection directly
const socket = inject('socket')
There is a reactive readyState field available. You can track it with watchers
const readyState = inject('readyState')
watch(() => readyState.value, value => {
console.log('New value: ', value)
})
Connection options interface:
interface Data {
secured?: boolean,
host: string,
debug?: boolean,
reconnect?: boolean,
reconnectTime?: number,
protocols?: string[]
}
If debug is set to true, there will be debug messages in the console about each WS event
Events:
- onOpen
- onMessage
- onClose
- onError