Basic frontend changes for chat.

config/index.js

@@ -23,9 +23,15 @@ module.exports = {
     assetsPublicPath: '/',
     proxyTable: {
       '/api': {
-        target: 'https://social.heldscal.la/',
+        target: 'htts://localhost:4000/',
         changeOrigin: true,
         cookieDomainRewrite: 'localhost'
+      },
+      '/socket': {
+        target: 'htts://localhost:4000/',
+        changeOrigin: true,
+        cookieDomainRewrite: 'localhost',
+        ws: true
       }
     },
     // CSS Sourcemaps off by default because relative paths are "buggy"

package.json

@@ -21,6 +21,7 @@
     "localforage": "^1.5.0",
     "node-sass": "^3.10.1",
     "object-path": "^0.11.3",
+    "phoenix": "^1.3.0",
     "sanitize-html": "^1.13.0",
     "sass-loader": "^4.0.2",
     "vue": "^2.3.4",

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

yarn.lock

@@ -4226,6 +4226,10 @@ phantomjs-prebuilt@^2.1.3, phantomjs-prebuilt@^2.1.7:
     request-progress "~2.0.1"
     which "~1.2.10"
 
+phoenix@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/phoenix/-/phoenix-1.3.0.tgz#1df2c27f986ee295e37c9983ec28ebac1d7f4a3e"
+
 pify@^2.0.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"