Building Real­time Vue App 2018/05/23 Vue.js Tokyo v­meetup #7 LT @joe_re

Who am I? twitter: @joe_re github: @joe­re ClassDo Inc CTO community: Nishinippori.rb, GraphQL Tokyo Organizer

What do you select for real­time communications? Polling Comet(Long polling) Server Sent Event Websocket

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.

DEMO

Rooms and Namespaces

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

Where do we manage Socket communications on Vue Apps?

Socket.IO with Vuex

vuex­socketio­plugin https://github.com/joe­re/vuex­socketio­plugin Inspired by Vue­Socket.io https://github.com/MetinSeylan/Vue­Socket.io Integrate Socket.IO events to vuex actions and mutations Support multi connections Map Socket.IO namespaces to Vuex module namespaces

Map Socket.IO namespaces to Vuex module namespaces

Map Socket.IO namespaces to Vuex module namespaces

Map Socket.IO namespaces to Vuex module namespaces

Socket.IO Events Mapping

Socket.IO Events Mapping

Socket.IO Events Mapping

We can completely handle all websocket communications via the Vuex Store

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.

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: { ... }, } } } } })

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/' }), ] })

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) { ... } } }

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

How do you deal with real­time communications? Let's talk after this.

Thank you for your attention!