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

View file

@ -18,6 +18,7 @@ import statusesModule from './modules/statuses.js'
import usersModule from './modules/users.js' import usersModule from './modules/users.js'
import apiModule from './modules/api.js' import apiModule from './modules/api.js'
import configModule from './modules/config.js' import configModule from './modules/config.js'
import chatModule from './modules/chat.js'
import VueTimeago from 'vue-timeago' import VueTimeago from 'vue-timeago'
import VueI18n from 'vue-i18n' import VueI18n from 'vue-i18n'
@ -58,7 +59,8 @@ const store = new Vuex.Store({
statuses: statusesModule, statuses: statusesModule,
users: usersModule, users: usersModule,
api: apiModule, api: apiModule,
config: configModule config: configModule,
chat: chatModule
}, },
plugins: [createPersistedState(persistedStateOptions)], plugins: [createPersistedState(persistedStateOptions)],
strict: false // Socket modifies itself, let's ignore this for now. 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 backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js'
import {isArray} from 'lodash' import {isArray} from 'lodash'
import { Socket } from 'phoenix'
const api = { const api = {
state: { state: {
backendInteractor: backendInteractorService(), backendInteractor: backendInteractorService(),
fetchers: {} fetchers: {},
socket: null
}, },
mutations: { mutations: {
setBackendInteractor (state, backendInteractor) { setBackendInteractor (state, backendInteractor) {
@ -15,6 +17,9 @@ const api = {
}, },
removeFetcher (state, {timeline}) { removeFetcher (state, {timeline}) {
delete state.fetchers[timeline] delete state.fetchers[timeline]
},
setSocket (state, socket) {
state.socket = socket
} }
}, },
actions: { actions: {
@ -37,6 +42,12 @@ const api = {
const fetcher = store.state.fetchers[timeline] const fetcher = store.state.fetchers[timeline]
window.clearInterval(fetcher) window.clearInterval(fetcher)
store.commit('removeFetcher', {timeline}) 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 backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js'
import { compact, map, each, merge } from 'lodash' import { compact, map, each, merge } from 'lodash'
import { set } from 'vue' import { set } from 'vue'
import { Socket } from 'phoenix'
// TODO: Unify with mergeOrAdd in statuses.js // TODO: Unify with mergeOrAdd in statuses.js
export const mergeOrAdd = (arr, obj, item) => { export const mergeOrAdd = (arr, obj, item) => {
@ -20,9 +19,6 @@ export const mergeOrAdd = (arr, obj, item) => {
} }
export const mutations = { export const mutations = {
setSocket (state, socket) {
state.socket = socket
},
setMuted (state, { user: {id}, muted }) { setMuted (state, { user: {id}, muted }) {
const user = state.usersObject[id] const user = state.usersObject[id]
set(user, 'muted', muted) set(user, 'muted', muted)
@ -54,8 +50,7 @@ export const defaultState = {
currentUser: false, currentUser: false,
loggingIn: false, loggingIn: false,
users: [], users: [],
usersObject: {}, usersObject: {}
socket: null
} }
const users = { const users = {
@ -103,10 +98,7 @@ const users = {
commit('setBackendInteractor', backendInteractorService(userCredentials)) commit('setBackendInteractor', backendInteractorService(userCredentials))
if (user.token) { if (user.token) {
// Set up websocket connection store.dispatch('initializeSocket', user.token)
let socket = new Socket('/socket', {params: {token: user.token}})
socket.connect()
store.commit('setSocket', socket)
} }
// Start getting fresh tweets. // Start getting fresh tweets.