Merge pull request #786 from h3poteto/iss-769

closes #769 Add a button to switch websocket for streaming

src/config/locales/de/translation.missing.json

@@ -3,7 +3,8 @@
     "direct": "Direct messages"
   },
   "header_menu": {
-    "settings": "Settings"
+    "settings": "Settings",
+    "switch_streaming": "Use websocket for streaming. If the timeline does not update with streaming, please try it."
   },
   "settings": {
     "timeline": {

src/config/locales/en/translation.json

@@ -73,6 +73,7 @@
       "show_replies": "Show replies",
       "apply": "Apply"
     },
+    "switch_streaming": "Use websocket for streaming. If the timeline does not update with streaming, please try it.",
     "new_toot": "Toot",
     "reload": "Reload",
     "settings": "Settings"

src/config/locales/fr/translation.missing.json

@@ -3,7 +3,8 @@
     "direct": "Direct messages"
   },
   "header_menu": {
-    "settings": "Settings"
+    "settings": "Settings",
+    "switch_streaming": "Use websocket for streaming. If the timeline does not update with streaming, please try it."
   },
   "settings": {
     "timeline": {

src/config/locales/ja/translation.json

@@ -72,6 +72,7 @@
       "show_replies": "返信表示",
       "apply": "適用"
     },
+    "switch_streaming": "Websocketによるストリーミングを行う．もしタイムラインが自動で更新されない場合にはお試しください",
     "new_toot": "トゥート",
     "reload": "再読み込み",
     "settings": "設定"

src/config/locales/ko/translation.missing.json

@@ -3,7 +3,8 @@
     "direct": "Direct messages"
   },
   "header_menu": {
-    "settings": "Settings"
+    "settings": "Settings",
+    "switch_streaming": "Use websocket for streaming. If the timeline does not update with streaming, please try it."
   },
   "settings": {
     "timeline": {

src/config/locales/pl/translation.missing.json

@@ -3,7 +3,8 @@
     "direct": "Direct messages"
   },
   "header_menu": {
-    "settings": "Settings"
+    "settings": "Settings",
+    "switch_streaming": "Use websocket for streaming. If the timeline does not update with streaming, please try it."
   },
   "settings": {
     "timeline": {

src/main/index.js

@@ -390,20 +390,21 @@ ipcMain.on('reset-badge', () => {
 // streaming
 let userStreaming = null
 
-ipcMain.on('start-user-streaming', (event, ac) => {
-  accountManager.getAccount(ac._id)
+ipcMain.on('start-user-streaming', (event, obj) => {
+  const { account, useWebsocket } = obj
+  accountManager.getAccount(account._id)
     .catch((err) => {
       log.error(err)
       event.sender.send('error-start-user-streaming', err)
     })
-    .then((account) => {
+    .then((acct) => {
       // Stop old user streaming
       if (userStreaming !== null) {
         userStreaming.stop()
         userStreaming = null
       }
 
-      userStreaming = new StreamingManager(account)
+      userStreaming = new StreamingManager(acct, useWebsocket)
       userStreaming.startUser(
         (update) => {
           event.sender.send('update-start-user-streaming', update)
@@ -431,20 +432,21 @@ ipcMain.on('stop-user-streaming', (event, _) => {
 
 let directMessagesStreaming = null
 
-ipcMain.on('start-directmessages-streaming', (event, ac) => {
-  accountManager.getAccount(ac._id)
+ipcMain.on('start-directmessages-streaming', (event, obj) => {
+  const { account, useWebsocket } = obj
+  accountManager.getAccount(account._id)
     .catch((err) => {
       log.error(err)
       event.sender.send('error-start-directmessages-streaming', err)
     })
-    .then((account) => {
+    .then((acct) => {
       // Stop old directmessages streaming
       if (directMessagesStreaming !== null) {
         directMessagesStreaming.stop()
         directMessagesStreaming = null
       }
 
-      directMessagesStreaming = new StreamingManager(account)
+      directMessagesStreaming = new StreamingManager(acct, useWebsocket)
       directMessagesStreaming.start(
         'direct',
         '',
@@ -468,20 +470,21 @@ ipcMain.on('stop-directmessages-streaming', (event, _) => {
 
 let localStreaming = null
 
-ipcMain.on('start-local-streaming', (event, ac) => {
-  accountManager.getAccount(ac._id)
+ipcMain.on('start-local-streaming', (event, obj) => {
+  const { account, useWebsocket } = obj
+  accountManager.getAccount(account._id)
     .catch((err) => {
       log.error(err)
       event.sender.send('error-start-local-streaming', err)
     })
-    .then((account) => {
+    .then((acct) => {
       // Stop old local streaming
       if (localStreaming !== null) {
         localStreaming.stop()
         localStreaming = null
       }
 
-      localStreaming = new StreamingManager(account)
+      localStreaming = new StreamingManager(acct, useWebsocket)
       localStreaming.start(
         'public/local',
         '',
@@ -505,20 +508,21 @@ ipcMain.on('stop-local-streaming', (event, _) => {
 
 let publicStreaming = null
 
-ipcMain.on('start-public-streaming', (event, ac) => {
-  accountManager.getAccount(ac._id)
+ipcMain.on('start-public-streaming', (event, obj) => {
+  const { account, useWebsocket } = obj
+  accountManager.getAccount(account._id)
     .catch((err) => {
       log.error(err)
       event.sender.send('error-start-public-streaming', err)
     })
-    .then((account) => {
+    .then((acct) => {
       // Stop old public streaming
       if (publicStreaming !== null) {
         publicStreaming.stop()
         publicStreaming = null
       }
 
-      publicStreaming = new StreamingManager(account)
+      publicStreaming = new StreamingManager(acct, useWebsocket)
       publicStreaming.start(
         'public',
         '',
@@ -543,22 +547,23 @@ ipcMain.on('stop-public-streaming', (event, _) => {
 let listStreaming = null
 
 ipcMain.on('start-list-streaming', (event, obj) => {
-  accountManager.getAccount(obj.account._id)
+  const { listID, account, useWebsocket } = obj
+  accountManager.getAccount(account._id)
     .catch((err) => {
       log.error(err)
       event.sender.send('error-start-list-streaming', err)
     })
-    .then((account) => {
+    .then((acct) => {
       // Stop old list streaming
       if (listStreaming !== null) {
         listStreaming.stop()
         listStreaming = null
       }
 
-      listStreaming = new StreamingManager(account)
+      listStreaming = new StreamingManager(acct, useWebsocket)
       listStreaming.start(
         'list',
-        `list=${obj.list_id}`,
+        `list=${listID}`,
         (update) => {
           event.sender.send('update-start-list-streaming', update)
         },
@@ -580,22 +585,23 @@ ipcMain.on('stop-list-streaming', (event, _) => {
 let tagStreaming = null
 
 ipcMain.on('start-tag-streaming', (event, obj) => {
-  accountManager.getAccount(obj.account._id)
+  const { tag, account, useWebsocket } = obj
+  accountManager.getAccount(account._id)
     .catch((err) => {
       log.error(err)
       event.sender.send('error-start-tag-streaming', err)
     })
-    .then((account) => {
+    .then((acct) => {
       // Stop old tag streaming
       if (tagStreaming !== null) {
         tagStreaming.stop()
         tagStreaming = null
       }
 
-      tagStreaming = new StreamingManager(account)
+      tagStreaming = new StreamingManager(acct, useWebsocket)
       tagStreaming.start(
         'hashtag',
-        `tag=${obj.tag}`,
+        `tag=${tag}`,
         (update) => {
           event.sender.send('update-start-tag-streaming', update)
         },

src/main/streaming_manager.js

@@ -4,11 +4,11 @@ import WebSocket from './websocket'
 import log from 'electron-log'
 
 export default class StreamingManager {
-  constructor (account) {
+  constructor (account, useWebsocket = false) {
     this.account = account
     this.streaming = new Streaming(account)
     this.websocket = new WebSocket(account)
-    this.mastodon = true
+    this.useWebsocket = useWebsocket
   }
 
   /**
@@ -17,18 +17,19 @@ export default class StreamingManager {
   async detectPleroma () {
     const data = await Mastodon.get('/instance', {}, this.account.baseURL + '/api/v1')
     if (data.version.includes('Pleroma')) {
-      this.mastodon = false
       log.info('detect Pleroma')
+      return true
     }
+    return false
   }
 
   startUser (updateCallback, notificationCallback, errCallback) {
     this.detectPleroma()
-      .then(() => {
-        if (this.mastodon) {
-          this._startUserStreaming(updateCallback, notificationCallback, errCallback)
-        } else {
+      .then((isPleroma) => {
+        if (isPleroma || this.useWebsocket) {
           this._startUserSocket(updateCallback, notificationCallback, errCallback)
+        } else {
+          this._startUserStreaming(updateCallback, notificationCallback, errCallback)
         }
       })
       .catch(err => errCallback(err))
@@ -36,11 +37,11 @@ export default class StreamingManager {
 
   start (path, params, updateCallback, errCallback) {
     this.detectPleroma()
-      .then(() => {
-        if (this.mastodon) {
-          this._startStreaming(path, params, updateCallback, errCallback)
-        } else {
+      .then((isPleroma) => {
+        if (isPleroma || this.useWebsocket) {
           this._startSocket(path, params, updateCallback, errCallback)
+        } else {
+          this._startStreaming(path, params, updateCallback, errCallback)
         }
       })
       .catch(err => errCallback(err))

src/renderer/components/TimelineSpace/HeaderMenu.vue

@@ -4,6 +4,9 @@
     <h1>{{ title }}</h1>
   </div>
   <div class="tools">
+    <el-button type="text" class="action" @click="switchStreaming" :title="$t('header_menu.switch_streaming')">
+      <svg :class="useWebsocket ? 'websocket' : 'not-websocket'" width="25" height="18" viewBox="0 0 256 193" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"><path d="M192.44 144.645h31.78V68.339l-35.805-35.804-22.472 22.472 26.497 26.497v63.14zm31.864 15.931H113.452L86.954 134.08l11.237-11.236 21.885 21.885h45.028l-44.357-44.441 11.32-11.32 44.357 44.358V88.296l-21.801-21.801 11.152-11.153L110.685 0H0l31.696 31.696v.084H97.436l23.227 23.227-33.96 33.96L63.476 65.74V47.712h-31.78v31.193l55.007 55.007L64.314 156.3l35.805 35.805H256l-31.696-31.529z" /></svg>
+    </el-button>
     <el-button type="text" class="action" @click="openNewTootModal" :title="$t('header_menu.new_toot')">
       <icon name="regular/edit" scale="1.1"></icon>
     </el-button>
@@ -67,8 +70,11 @@ export default {
     }
   },
   computed: {
-    ...mapState({
-      title: state => state.TimelineSpace.HeaderMenu.title
+    ...mapState('TimelineSpace/HeaderMenu', {
+      title: state => state.title
+    }),
+    ...mapState('TimelineSpace', {
+      useWebsocket: state => state.useWebsocket
     })
   },
   created () {
@@ -129,6 +135,11 @@ export default {
           break
       }
     },
+    switchStreaming () {
+      this.$store.dispatch('TimelineSpace/stopStreamings')
+      this.$store.commit('TimelineSpace/changeUseWebsocket', !this.useWebsocket)
+      this.$store.dispatch('TimelineSpace/startStreamings')
+    },
     openNewTootModal () {
       this.$store.dispatch('TimelineSpace/Modals/NewToot/openModal')
     },
@@ -288,6 +299,18 @@ export default {
       &:hover {
         color: #409eff;
       }
+
+      .not-websocket {
+        fill: var(--theme-secondary-color);
+
+        &:hover {
+          fill: #409eff;
+        }
+      }
+
+      .websocket {
+        fill: #409eff;
+      }
     }
   }
 }

src/renderer/store/TimelineSpace.js

@@ -29,7 +29,8 @@ const TimelineSpace = {
       direct: unreadSettings.Direct.default,
       local: unreadSettings.Local.default,
       public: unreadSettings.Public.default
-    }
+    },
+    useWebsocket: false
   },
   mutations: {
     updateAccount (state, account) {
@@ -55,6 +56,9 @@ const TimelineSpace = {
     },
     updateUnreadNotification (state, settings) {
       state.unreadNotification = settings
+    },
+    changeUseWebsocket (state, use) {
+      state.useWebsocket = use
     }
   },
   actions: {
@@ -200,8 +204,8 @@ const TimelineSpace = {
         dispatch('bindPublicStreaming')
       }
     },
-    startStreamings ({ dispatch, state }, account) {
-      dispatch('startUserStreaming', account)
+    startStreamings ({ dispatch, state }) {
+      dispatch('startUserStreaming')
       if (state.unreadNotification.direct) {
         dispatch('startDirectMessagesStreaming')
       }
@@ -250,9 +254,12 @@ const TimelineSpace = {
         commit('TimelineSpace/SideMenu/changeUnreadNotifications', true, { root: true })
       })
     },
-    startUserStreaming (_, account) {
+    startUserStreaming ({ state }) {
       return new Promise((resolve, reject) => {
-        ipcRenderer.send('start-user-streaming', account)
+        ipcRenderer.send('start-user-streaming', {
+          account: state.account,
+          useWebsocket: state.useWebsocket
+        })
         ipcRenderer.once('error-start-user-streaming', (event, err) => {
           reject(err)
         })
@@ -269,7 +276,10 @@ const TimelineSpace = {
     },
     startLocalStreaming ({ state }) {
       return new Promise((resolve, reject) => {
-        ipcRenderer.send('start-local-streaming', state.account)
+        ipcRenderer.send('start-local-streaming', {
+          account: state.account,
+          useWebsocket: state.useWebsocket
+        })
         ipcRenderer.once('error-start-local-streaming', (event, err) => {
           reject(err)
         })
@@ -286,7 +296,10 @@ const TimelineSpace = {
     },
     startPublicStreaming ({ state }) {
       return new Promise((resolve, reject) => {
-        ipcRenderer.send('start-public-streaming', state.account)
+        ipcRenderer.send('start-public-streaming', {
+          account: state.account,
+          useWebsocket: state.useWebsocket
+        })
         ipcRenderer.once('error-start-public-streaming', (event, err) => {
           reject(err)
         })
@@ -303,7 +316,10 @@ const TimelineSpace = {
     },
     startDirectMessagesStreaming ({ state }) {
       return new Promise((resolve, reject) => {
-        ipcRenderer.send('start-directmessages-streaming', state.account)
+        ipcRenderer.send('start-directmessages-streaming', {
+          account: state.account,
+          useWebsocket: state.useWebsocket
+        })
         ipcRenderer.once('error-start-directmessages-streaming', (event, err) => {
           reject(err)
         })

src/renderer/store/TimelineSpace/Contents/Hashtag/Tag.js

@@ -91,7 +91,8 @@ const Tag = {
       return new Promise((resolve, reject) => {
         ipcRenderer.send('start-tag-streaming', {
           tag: encodeURIComponent(tag),
-          account: rootState.TimelineSpace.account
+          account: rootState.TimelineSpace.account,
+          useWebsocket: rootState.TimelineSpace.useWebsocket
         })
         ipcRenderer.once('error-start-tag-streaming', (event, err) => {
           reject(err)

src/renderer/store/TimelineSpace/Contents/Lists/Show.js

@@ -91,8 +91,9 @@ const Show = {
       })
       return new Promise((resolve, reject) => {
         ipcRenderer.send('start-list-streaming', {
-          list_id: listID,
-          account: rootState.TimelineSpace.account
+          listID: listID,
+          account: rootState.TimelineSpace.account,
+          useWebsocket: rootState.TimelineSpace.useWebsocket
         })
         ipcRenderer.once('error-start-list-streaming', (event, err) => {
           reject(err)