Vue, Vuex and sails.io.js (websockets)

vuetify.js -> websockets -> sails.js

Project structure

mkdir projcd proj
sails create sails-api
cd sails-api
sails lift # runs on port 1337
<new terminal>cd proj
vue create vuetify-frontend
cd vuetify-frontend
vue add router
vue add store
vue add vuetify
npm install --save socket.io-client@2
npm install --save sails.io.js
npm run serve # runs on port 8080

Dependencies

npm install –-save socket.io-client@2

Vue & Vuex

vue.config.js

module.exports = {
transpileDependencies: [‘vuetify’],
devServer: {
disableHostCheck: true,
port: 8080,
host: ‘0.0.0.0’,
// use this to proxy axios calls to /api
proxy: {
‘^/api’: {
target: ‘http://localhost:1337/',
changeOrigin: true
},
// use this to proxy ws calls to sails.io
‘^/socket.io’: {
target: ‘http://localhost:1337/',
ws: true,
// changeOrigin: true
},
}
}

src/store/plugins/sailsIOPlugin.js

// kudos: https://lukashermann.dev/writing/socketio-with-vue-and-vuex/
// websocketStorePlugin.js
export default function createSailsIOPlugin (io) {
return store => {
store.$io = io
io.socket.on(‘message’, payload => store.dispatch(‘receiveMessage’, payload))
}
}

src/store/sails.io.js

// src/store/sails.io.js
// var url = ‘http://localhost:1337'
var url = `${location.protocol}//${location.hostname}:${location.port}`
var io = require(‘sails.io.js’)( require(‘socket.io-client’) )
io.sails.url = url
export default io

src/store/index.js

import createSailsIOPlugin from ‘./plugins/sailsIOPlugin’
import io from ‘./sails.io’
const sailsIOPlugin = createSailsIOPlugin(io)
import message from ‘./modules/message’
const store = new Vuex.Store({
namespaced: true,
plugins: [
sailsIOPlugin,
],
modules: {
message,
},
actions: {
init({dispatch}) {
this.$io.socket.get(‘/api/message/subscribe’, function(res, jwres) {
console.debug(res, jwres)
})
console.debug(‘index.js: actions.init()’)
dispatch(“message/getList”, {}, {rootScope: true})
},
receiveMessage ({dispatch}, payload) {
console.debug(“receiveMessage”, payload)
dispatch(`${payload.model}/${payload.action}`, payload.data, {rootScope: true})
},
},
})
export default store
const message = {
namespaced: true,
state: {
loading: false,
list: [],
model: {},
offset: 0,
limit: 100,
error: null,
},
getters: {
messages(state) {
return state.list
},
},
mutations: {
SET_LIST(state, list) { state.list = list },
SET_MODEL(state, model) { state.model = model },
SET_OFFSET(state, offset) { console.debug('SET_OFFSET', offset); state.offset = offset},
SET_LIMIT(state, limit) { console.debug('SET_LIMIT', limit); state.limit = limit },
SET_LOADING(state, loading) { state.loading = loading },
CREATE_MESSAGE(state, message) {
console.debug('CREATE_MESSAGE', message)
let idx = state.list.findIndex(function(i){ i.id == message.id })
console.debug("idx", idx, message)
if(idx > -1) {
state.list[idx] = message
} else {
console.debug('pushing...')
state.list.push(message)
}
}
},
},
actions: {
async getList({state, commit}, payload={}) {
await commit("SET_LOADING", true)
// console.debug("getList", payload, state)
// let {offset, limit} = payload
if(payload.offset) { await commit("SET_OFFSET", payload.offset) }
if(payload.limit) { await commit("SET_LIMIT", payload.limit) }
let params = {
user_id: 2,
offset: state.offset,
limit: state.limit,
}
this.$io.socket.get('/api/message', params, async function(res, jwres) {
if(res.error) console.error('socket ERROR', res, jwres)
await commit("SET_LIST", res.data)
await commit("SET_LOADING", false)
})
},
// send message to server
async post({rootState, commit}, payload) {
let params = {
user_id: rootState.auth.user.id,
text: payload.text,
ref_id: payload.ref_id
}
this.$io.socket.post('/api/message', params, async function(res, jwres){
if(res.error) console.error('websocket error', res, jwres)
await commit("CREATE_MESSAGE", res.data)
})
},
// receive message from server model Message.create()
async create({commit}, payload) {
await commit("CREATE_MESSAGE", payload)
},
async clearError({commit}) {
await commit("SET_ERROR", null)
},
},
}
export default message

Sails.js

config/routes.js

module.exports.routes = {
// in addition to your other routers...
'GET /api/message/subscribe': 'message/subscribe',
'GET /api/message/unsubscribe': 'message/unsubscribe',
'GET /api/message': 'message/get',
'GET /api/message/:id': 'message/get',
'POST /api/message': 'message/create',
}
module.exports = {
fn: async function(inputs, exits, env) {
var {req, res} = env
if (!req.isSocket) {
return res.badRequest();
}
var roomName = id ? `message_${id}` : 'messages'
var socketId = sails.sockets.getId(req)
sails.sockets.join(socketId, roomName, function(err) {
if (err) { return res.serverError(err) }
sails.log.debug("new socket", socketId)
return res.json({
message: 'Subscribed to '+roomName+'!'
})
})
}
}

Some pointers

Subscribe to ‘message’

created() {
this.$store.dispatch('init')
}
Browser Console: receiveMessage

Refs and Kudos

https://lukashermann.dev/writing/socketio-with-vue-and-vuex/

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store