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

Overview

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

Issues
  • Is it possible to use multiple prefixes in one Vue component?

    Is it possible to use multiple prefixes in one Vue component?

    If I have a component which has a socket property as documented in the vue-websocket's README, is there a way to subscribe to listen on multiple prefixes? The documentation only shows how to listen on a single prefix in a component. Thanks!

    opened by ianfiske 3
  • how to use in html?

    how to use in html?

    insert script in html

    <script type="text/javascript" src="../vue-min.js"></script>
    <script type="text/javascript" src="../vue-websocket.js"></script>
    <body>
    <div id="app"></div>
    </body>
    <script>
    Vue.use(VueWebsocket,"ws://a.c/b");
    new Vue({el: '#app'});
    </script>
    

    In F12 network log, can't see any websocket post? but console has no error print. so how to use in this case? thanks

    opened by otizis 2
  • can you please give a full demo?

    can you please give a full demo?

    try many different way and different ways.still not working.can you please give a full demo.thank you.

    opened by jackbbhua 2
  • Vuejs component cannot receive data

    Vuejs component cannot receive data

    What makes line 751 work while line 757 won't?

    image

    opened by neutt22 2
  • vue-touch-keyboard

    vue-touch-keyboard

    The README should be updated since I'm guessing you took the README from another project.

    vue-touch-keyboard is available under the MIT license.

    opened by OmgImAlexis 1
  • is it can connect to other server

    is it can connect to other server

    This plugin can be linked to the suffix URL

    opened by Carolineliu 0
  • Setting secure: true in the Websockets options does not apply and gets set by default to false.

    Setting secure: true in the Websockets options does not apply and gets set by default to false.

    I'm trying to use the package to set a wss:// connection to a domain to be able to use my WebSockets and I'm setting in the options the secure: true part but I'm unable to get my wss connection working. I'll post some screenshots as well as trying to elaborate more.

    Code configuration of the socket: sockets_code


    Chrome DevTools Socket Inspection in Console: chrome_devtools_console


    Chrome DevTools Network: chrome_devtools_network


    Curiously I have set in Constants.real_url the URL of my WebSocket as so: http://... because I was previously using socket.io-client but changed to using this package instead. Now I'm seeing that if it's defined as http:// automagically the secure option is set to false and a ws:// connection, if I define the url as https:// I get a wss:// connection but I am unable to connect correctly I get a Status Code: 400 Bad Request.

    I'm hoping you can help me clear a few doubts about how and why I need to set the hostname with HTTPS to get a wss connection, I was able to set a wss connection only using socket.io-client using my hostname as HTTP. Our WebSockets server need the HTTP protocol to correctly work but using a WSS protocol.

    opened by ArmandoHerra 0
  • Fix eslint errors

    Fix eslint errors

    Using the versions of the packages this was using, eslint threw the following error:

    Error while running ESLint: eslint-plugin-html error: It seems that eslint is not loaded.

    https://github.com/BenoitZugmeyer/eslint-plugin-html/issues/60

    This PR:

    • Updates the packages eslint and eslint-plugin-html to their latest versions
    • Installs the peer dependencies vue-html-loader and vue-style-loader
    • Fixes PR #3 style by adding double quotes and thereby conforming the eslint style guide
    • Builds the latest version of the code and compiles it to the dist
    opened by sam3d 0
  • Access-Control-Allow-Origin

    Access-Control-Allow-Origin

    Access to XMLHttpRequest at 'http://localhost:8089/socket.io/?EIO=3&transport=polling&t=Mgq_ykZ' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

    opened by DingJun007 1
  • How do I join a room ?

    How do I join a room ?

    socket.io allows client to specify a room. Could you provide some examples to join a room please?

    opened by akua28 0
  • How to set option before connect but not in Vue.use ?

    How to set option before connect but not in Vue.use ?

    Look like #7 But we need set option before connect but not in Vue.use

    main.js

    Vue.use(VueWebsocket, null, { autoConnect: false });
    

    App.vue

    created() {
            // Like this?  get the bar before connect
            this.$socket.option = {
                   query: 'foo='+bar,
                   'transports': ['websocket'],
            }
    	this.$socket.open();
    }
    

    Thanks

    opened by RockYuan 0
  • Does this package support IE11?

    Does this package support IE11?

    Does this package support IE11?

    Just found out, https://github.com/nathantsoi/vue-native-websocket don`t support IE11 Now I have to rewrite the implementation

    opened by larsmars 0
  • JWT token setting

    JWT token setting

    Is it possible to set JWT token as header in the connection settings?

    opened by limoli 5
  • Implementation of native websockets

    Implementation of native websockets

    Is it possible to use native websockets instead of socket.io?

    discussion 
    opened by chovy 17
Releases(v0.2.3)
Owner
Icebob
Full stack javascript programmer.
Icebob
native websocket with vuex integration

vue-native-websocket · native websocket implementation for Vuejs 2 and Vuex Install yarn add vue-native-websocket # or npm install vue-native-websoc

Nathan 848 Jul 21, 2021
😻 Socket.io implementation for Vuejs and Vuex

Vue-Socket.io is a socket.io integration for Vuejs, easy to use, supporting Vuex and component level socket consumer managements Demo Chat Application

Metin Seylan 3.6k Jul 23, 2021
Simple websocket (socket.io) plugin for Vue.js

vue-websocket A socket.io plugin for Vue.js. This package does not support native websockets. At the time, we recommend using vue-native-websocket or

Icebob 524 Jul 21, 2021
Admin UI for Socket.IO

Admin UI for Socket.IO

Socket.IO 72 Jul 24, 2021
Vue socket cluster wrapper

Socket cluster implementation for Vuejs 2 leveraging uws Socket cluster documentation Install npm install vue-socket-cluster --save Usage Configuratio

Nigel Tiany 15 Jul 25, 2021
A template combining TypeORM, Express, Socket.io, and NuxtJS with a custom server setup using ts-node. Includes a lot of features to help bootstrap and supercharge your application.

expressive-nuxt Features 99% TypeScript and uses ts-node <3 Database management with TypeORM API with ExpressJS User authenication and sessions Email

Micheal Pearce 23 Jul 19, 2021
Vue integration for the Laravel Echo library.

vue-echo Vue 2 integration for the Laravel Echo library. This Vue plugin injects a Laravel Echo instance into all of your vue instances, allowing for

Kerstens Maxim 231 Apr 8, 2021