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

Last update: Dec 17, 2022

Overview

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

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

Comments

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？

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

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
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:

Chrome DevTools Socket Inspection in Console:

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
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 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?

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

Releases(v0.2.3)

v0.2.3(Aug 29, 2018)

This is a small little fix! Thanks to @rstoenescu in 0d0e8f2e76bd4fe8c6bb77259988b4209fc64b0f, we no longer overload Vue with unnecessary props depending on the version.

Where previously it would have created both beforeCompile and beforeCreate as props regardless of the Vue version, it will now target the correct version and only use the prop for that version.
Source code(tar.gz)
Source code(zip)
v0.2.2(Jan 5, 2017)

Source code(tar.gz)
Source code(zip)
v0.2.1(Dec 14, 2016)

Fix Vue 2.x support issue.
Source code(tar.gz)
Source code(zip)
v0.2.0(Nov 11, 2016)

Source code(tar.gz)
Source code(zip)
v0.1.0(Nov 11, 2016)

Initial release
Source code(tar.gz)
Source code(zip)

Owner

Icebob

Full stack javascript programmer.

GitHub

💬 Realtime Chat application made with Vue 3, Fastify and WebSocket.

?? Chatify Full stack Realtime Chat Application made with Vue 3, Fastify and WebSocket. Preview Frontend Stack: Vue 3 & Composition API Bootstrap Vite

83 Dec 16, 2022

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

924 Dec 30, 2022

Colubrina - a simple open source chat platform written in Vue, Vuetify, NodeJS, and Socket.io.

Colubrina You can try a public instance of Colubrina at colubrina.troplo.com. This is currently beta software, and may not work as expected. Please fi

8 Nov 27, 2022

Vue socket cluster wrapper

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

15 Jul 25, 2021

socket.io와 Vue.js로 구현한 채팅 서비스

개요 : socket.io와 Vue.js로 구현한 채팅 서비스 기간 : 2021.12.22 ~ 2021.12.23 회고 $ cd backend $ npm install $ npm run start $ cd frontend $ npm install $ npm run se

35 Oct 14, 2022

😻 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