GithubHelp home page GithubHelp logo

vue-peerjs's Introduction

Vue-PeerJS

PeerJS bindings for Vue.js and Vuex (inspired by Vue-Socket.io-Extended)

Requirements

  • Vue.js >=2.X
  • PeerJS >=1.X
  • Vuex >=2.X (optional, for integration with Vuex only)

Installation

npm install vue-peerjs peerjs

Initialization

ES2015 (Webpack/Rollup/Browserify/Parcel/etc)

import VuePeerJS from 'vue-peerjs';
import Peer from 'peerjs';

Vue.use(VuePeerJS, new Peer({}));

Note: you have to pass instance of peerjs as second argument to prevent library duplication.

UMD (Browser)

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-peerjs"></script>
<script>
  Vue.use(VuePeerJS, new Peer({}));
</script>

Usage

On Vue.js component

new Vue({
  methods: {
    clickButton(val) {
      // this.$peer is `peerjs` instance
      const dataConnection = this.$peer.connect(id);
      this.$peer.on('open', function(id) { ... });
    }
  }
})

Note: Don't use arrow functions for methods or listeners if you are going to emit socket.io events inside. You will end up with using incorrect this.

Typescript

Currently the typing aren't configured correctly to correct for this please add the following shim.

// -- file: src/shims-vue-peerjs.d.ts --- //
import Peer from 'peerjs';

declare module 'vue/types/vue' {
  interface Vue {
    $peer: Peer;
  }
}

Vuex Store integration

To enable Vuex integration just pass the store as the third argument, e.g.:

import store from './store'

Vue.use(VuePeerJS, new Peer({}), { store });

The main idea behind the integration is that mutations and actions are dispatched/committed automatically on Vuex store when a peer/dataConnection/mediaConnection event arrives. Not every mutation and action is invoked. It should follow special formatting convention, so the plugin can easily determine which one should be called.

  • a mutation should start with PEER_ prefix and continue with an uppercase version of the event
  • an action should start with peer_ prefix and continue with camelcase version of the event

@TODO

Server Event Mutation Action
chat message SOCKET_CHAT MESSAGE socket_chatMessage
chat_message SOCKET_CHAT_MESSAGE socket_chatMessage
chatMessage SOCKET_CHATMESSAGE socket_chatMessage
CHAT_MESSAGE SOCKET_CHAT_MESSAGE socket_chatMessage

Check Configuration section if you'd like to use custom transformation.

Note: different server events can commit/dispatch the same mutation or/and the same action. So try to use only one naming convention to avoid possible bugs. In any case, this behavior is going to be changed soon and considered as problematic.

You can use either mutation or action or even both in your store. Don't forget that mutations are synchronous transactions. If you have any async operations inside, it's better to use actions instead. Learn more about Vuex here.

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    id: null,
    error: null,
  },
  mutations: {
    PEER_OPEN(state, id) {
      state.id = id;
    },
    PEER_ERROR(state, error) {
      state.error = error;
    },
  },
  actions: {
    otherAction(context, type) {
      return true;
    },
    PEER_ERROR({ commit, dispatch }, error) {
      dispatch('newError', error);
      commit('NEW_ERROR_RECEIVED', error);
      // ...
    },
  },
})

Namespaced vuex modules

Namespaced modules are supported out-of-the-box when plugin initialized with Vuex store. You can easily divide your store into modules without worrying that mutation or action will not be called. The plugin checks all your modules for mutation and action that are formatted by convention described above and call them all. That means you can listen for the same event from multiple stores with no issue.

Check the following example:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

const messages = {
  state: {
    messages: []
  },
  mutations: {
    PEER_DATA(state, {args, dataConnection}) {
      state.messages.push(args[0]);
    }
  },
  actions: {
    peer_data() {
      console.log('this action will be called');
    }
  },
};

const notifications = {
  state: {
    notifications: []
  },
  mutations: {
    PEER_DATA(state, {args, dataConnection}) {
      state.notifications.push({ type: 'message', payload: args[0] });
    }
  },
}

export default new Vuex.Store({
  modules: {
    messages,
    notifications,
  }
})

That's what will happen, on data from a dataConnection:

  • PEER_DATA mutation commited on messages module
  • PEER_DATA mutation commited on notification module
  • peer_data action dispatched on messages module

Configuration

In addition to store instance, vue-peerjs accepts other options. Here they are:

Option Type Default Description
store Object undefined Vuex store instance, enables vuex integration
actionPrefix String 'peer_' Prepend to event name while converting event to action. Empty string disables prefixing
mutationPrefix String 'PEER_' Prepend to event name while converting event to mutation. Empty string disables prefixing
eventToMutationTransformer Function string => string uppercase function Determines how event name converted to mutation
eventToActionTransformer Function string => string camelcase function Determines how event name converted to action

FYI: You can always access default plugin options if you need it (e.g. re-use default eventToActionTransformer function):

import VuePeerJS from 'vue-peerjs';
VuePeerJS.defaults // -> { actionPrefix: '...', mutationPrefix: '...', ... }

Roadmap

  • Set correct typings
  • Add global mixin

Contribution

I'd be more than happy to see potential contributions, so don't hesitate. If you have any suggestions, ideas or problems feel free to add new issue, but first please make sure your question does not repeat previous ones.

Also a huge shoutout to Vue-Socket.io-Extended! A large portion of the code is based on that package and it was a great example when building this package.

License

See the LICENSE file for license rights and limitations (MIT).

vue-peerjs's People

Contributors

dependabot[bot] avatar jvsomeren avatar triloworld avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.