Vue 3 WebSocket

[!IMPORTANT] Since v2.0.0 it's not a plugin anymore, but a composable

Simple package for implementing WebSocket into your Vue 3 application using Composition API

Install dependency via pnpm/npm

pnpm add vue3-websocket

or

npm i vue3-websocket

You'll also need zod to be installed

pnpm add -D zod

or

npm i zod --save-dev

For connection you should provide WS/WSS address as a string line or an object data

1<script setup lang="ts">
2import { z } from 'zod'
3import { RouterView } from 'vue-router'
4import { useWebSocket } from 'vue3-websocket'
5
6const { connect, onMessage, onClose } = useWebSocket('ws://127.0.0.1:8000')
7/* OR
8const { connect, onMessage, onClose } = useWebSocket({ host: '127.0.0.1:8000' })
9*/
10
11connect()
12
13const accountSchema = z.object({
14    name: z.string()
15})
16type TAccount = z.infer<typeof accountSchema>
17
18onMessage<TAccount>(accountSchema, ({ name }) => {
19    console.log(`Your name is: ${name}`)
20})
21
22onClose(() => {
23    console.log('Connection closed')
24})
25</script>
26
27<template>
28    <RouterView />
29</template>

Direct manipulation of socket connection

1<script setup lang="ts">
2const { socket } = useWebSocket('ws://127.0.0.1:8000')
3socket.value.close()
4</script>

Providing typed interfaces for incoming messages

1<script setup lang="ts">
2import { z } from 'zod'
3import { watch } from 'vue'
4import { useWebSocket } from 'vue3-websocket'
5
6const { connect, onMessage, onClose } = useWebSocket('ws://127.0.0.1:8000')
7
8connect()
9
10const accountSchema = z.object({
11    name: z.string(),
12    surname: z.string(),
13    age: z.number()
14})
15type TAccount = z.infer<typeof accountSchema>
16
17onMessage<TAccount>(accountSchema, ({ name, surname, age }) => {
18    console.log(`Your account is: ${name}, ${surname}, ${age}`)
19})
20</script>

There is a reactive readyState field available. You can track it using watchers

1<script setup lang="ts">
2const { readyState } = useWebSocket('ws://127.0.0.1:8000')
3
4watch(
5    () => readyState.value,
6    (value) => {
7        console.log('New value: ', value)
8    },
9    { immediate: true }
10)
11</script>

Connection options interfaces

1interface IConnection extends IConnectionOptions {
2    secured?: boolean
3    host: string
4    path?: string
5    debug?: boolean
6}
7
8interface IConnectionOptions {
9    debug?: boolean
10    reconnect?: boolean
11    reconnectDelay?: number
12    protocols?: string[]
13}

If debug is set to true, there will be debug messages in the console about some WS events

Available events:

• onOpen - open connection event
• onMessage - for JSON-based incoming messages
• onRawMessage - for any type of incoming messages
• onClose - close connection event
• onError - error connection event