Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
vue-simple-websocket
Advanced tools
Readme
A simple native reconnecting websocket client for Vue.js.
If you like or use this project, please consider supporting my work. Thanks! 🙏🏼
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.
npm install vue-simple-websocket --save
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");
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 connectedonMessage
— event when socket receives a messageonClose
— event when socket is closedonError
— event when socket is closed abnormallyIf 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')
}
}
}
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)
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.
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. :)
FAQs
A simple native reconnecting websocket for Vue.js
The npm package vue-simple-websocket receives a total of 70 weekly downloads. As such, vue-simple-websocket popularity was classified as not popular.
We found that vue-simple-websocket demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
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.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.