Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Building Real-time Vue App

joe_re
May 23, 2018

Building Real-time Vue App

How to manage Socket.IO events in Vuex.

Vue.js Tokyo v-meetup #7 LT

joe_re

May 23, 2018
Tweet

More Decks by joe_re

Other Decks in Technology

Transcript

  1. Who am I? twitter: @joe_re github: @joe­re ClassDo Inc CTO

    community: Nishinippori.rb, GraphQL Tokyo Organizer
  2. Socket.IO Socket.IO enables real­time bidirectional event­based communication. It works on

    every platform, browser or device, focusing equally on reliability and speed.
  3. Rooms/Namespaces Good Points Enabling specific clients to send events is

    very easy. (All room numbers or only specific members or ...) If one of features causes a fatal error, it doesn't affect other features. Codebase become structured and easy to read
  4. but it may lose readability with product growth.. const sketchpad

    = { namespaced: true, state: { connect: false, ... }, mutations: { SOCKET_CONNECT (state) { ... }, SOCKET_RECEIVE_SHAPE (state, payload) { ... }, ADD_SHAPE (state, payload) { ... }, DELETE_SHAPE (state, payload) { ... }, OTHER_MUTATION(state, payload) { ... }, ... }, actions: { socket_RECEIVE_SHAPE (state, payload) { ... }, socket_CREATE_SHAPE (state, payload) { ... }, socket_ARCHIVE_SHAPE (state, payload) { ... }, fetchSketch (state, payload) { ... }, fetchAllList (state, payload) { ... }, ... } } combining events triggered by socket.IO and view. it makes very complex and difficult to read.
  5. We can set any number of nested modules const store

    = new Vuex.Store({ modules: { account: { namespaced: true, state: { ... }, actions: { ... }, mutations: { ... }, // nested modules modules: { myPage: { state: { ... }, actions: { ... }, mutations: { ... }, }, // nested modules posts: { namespaced: true, state: { ... }, actions: { ... }, mutations: { ... }, } } } } })
  6. adding a prefix of action and mutation as child module

    name. const store = new Vuex.Store({ modules: { videochat, sketchpads, ... } plugins: [ createSocketioPlugin([ ... ]), { actionPrefix: 'socket/', mutationPrefix: 'socket/' }), ] })
  7. separate Socket.IO Events and other ones. const socket = {

    namespaced: true, state: { ... }, mutations: { CONNECT (state) { ... }, RECEIVE_SHAPE (state, payload) { ... }, }, actions: { RECEIVE_SHAPE (state, payload) { ... }, CREATE_SHAPE (state, payload) { ... }, ARCHIVE_SHAPE (state, payload) { ... }, } } const sketchpad = { namespaced: true, modules: socket, state: { ... }, mutations: { ADD_SHAPE (state, payload) { ... }, DELETE_SHAPE (state, payload) { ... }, OTHER_MUTATION(state, payload) { ... } }, actions: { fetchSketch (state, payload) { ... }, fetchAllList (state, payload) { ... } } }
  8. It's very readable but it may feel a bit strange..

    To update view we modify the state in the 'parent'. Child(socket) modules are mostly state­less. Thus children needs to modify the parent's state. It looks like anti­pattern. (but currently we have no problem, it's very limited situation...)