Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/icebob/vue-websocket
Simple websocket (socket.io) plugin for Vue.js
https://github.com/icebob/vue-websocket
vue vue-websocket vuejs websocket
Last synced: 3 months ago
JSON representation
Simple websocket (socket.io) plugin for Vue.js
- Host: GitHub
- URL: https://github.com/icebob/vue-websocket
- Owner: icebob
- License: mit
- Archived: true
- Created: 2016-11-11T13:24:55.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-09-02T11:49:00.000Z (over 6 years ago)
- Last Synced: 2024-09-19T05:49:25.836Z (5 months ago)
- Topics: vue, vue-websocket, vuejs, websocket
- Language: JavaScript
- Homepage:
- Size: 355 KB
- Stars: 532
- Watchers: 28
- Forks: 75
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vue - vue-websocket - websocket?style=social) - VueJS的Websocket插件 (实用库)
- awesome-github-vue - vue-websocket - VueJS的Websocket插件 (实用库)
- awesome-github-vue - vue-websocket - VueJS的Websocket插件 (实用库)
- awesome - vue-websocket - VueJS的Websocket插件 (实用库)
README
# vue-websocket [](https://www.npmjs.com/package/vue-websocket)
A [socket.io](https://socket.io) plugin for Vue.js.
> **This package does not support native websockets**. At the time, we recommend using [vue-native-websocket](https://github.com/nathantsoi/vue-native-websocket) or [implementing it yourself](https://alligator.io/vuejs/vue-socketio/). For ongoing discussion on this, please visit [#2](https://github.com/icebob/vue-websocket/issues/2).
## Installation
You can either install this package with `npm`, or manually by downloading the primary plugin file.
### npm
```bash
$ npm install -S vue-websocket
```
### Manual
Download the production [`vue-websocket.js`](https://raw.githubusercontent.com/icebob/vue-websocket/master/dist/vue-websocket.js) file. This link is a mirror of the same file found in the `dist` directory of this project.
## Usage
Register the plugin. By default, it will connect to `/`:
```js
import VueWebsocket from "vue-websocket";
Vue.use(VueWebsocket);
```
Or to connect to another address:
```js
Vue.use(VueWebsocket, "ws://otherserver:8080");
```
You can also pass options:
```js
Vue.use(VueWebsocket, "ws://otherserver:8080", {
reconnection: false
});
```
To use it in your components:
```html
export default {
methods: {
add() {
// Emit the server side
this.$socket.emit("add", { a: 5, b: 3 });
},
get() {
this.$socket.emit("get", { id: 12 }, (response) => {
...
});
}
},
socket: {
// Prefix for event names
// prefix: "/counter/",
// If you set `namespace`, it will create a new socket connection to the namespace instead of `/`
// namespace: "/counter",
events: {
// Similar as this.$socket.on("changed", (msg) => { ... });
// If you set `prefix` to `/counter/`, the event name will be `/counter/changed`
//
changed(msg) {
console.log("Something changed: " + msg);
}
/* common socket.io events
connect() {
console.log("Websocket connected to " + this.$socket.nsp);
},
disconnect() {
console.log("Websocket disconnected from " + this.$socket.nsp);
},
error(err) {
console.error("Websocket error!", err);
}
*/
}
}
};
```
## Develop
### Building
This command will build a distributable version in the `dist` directory:
```bash
$ npm run build
```
## Testing
This package uses [`karma`](https://www.npmjs.com/package/karma) for testing. You can run the tests like so:
```bash
$ npm test
```
## Contribution
Please send pull requests improving the usage and fixing bugs, improving documentation and providing better examples, or providing some testing, because these things are important.
## License
`vue-websocket` is available under the [MIT license](https://tldrlegal.com/license/mit-license).
## Contact
Copyright © 2018 Icebob
[](https://github.com/icebob) [](https://twitter.com/Icebobcsi)