Socket
Socket
Sign inDemoInstall

vue-simple-websocket

Package Overview
Dependencies
0
Maintainers
1
Versions
4
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    vue-simple-websocket

A simple native reconnecting websocket for Vue.js


Version published
Weekly downloads
107
decreased by-64.57%
Maintainers
1
Install size
21.3 kB
Created
Weekly downloads
 

Readme

Source

vue-simple-websocket

A simple native reconnecting websocket client for Vue.js.

If you like or use this project, please consider supporting my work. Thanks! 🙏🏼

Buy Me A Coffee

Usage instructions

These instructions are for usage with Vue 3.x.

For usage information with Vue 2.x, see here. The older version will not receive updates.

Install

npm install vue-simple-websocket --save

Basic Usage

In the Vue app entry file main.js

import VueSimpleWebsocket from "vue-simple-websocket";

const app = createApp(App);
// Configure the server to connect to and reconnection parameters
// Here, we enable reconnection and retry every 5s if connection is lost
app.use(VueSimpleWebsocket, "wss://echo.websocket.org", {
    reconnectEnabled: true,
    reconnectInterval: 5000
});
app.mount("#app");

Usage in Vue components

The plugin adds a $socketClient to your app.

In your components, you can handle websocket events by setting them up in the created or mounted hook.

  • onOpen — event when socket is connected
  • onMessage — event when socket receives a message
  • onClose — event when socket is closed
  • onError — event when socket is closed abnormally

If the connection is broken, the event handlers will continue to work when reconnection succeeds.

// Component.vue
export default {
  name: 'Component',
  //
  created () {
    this.$socketClient.onOpen = () => {
      console.log('socket connected')
    }
    this.$socketClient.onMessage = msg => {
      console.log(JSON.parse(msg.data))
    }
    this.$socketClient.onClose = () => {
      console.log('socket closed')
    }
    this.$socketClient.onError = () => {
      console.log('socket error')
    }
  }
}

Sending messages

send() This calls the websocket send method and can be used for sending string data.

let data = {
  type: 'message',
  text: 'hello there'
}
this.$socketClient.send(JSON.stringify(data))

sendObj()

A convenience method sendObj is available for sending javascript objects:

let data = {
  type: 'message',
  text: 'hello there'
}
this.$socketClient.sendObj(data)

Some important information

TLDR

This package is under development, and I'm still learning how maintaining and and publishing npm packages work. If you have more experience in building and maintaining javascript modules, I'd love to hear from you.

The slightly longer version

This is based on a simple websocket plugin that I wrote for my projects, which I am now releasing as a Vue.js plugin.

This is also a personal project to learn how to build and publish packages on npm. I have deliberately started with a repository from the ground up (instead of going with a template starter) in order to get my hands dirty setting up various components such as babel, rollup as well as tests using jest. As you can probably tell, there is a fair bit of work that needs to be done in order to make this package robust and maintainable.

I'd be super grateful to get pointers from folks who have more experience building and maintaining packages on npm. :)

Keywords

FAQs

Last updated on 28 Dec 2020

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc