🤟 This plugin is inspired by vue-socket.io-extended
vue-indiesockets adds WebSocket capabilities to your Vue components and your NodeJS backend. It provides a thin wrapper around both client- and serverside WebSocket implementations handling all the logic required to send and receive data in real-time applications. It does NOT build on top of SocketIO (although it probably could) so there is no failover capability if Websockets are not supported by the client.
It´s the same package for both, server and client
npm install vue-indiesockets
On the backend side you have to pass an Websocket instance to the plugin. I developed it using ws but other implementations should work as well.
import {IndieSocketServer, IndieSocketClient} from "vue-indiesockets"
import WebSocket from "ws"
const server = new IndieSocketServer(new WebSocket.Server({
port: 40001
}), false)
let messages = [] as any[]
server.on("_connected", (client: IndieSocketClient) => {
client.send("chat", messages)
client.on("message", (message) => messages.push({message: message, id: messages.length}))
client.on("seen", (messageId) => messages.filter(m => m.id = messageId).forEach(m => m.seen = true))
client.on("_in", (data) => console.log("From client: " + data))
})
main.ts
import {IndieSocket} from "vue-indiesockets"
Vue.use(new IndieSocket("ws:https://localhost:40001", {debug: false, autoReconnect: true}))
custom component
<template>
<v-app>
<p>Connected: {{ this.$socket.connected }}</p>
<p>{{ chat }}</p>
<input v-model="chatMessage" />
<button @click="$socket.send('message', chatMessag)" :disabled='chatMessage == ""'> Send </button>
</v-app>
</template>
<script lang="ts">
import Vue from "vue";
export default Vue.extend({
data: () => ({
chatMessag: "",
messages: []
}),
sockets: {
chat(message) {
this.$data.chat.push(message);
this.$socket.send("seen", message.id)
}
}
});
</script>
Handlers (Vue and NodeJS)
Handlers are defined in the sockets
object in every Vue instance (see the example above)
Socket handler | Description |
---|---|
_connected | Websocket connected |
_error | Error occured |
_in | On every inbound message |
_out | On every outbound message |
_io | On every inbound and outbound message |
_all | Handles every event (in, out, error, connected, ect.) |
_close | When WebSocket connection is closed |
{customHandlerName} | Your custom handler. Called on appropriate inbound event |
$Socket (Vue)
The $socket
object is available in vue on every vue instance.
Property | Description |
---|---|
connected: boolean | Indicates the connection state |
send(event: string, ...data: any): void | Sends data to the other party. Event defines which handler is called, data is what you want to pass* |
IndieSocketClient (NodeJS)
The IndieSocketClient
is the counterpart to the $socket object in the Vue version.
Function | Description |
---|---|
send(event: string, ...data: any) | Sends data to the other party. Event defines which handler is called, data is what you want to pass* |
- The data can be anything. It is converted to JSON and back automatically. Please be aware that functions of an object get lost in this process