Basic frontend changes for chat.

src/components/nav_panel/nav_panel.vue

@@ -7,6 +7,11 @@
             {{ $t("nav.timeline") }}
           </router-link>
         </li>
+        <li v-if='currentUser'>
+          <router-link class="base00-background" to='/chat'>
+            {{ $t("nav.chat") }}
+          </router-link>
+        </li>
         <li v-if='currentUser'>
           <router-link class="base00-background" :to="{ name: 'mentions', params: { username: currentUser.screen_name } }">
             {{ $t("nav.mentions") }}

src/i18n/messages.js

@@ -179,7 +179,11 @@ const fi = {
 }
 
 const en = {
+  chat: {
+    title: 'Chat'
+  },
   nav: {
+    chat: 'Local Chat',
     timeline: 'Timeline',
     mentions: 'Mentions',
     public_tl: 'Public Timeline',

src/main.js

@@ -12,6 +12,7 @@ import UserProfile from './components/user_profile/user_profile.vue'
 import Settings from './components/settings/settings.vue'
 import Registration from './components/registration/registration.vue'
 import UserSettings from './components/user_settings/user_settings.vue'
+import Chat from './components/chat/chat.vue'
 
 import statusesModule from './modules/statuses.js'
 import usersModule from './modules/users.js'
@@ -60,7 +61,8 @@ const store = new Vuex.Store({
     config: configModule
   },
   plugins: [createPersistedState(persistedStateOptions)],
-  strict: process.env.NODE_ENV !== 'production'
+  strict: false // Socket modifies itself, let's ignore this for now.
+  // strict: process.env.NODE_ENV !== 'production'
 })
 
 const i18n = new VueI18n({
@@ -90,7 +92,8 @@ window.fetch('/static/config.json')
       { name: 'mentions', path: '/:username/mentions', component: Mentions },
       { name: 'settings', path: '/settings', component: Settings },
       { name: 'registration', path: '/registration', component: Registration },
-      { name: 'user-settings', path: '/user-settings', component: UserSettings }
+      { name: 'user-settings', path: '/user-settings', component: UserSettings },
+      { name: 'chat', path: '/chat', component: Chat }
     ]
 
     const router = new VueRouter({

src/modules/users.js

@@ -1,6 +1,7 @@
 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) => {
@@ -19,6 +20,9 @@ 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)
@@ -50,7 +54,8 @@ export const defaultState = {
   currentUser: false,
   loggingIn: false,
   users: [],
-  usersObject: {}
+  usersObject: {},
+  socket: null
 }
 
 const users = {
@@ -97,6 +102,13 @@ const users = {
                   // Set our new backend interactor
                   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)
+                  }
+
                   // Start getting fresh tweets.
                   store.dispatch('startFetching', 'friends')