• This repository has been archived on 03/Oct/2020
  • Stars
    star
    533
  • Rank 83,238 (Top 2 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created about 8 years ago
  • Updated over 6 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Simple websocket (socket.io) plugin for Vue.js

vue-websocket NPM version

VueJS v1.x compatible VueJS v2.x compatible

A socket.io plugin for Vue.js.

This package does not support native websockets. At the time, we recommend using vue-native-websocket or implementing it yourself. For ongoing discussion on this, please visit #2.

Installation

You can either install this package with npm, or manually by downloading the primary plugin file.

npm

$ npm install -S vue-websocket

Manual

Download the production 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 /:

import VueWebsocket from "vue-websocket";
Vue.use(VueWebsocket);

Or to connect to another address:

Vue.use(VueWebsocket, "ws://otherserver:8080");

You can also pass options:

Vue.use(VueWebsocket, "ws://otherserver:8080", {
	reconnection: false
});

To use it in your components:

<script>
	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);
				}
				*/

			}
		}
	};

</script>

Develop

Building

This command will build a distributable version in the dist directory:

$ npm run build

Testing

This package uses karma for testing. You can run the tests like so:

$ 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.

Contact

Copyright © 2018 Icebob

@icebob @icebob

More Repositories

1

vue-express-mongo-boilerplate

⭐ MEVN Full stack JS web app boilerplate with NodeJS, Express, Mongo and VueJS
JavaScript
2,847
star
2

fastest-validator

⚡ The fastest JS validator library for NodeJS
JavaScript
1,420
star
3

vue-touch-keyboard

Virtual keyboard component for Vue.js 2.x. Designed to Raspberry Pi Touch Display
Vue
287
star
4

fakerator

Random fake data generator with localization for Javascript in Node.js and browser
JavaScript
136
star
5

kantab

[WIP] Kanban board application. Powered by Moleculer & Vue.JS
JavaScript
131
star
6

microservices-benchmark

Benchmark of microservices frameworks for NodeJS
JavaScript
38
star
7

benchmarkify

⚡ Benchmark framework for NodeJS
JavaScript
29
star
8

hasznaltauto-figyelo

Autó figyelő alkalmazás a hasznaltauto.hu oldalhoz
JavaScript
25
star
9

fullstack-moleculer

Fullstack moleculer Proof-of-Concept project. Moleculer in browser and on server.
JavaScript
24
star
10

validator-benchmark

JS validators benchmark
JavaScript
23
star
11

moleculer-protect-services

Protect services
JavaScript
22
star
12

propertiesjs

Javascript properties editor
JavaScript
20
star
13

codepen_offline

Codepen's pen offline coding with livereload
JavaScript
18
star
14

layout-editor

Layout Editor in browser
JavaScript
15
star
15

coffeescript_cheatsheet

CoffeeScript cheatsheet
14
star
16

IceTabSet

This is a 'Google Chrome style' TTabSet component for Delphi.
Pascal
8
star
17

docker-chromium-armhf

Docker container with Chromium browser for Raspberry Pi
Dockerfile
6
star
18

moleculer-sandbox

Moleculer sandbox project
JavaScript
5
star
19

go-http-framework-benchmark

Go (Golang) HTTP framework benchmark test
Go
5
star
20

js-perf-benchmark

Javascript Performance Benchmark
JavaScript
4
star
21

moleculer-opentelemetry-demo

OpenTelemetry demo project for Moleculer
JavaScript
4
star
22

moleculer-pattern

[PoC] Pattern-matching middleware for Moleculer
JavaScript
4
star
23

web-vnc-client

Web-based VNC client
JavaScript
3
star
24

bench-bot

👷 Benchmark runner robot. Continuous benchmarking
JavaScript
3
star
25

moleculer-ts-demo

TS demo
TypeScript
2
star
26

ICEdit

ICEdit is a web-based IDE
JavaScript
2
star
27

node-deno-bun-benchmark

JavaScript
1
star
28

kintohub-moleculer

Moleculer example project for KintoHub
JavaScript
1
star
29

stackblitz-moleculer-project-demo

Created with StackBlitz ⚡️
HTML
1
star
30

webpack-moleculer

JavaScript
1
star
31

moleculer-sidecar-hemera

Moleculer <-> Hemera sidecar/gateway
JavaScript
1
star
32

ga-discord-demo

1
star
33

gfs-cleaner

GFS backup retention tool.
Go
1
star