README

Websocket wrapper for Vue (Client) and NodeJS (Server)

🤟 This plugin is inspired by vue-socket.io-extended

About

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.

Installation

It´s the same package for both, server and client

npm install vue-indiesockets

Usage

Server side

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))

})

Client side (vue):

main.ts

import {IndieSocket} from "vue-indiesockets"

Vue.use(new IndieSocket("ws://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>

❓ Docs

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*

❗ Appendix

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

Usage no npm install needed!