Move chat to own module.

This commit is contained in:
Roger Braun 2017-12-05 11:47:10 +01:00
parent 0e51fac2b2
commit 27be1e0fa3
5 changed files with 55 additions and 22 deletions

View file

@ -1,23 +1,18 @@
const chat = {
data () {
return {
messages: [],
currentMessage: '',
socket: this.$store.state.users.socket,
channel: null
}
},
created () {
this.channel = this.socket.channel('chat:public')
this.channel.on('new_msg', (msg) => {
this.messages.push(msg)
this.messages = this.messages.slice(-19, 20)
})
this.channel.join()
computed: {
messages () {
return this.$store.state.chat.messages
}
},
methods: {
submit(message) {
this.channel.push('new_msg', {text: message}, 10000)
this.$store.state.chat.channel.push('new_msg', {text: message}, 10000)
this.currentMessage = '';
}
}

View file

@ -18,6 +18,7 @@ import statusesModule from './modules/statuses.js'
import usersModule from './modules/users.js'
import apiModule from './modules/api.js'
import configModule from './modules/config.js'
import chatModule from './modules/chat.js'
import VueTimeago from 'vue-timeago'
import VueI18n from 'vue-i18n'
@ -58,7 +59,8 @@ const store = new Vuex.Store({
statuses: statusesModule,
users: usersModule,
api: apiModule,
config: configModule
config: configModule,
chat: chatModule
},
plugins: [createPersistedState(persistedStateOptions)],
strict: false // Socket modifies itself, let's ignore this for now.

View file

@ -1,10 +1,12 @@
import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js'
import {isArray} from 'lodash'
import { Socket } from 'phoenix'
const api = {
state: {
backendInteractor: backendInteractorService(),
fetchers: {}
fetchers: {},
socket: null
},
mutations: {
setBackendInteractor (state, backendInteractor) {
@ -15,6 +17,9 @@ const api = {
},
removeFetcher (state, {timeline}) {
delete state.fetchers[timeline]
},
setSocket (state, socket) {
state.socket = socket
}
},
actions: {
@ -37,6 +42,12 @@ const api = {
const fetcher = store.state.fetchers[timeline]
window.clearInterval(fetcher)
store.commit('removeFetcher', {timeline})
},
initializeSocket (store, token) {
// Set up websocket connection
let socket = new Socket('/socket', {params: {token: token}})
socket.connect()
store.dispatch('initializeChat', socket)
}
}
}

33
src/modules/chat.js Normal file
View file

@ -0,0 +1,33 @@
const chat = {
state: {
messages: [],
channel: null
},
mutations: {
setChannel (state, channel) {
state.channel = channel
},
addMessage (state, message) {
state.messages.push(message)
state.messages = state.messages.slice(-19, 20)
},
setMessages (state, messages) {
state.messages = messages.slice(-19, 20)
}
},
actions: {
initializeChat (store, socket) {
const channel = socket.channel('chat:public')
channel.on('new_msg', (msg) => {
store.commit('addMessage', msg)
})
channel.on('messages', ({messages}) => {
store.commit('setMessages', messages)
})
channel.join()
store.commit('setChannel', channel)
}
}
}
export default chat

View file

@ -1,7 +1,6 @@
import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js'
import { compact, map, each, merge } from 'lodash'
import { set } from 'vue'
import { Socket } from 'phoenix'
// TODO: Unify with mergeOrAdd in statuses.js
export const mergeOrAdd = (arr, obj, item) => {
@ -20,9 +19,6 @@ export const mergeOrAdd = (arr, obj, item) => {
}
export const mutations = {
setSocket (state, socket) {
state.socket = socket
},
setMuted (state, { user: {id}, muted }) {
const user = state.usersObject[id]
set(user, 'muted', muted)
@ -54,8 +50,7 @@ export const defaultState = {
currentUser: false,
loggingIn: false,
users: [],
usersObject: {},
socket: null
usersObject: {}
}
const users = {
@ -103,10 +98,7 @@ const users = {
commit('setBackendInteractor', backendInteractorService(userCredentials))
if (user.token) {
// Set up websocket connection
let socket = new Socket('/socket', {params: {token: user.token}})
socket.connect()
store.commit('setSocket', socket)
store.dispatch('initializeSocket', user.token)
}
// Start getting fresh tweets.