# vue-socketio

> socket.io implemantation for vuejs and vuex

Latest version **2.1.1-c** (published 2017-11-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-socketio
pnpm add vue-socketio
yarn add vue-socketio
bun add vue-socketio
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.1.1-c |
| Published | 2017-11-21 |
| First published | 2017-11-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Harry Lo |
| Maintainers | psrilakkuma |
| Keywords | vuejs, socket, vue, socket.io, websocket, socket.io-client, realtime, flux, vuex, redux |

## Links

- npm: https://www.npmjs.com/package/vue-socketio
- Repository: https://github.com/apple1324hk/Vue-Socket.io
- Homepage: https://github.com/apple1324hk/Vue-Socket.io#readme
- Issues: https://github.com/apple1324hk/Vue-Socket.io
- npm.io page: https://npm.io/package/vue-socketio

## Dependencies (1)

- [socket.io-client](https://npm.io/package/socket.io-client.md) ^2.0.0

## Alternatives

- [@opentelemetry/exporter-zipkin](https://npm.io/package/@opentelemetry/exporter-zipkin.md) — 14.8M weekly downloads
- [pusher-js](https://npm.io/package/pusher-js.md) — 2.0M weekly downloads
- [browserify](https://npm.io/package/browserify.md) — 1.7M weekly downloads
- [sqs-consumer](https://npm.io/package/sqs-consumer.md) — 1.7M weekly downloads
- [@sanity/eventsource](https://npm.io/package/@sanity/eventsource.md) — 930.8K weekly downloads

## Recent versions

- 2.1.1-c (latest) — 2017-11-21
- 2.1.1-b — 2017-11-20
- 2.1.1-a — 2017-11-20

## README

# Vue-Socketio

[![NPM version](https://img.shields.io/npm/v/vue-socket.io.svg)](https://www.npmjs.com/package/vue-socket.io)
![VueJS v2 compatible](https://img.shields.io/badge/Vuejs%202-compatible-green.svg)
<a href="https://www.npmjs.com/package/vue-socket.io"><img src="https://img.shields.io/npm/dt/vue-socket.io.svg" alt="Downloads"></a>
<img id="dependency_badge" src="https://www.versioneye.com/javascript/metinseylan:vue-socket.io/2.0.1/badge.svg" alt="Dependency Badge" rel="nofollow">
<a href="https://www.npmjs.com/package/vue-socket.io"><img src="https://img.shields.io/npm/l/vue-socket.io.svg" alt="License"></a>

socket.io implementation for Vuejs 2 and Vuex

## Install

``` bash
npm install vue-socketio --save
```

## Usage
#### Configuration
Automatic socket connection from an URL string
``` js
import VueSocketio from 'vue-socketio';
Vue.use(VueSocketio, 'http://socketserver.com:1923');
```

Bind socketio init option, option ref: https://socket.io/docs/client-api/#new-manager-url-options
``` js
let option = {
    query: {
        token: 'abc'
    },
    autoConnect: false
}
Vue.use(VueSocketio, 'http://socketserver.com:1923', option);
```

Bind custom socket.io-client instance
``` js
Vue.use(VueSocketio, socketio('http://socketserver.com:1923'));
```

Enable Vuex integration
``` js
import store from './yourstore'
Vue.use(VueSocketio, socketio('http://socketserver.com:1923'), store);
```

#### On Vuejs instance usage
``` js
var vm = new Vue({
  sockets:{
    connect: function(){
      console.log('socket connected')
    },
    customEmit: function(val){
      console.log('this method was fired by the socket server. eg: io.emit("customEmit", data)')
    }
  },
  methods: {
    clickButton: function(val){
        // $socket is socket.io-client instance
        this.$socket.emit('emit_method', val);
    }
  }
})
```

#### Dynamic socket event listeners
Create a new listener
``` js
this.$options.sockets.event_name = (data) => {
    console.log(data)
}
```
Remove existing listener
``` js
delete this.$options.sockets.event_name;
```

#### Vuex Store integration

Socket **mutations** always have `SOCKET_` prefix.

Socket **actions** always have `socket_` prefix and the socket event name is `camelCased` (ex. `SOCKET_USER_MESSAGE` => `socket_userMessage`) 

You can use either one or another or both in your store. Namespaced modules are supported.

``` js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

export default new Vuex.Store({
    state: {
        connect: false,
        message: null
    },
    mutations:{
        SOCKET_CONNECT: (state,  status ) => {
            state.connect = true;
        },
        SOCKET_USER_MESSAGE: (state,  message) => {
            state.message = message;
        }
    },
    actions: {
        otherAction: (context, type) => {
            return true;
        },
        socket_userMessage: (context, message) => {
            context.dispatch('newMessage', message);
            context.commit('NEW_MESSAGE_RECEIVED', message);
            if (message.is_important) {
                context.dispatch('alertImportantMessage', message);
            }
            ...
        }
    }
})
```

---
_Source: https://npm.io/package/vue-socketio · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._