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

Comments
  • 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
  • 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
  • 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
  • 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 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
Releases(v0.2.3)
Owner
Icebob
Full stack javascript programmer.
Icebob
💬 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

Aykut 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

Nathan 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

null 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

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

YeonHee 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

Metin Seylan 3.9k Jan 5, 2023
Admin UI for Socket.IO

Admin UI for Socket.IO

Socket.IO 228 Dec 25, 2022
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 31 Dec 27, 2022
Real Time Chat Application created with VueJS, Express, Socket IO and MongoDB/Mongoose/Mongo Altas.

?? Astro Chat ?? Real Time Chat Application created with VueJS, Express, Socket IO and MongoDB/Mongoose/Mongo Altas. Contents Demo Tech Stack Features

Lu-Vuong Le 88 Jan 3, 2023
Nodejs + Typescript + Socket.io

CALDAV ?? Required: ?? Nodejs LTS, Python 2.7 or Python 3.x, Docker, MtSQL or the same If you get errors, please read the report file .doc, there will

null 2 May 2, 2022
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 Nov 10, 2022
:v::zap: Socket.io bindings for Vue.js and Vuex (inspired by Vue-Socket.io)

Vue-Socket.io-Extended Socket.io bindings for Vue.js 2 and Vuex (inspired by Vue-Socket.io) ⚠️ The alpha version of v5 (with Vue 3 support) has been r

Max Lyashuk 629 Jan 4, 2023
🚀 Lanyard API plugin for Vue to easily track your Discord status. Supports REST and WebSocket methods.

?? Lanyard API plugin for Vue to easily track your Discord status. Supports REST and WebSocket methods.

EGGSY 30 Sep 3, 2022
💬 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

Aykut 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

Nathan 924 Dec 30, 2022
A websocket based remote event system

vue-remote A websocket based remote event system for Vue.js. Works with Vue 2.0, untested with Vue 1.0. Installation 1.) Install package via NPM npm i

Justin MacArthur 22 Oct 22, 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

null 8 Nov 27, 2022
Multiplayer online chess game use Vue , Nodejs, Webpack, Em6, Socket.io, Mongodb, Express

VueChess Users can create private or public games against other real-time player or against the computer by choosing color, time and type of starting,

Gustavo Crespo Sanchez 405 Dec 20, 2022
vue2.x + vue-router2.x+ vuex2.x + vux2.x + express + socket.io immediate chat room

socket.io immediate chat room 中文文档 online preview(username: blue, password: huimin) glance login page group chat page others list private chat page in

blue 43 Jan 22, 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

Nigel Tiany 15 Jul 25, 2021