From 319bb4ac2895b8eb62da42e3f95addc9bb67b1a0 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 24 Nov 2019 18:50:28 +0200 Subject: initial streaming work --- src/services/api/api.service.js | 40 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 40 insertions(+) (limited to 'src/services/api/api.service.js') diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js index 8f5eb416..7f27564f 100644 --- a/src/services/api/api.service.js +++ b/src/services/api/api.service.js @@ -71,6 +71,7 @@ const MASTODON_MUTE_CONVERSATION = id => `/api/v1/statuses/${id}/mute` const MASTODON_UNMUTE_CONVERSATION = id => `/api/v1/statuses/${id}/unmute` const MASTODON_SEARCH_2 = `/api/v2/search` const MASTODON_USER_SEARCH_URL = '/api/v1/accounts/search' +const MASTODON_STREAMING = '/api/v1/streaming' const oldfetch = window.fetch @@ -932,6 +933,45 @@ const search2 = ({ credentials, q, resolve, limit, offset, following }) => { }) } +export const getMastodonSocketURI = ({ credentials, stream, args = {} }) => { + return Object.entries({ + ...(credentials + ? { access_token: credentials } + : {} + ), + stream, + ...args + }).reduce((acc, [key, val]) => { + return acc + `${key}=${val}&` + }, MASTODON_STREAMING + '?') +} + +const MASTODON_STREAMING_EVENTS = new Set([ + 'update', + 'notification', + 'delete', + 'filters_changed' +]) + +export const handleMastoWS = (wsEvent) => { + console.debug('Event', wsEvent) + const { data } = wsEvent + if (!data) return + const parsedEvent = JSON.parse(data) + const { event, payload } = parsedEvent + if (MASTODON_STREAMING_EVENTS.has(event)) { + const data = payload ? JSON.parse(payload) : null + if (event === 'update') { + return { event, status: parseStatus(data) } + } else if (event === 'notification') { + return { event, notification: parseNotification(data) } + } + } else { + console.warn('Unknown event', wsEvent) + return null + } +} + const apiService = { verifyCredentials, fetchTimeline, -- cgit v1.2.3-70-g09d2 From 13fc2612ae388dec682829ae2b6211bb3cb8ccb3 Mon Sep 17 00:00:00 2001 From: Wyatt Benno Date: Thu, 5 Dec 2019 11:48:37 +0900 Subject: Change 403 messaging --- src/components/timeline/timeline.js | 7 ++++++- src/components/timeline/timeline.vue | 19 ++++++++++++++++--- src/i18n/en.json | 2 ++ src/modules/statuses.js | 7 +++++++ src/services/api/api.service.js | 10 ++++++++-- .../timeline_fetcher/timeline_fetcher.service.js | 6 ++++++ 6 files changed, 45 insertions(+), 6 deletions(-) (limited to 'src/services/api/api.service.js') diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js index 27a9a55e..6086336c 100644 --- a/src/components/timeline/timeline.js +++ b/src/components/timeline/timeline.js @@ -36,7 +36,12 @@ const Timeline = { } }, computed: { - timelineError () { return this.$store.state.statuses.error }, + timelineError () { + return this.$store.state.statuses.error + }, + error403 () { + return this.$store.state.statuses.error403 + }, newStatusCount () { return this.timeline.newStatusCount }, diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue index 93f6f570..1c45d0f6 100644 --- a/src/components/timeline/timeline.vue +++ b/src/components/timeline/timeline.vue @@ -11,15 +11,22 @@ > {{ $t('timeline.error_fetching') }} +
+ {{ $t('timeline.error_403') }} +
@@ -67,12 +74,18 @@ {{ $t('timeline.no_more_statuses') }}
{{ $t('timeline.load_older') }}
 + +
{{ $t('timeline.error_403_message') }}
+
({ notifications: emptyNotifications(), favorites: new Set(), error: false, + error403: false, timelines: { mentions: emptyTl(), public: emptyTl(), @@ -479,6 +480,9 @@ export const mutations = { setError (state, { value }) { state.error = value }, + set403Error (state, { value }) { + state.error403 = value + }, setNotificationsLoading (state, { value }) { state.notifications.loading = value }, @@ -528,6 +532,9 @@ const statuses = { setError ({ rootState, commit }, { value }) { commit('setError', { value }) }, + set403Error ({ rootState, commit }, { value }) { + commit('set403Error', { value }) + }, setNotificationsLoading ({ rootState, commit }, { value }) { commit('setNotificationsLoading', { value }) }, diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js index 8f5eb416..a2aa802f 100644 --- a/src/services/api/api.service.js +++ b/src/services/api/api.service.js @@ -532,13 +532,19 @@ const fetchTimeline = ({ return fetch(url, { headers: authHeaders(credentials) }) .then((data) => { - if (data.ok) { + if (data.ok || data.status === 403) { return data } throw new Error('Error fetching timeline', data) }) .then((data) => data.json()) - .then((data) => data.map(isNotifications ? parseNotification : parseStatus)) + .then((data) => { + if (!data.error) { + return data.map(isNotifications ? parseNotification : parseStatus) + } else { + return data + } + }) } const fetchPinnedStatuses = ({ id, credentials }) => { diff --git a/src/services/timeline_fetcher/timeline_fetcher.service.js b/src/services/timeline_fetcher/timeline_fetcher.service.js index 9eb30c2d..9352d73a 100644 --- a/src/services/timeline_fetcher/timeline_fetcher.service.js +++ b/src/services/timeline_fetcher/timeline_fetcher.service.js @@ -6,6 +6,7 @@ const update = ({ store, statuses, timeline, showImmediately, userId }) => { const ccTimeline = camelCase(timeline) store.dispatch('setError', { value: false }) + store.dispatch('set403Error', { value: false }) store.dispatch('addNewStatuses', { timeline: ccTimeline, @@ -45,6 +46,11 @@ const fetchAndUpdate = ({ return apiService.fetchTimeline(args) .then((statuses) => { + // Change messaging if not public + if (statuses.error) { + store.dispatch('set403Error', { value: true }) + return + } if (!older && statuses.length >= 20 && !timelineData.loading && numStatusesBeforeFetch > 0) { store.dispatch('queueFlush', { timeline: timeline, id: timelineData.maxId }) } -- cgit v1.2.3-70-g09d2 From 505fb260610e557e27bbc5d27515337ea07e0e3e Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 8 Dec 2019 19:18:38 +0200 Subject: better wrapper for websocket --- src/modules/api.js | 43 ++++++++++---------- src/services/api/api.service.js | 46 +++++++++++++++++++++- .../backend_interactor_service.js | 15 ++----- 3 files changed, 69 insertions(+), 35 deletions(-) (limited to 'src/services/api/api.service.js') diff --git a/src/modules/api.js b/src/modules/api.js index 185c9db6..593f8498 100644 --- a/src/modules/api.js +++ b/src/modules/api.js @@ -34,36 +34,35 @@ const api = { // MastoAPI 'User' sockets startMastoUserSocket (store) { const { state, dispatch } = store - state.mastoUserSocket = state.backendInteractor - .startUserSocket({ - store, - onMessage: (message) => { - if (!message) return // pings - if (message.event === 'notification') { - dispatch('addNewNotifications', { - notifications: [message.notification], - older: false - }) - } else if (message.event === 'update') { - dispatch('addNewStatuses', { - statuses: [message.status], - userId: false, - showImmediately: false, - timeline: 'friends' - }) - } + state.mastoUserSocket = state.backendInteractor.startUserSocket({ store }) + state.mastoUserSocket.addEventListener( + 'message', + ({ detail: message }) => { + if (!message) return // pings + if (message.event === 'notification') { + dispatch('addNewNotifications', { + notifications: [message.notification], + older: false + }) + } else if (message.event === 'update') { + dispatch('addNewStatuses', { + statuses: [message.status], + userId: false, + showImmediately: false, + timeline: 'friends' + }) } - }) - state.mastoUserSocket.addEventListener('error', error => { + } + ) + state.mastoUserSocket.addEventListener('error', ({ detail: error }) => { console.error('Error in MastoAPI websocket:', error) }) - state.mastoUserSocket.addEventListener('close', closeEvent => { + state.mastoUserSocket.addEventListener('close', ({ detail: closeEvent }) => { const ignoreCodes = new Set([ 1000, // Normal (intended) closure 1001 // Going away ]) const { code } = closeEvent - console.debug('Socket closure event:', closeEvent) if (ignoreCodes.has(code)) { console.debug(`Not restarting socket becasue of closure code ${code} is in ignore list`) } else { diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js index 7f27564f..c6818df4 100644 --- a/src/services/api/api.service.js +++ b/src/services/api/api.service.js @@ -953,8 +953,52 @@ const MASTODON_STREAMING_EVENTS = new Set([ 'filters_changed' ]) +// A thin wrapper around WebSocket API that allows adding a pre-processor to it +// Uses EventTarget and a CustomEvent to proxy events +export const ProcessedWS = ({ + url, + preprocessor = handleMastoWS, + id = 'Unknown' +}) => { + const eventTarget = new EventTarget() + const socket = new WebSocket(url) + if (!socket) throw new Error(`Failed to create socket ${id}`) + const proxy = (original, eventName, processor = a => a) => { + original.addEventListener(eventName, (eventData) => { + eventTarget.dispatchEvent(new CustomEvent( + eventName, + { detail: processor(eventData) } + )) + }) + } + socket.addEventListener('open', (wsEvent) => { + console.debug(`[WS][${id}] Socket connected`, wsEvent) + }) + socket.addEventListener('error', (wsEvent) => { + console.debug(`[WS][${id}] Socket errored`, wsEvent) + }) + socket.addEventListener('close', (wsEvent) => { + console.debug( + `[WS][${id}] Socket disconnected with code ${wsEvent.code}`, + wsEvent + ) + }) + socket.addEventListener('message', (wsEvent) => { + console.debug( + `[WS][${id}] Message received`, + wsEvent + ) + }) + + proxy(socket, 'open') + proxy(socket, 'close') + proxy(socket, 'message', preprocessor) + proxy(socket, 'error') + + return eventTarget +} + export const handleMastoWS = (wsEvent) => { - console.debug('Event', wsEvent) const { data } = wsEvent if (!data) return const parsedEvent = JSON.parse(data) diff --git a/src/services/backend_interactor_service/backend_interactor_service.js b/src/services/backend_interactor_service/backend_interactor_service.js index 33b79a40..b7372ed0 100644 --- a/src/services/backend_interactor_service/backend_interactor_service.js +++ b/src/services/backend_interactor_service/backend_interactor_service.js @@ -1,4 +1,4 @@ -import apiService, { getMastodonSocketURI, handleMastoWS } from '../api/api.service.js' +import apiService, { getMastodonSocketURI, ProcessedWS } from '../api/api.service.js' import timelineFetcherService from '../timeline_fetcher/timeline_fetcher.service.js' import notificationsFetcher from '../notifications_fetcher/notifications_fetcher.service.js' import followRequestFetcher from '../../services/follow_request_fetcher/follow_request_fetcher.service' @@ -20,19 +20,10 @@ const backendInteractorService = credentials => ({ return followRequestFetcher.startFetching({ store, credentials }) }, - startUserSocket ({ store, onMessage }) { + startUserSocket ({ store }) { const serv = store.rootState.instance.server.replace('http', 'ws') const url = serv + getMastodonSocketURI({ credentials, stream: 'user' }) - const socket = new WebSocket(url) - console.debug('Socket created:', socket) - if (socket) { - socket.addEventListener('open', (wsEvent) => console.debug('MastoAPI User WebSocket connection established')) - socket.addEventListener('message', (wsEvent) => onMessage(handleMastoWS(wsEvent))) - socket.addEventListener('error', (error) => console.error('MastoApi User WebSocket Error:', error)) - return socket - } else { - throw new Error('failed to connect to socket') - } + return ProcessedWS({ url, id: 'User' }) }, ...Object.entries(apiService).reduce((acc, [key, func]) => { -- cgit v1.2.3-70-g09d2 From e86af0c965d459d016d638c0822bc9af6a6c0ee1 Mon Sep 17 00:00:00 2001 From: Wyatt Benno Date: Mon, 9 Dec 2019 09:02:34 +0900 Subject: Change naming, make more general --- src/components/timeline/timeline.js | 4 ++-- src/components/timeline/timeline.vue | 12 ++++++------ src/modules/statuses.js | 10 +++++----- src/services/api/api.service.js | 5 +---- src/services/timeline_fetcher/timeline_fetcher.service.js | 6 +++--- 5 files changed, 17 insertions(+), 20 deletions(-) (limited to 'src/services/api/api.service.js') diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js index 6086336c..9a53acd6 100644 --- a/src/components/timeline/timeline.js +++ b/src/components/timeline/timeline.js @@ -39,8 +39,8 @@ const Timeline = { timelineError () { return this.$store.state.statuses.error }, - error403 () { - return this.$store.state.statuses.error403 + errorData () { + return this.$store.state.statuses.errorData }, newStatusCount () { return this.timeline.newStatusCount diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue index e4d453b8..d9f4025d 100644 --- a/src/components/timeline/timeline.vue +++ b/src/components/timeline/timeline.vue @@ -12,21 +12,21 @@ {{ $t('timeline.error_fetching') }}
{{ $t('timeline.error_403') }}
@@ -74,17 +74,17 @@ {{ $t('timeline.no_more_statuses') }}
{{ $t('timeline.load_older') }}
 -
{{ error403 }}
+
{{ errorData }}
({ notifications: emptyNotifications(), favorites: new Set(), error: false, - error403: false, + errorData: '', timelines: { mentions: emptyTl(), public: emptyTl(), @@ -480,8 +480,8 @@ export const mutations = { setError (state, { value }) { state.error = value }, - set403Error (state, { value }) { - state.error403 = value + setErrorData (state, { value }) { + state.errorData = value }, setNotificationsLoading (state, { value }) { state.notifications.loading = value @@ -532,8 +532,8 @@ const statuses = { setError ({ rootState, commit }, { value }) { commit('setError', { value }) }, - set403Error ({ rootState, commit }, { value }) { - commit('set403Error', { value }) + setErrorData ({ rootState, commit }, { value }) { + commit('setErrorData', { value }) }, setNotificationsLoading ({ rootState, commit }, { value }) { commit('setNotificationsLoading', { value }) diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js index a2aa802f..45b63caf 100644 --- a/src/services/api/api.service.js +++ b/src/services/api/api.service.js @@ -532,10 +532,7 @@ const fetchTimeline = ({ return fetch(url, { headers: authHeaders(credentials) }) .then((data) => { - if (data.ok || data.status === 403) { - return data - } - throw new Error('Error fetching timeline', data) + return data }) .then((data) => data.json()) .then((data) => { diff --git a/src/services/timeline_fetcher/timeline_fetcher.service.js b/src/services/timeline_fetcher/timeline_fetcher.service.js index b7952050..1aaae563 100644 --- a/src/services/timeline_fetcher/timeline_fetcher.service.js +++ b/src/services/timeline_fetcher/timeline_fetcher.service.js @@ -6,7 +6,7 @@ const update = ({ store, statuses, timeline, showImmediately, userId }) => { const ccTimeline = camelCase(timeline) store.dispatch('setError', { value: false }) - store.dispatch('set403Error', { value: false }) + store.dispatch('setErrorData', { value: false }) store.dispatch('addNewStatuses', { timeline: ccTimeline, @@ -46,9 +46,9 @@ const fetchAndUpdate = ({ return apiService.fetchTimeline(args) .then((statuses) => { - // Change messaging if not public if (statuses.error) { - store.dispatch('set403Error', { value: statuses.error }) + console.log(statuses) + store.dispatch('setErrorData', { value: statuses.error }) return } if (!older && statuses.length >= 20 && !timelineData.loading && numStatusesBeforeFetch > 0) { -- cgit v1.2.3-70-g09d2 From 8ee80339555c53d45602f40fdbe6b487a6992515 Mon Sep 17 00:00:00 2001 From: Wyatt Benno Date: Mon, 9 Dec 2019 10:31:57 +0900 Subject: Set error data --- src/components/timeline/timeline.vue | 4 ++-- src/i18n/en.json | 1 - src/modules/statuses.js | 2 +- src/services/api/api.service.js | 7 ++++++- src/services/timeline_fetcher/timeline_fetcher.service.js | 4 ++-- 5 files changed, 11 insertions(+), 7 deletions(-) (limited to 'src/services/api/api.service.js') diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue index d9f4025d..bb4ab379 100644 --- a/src/components/timeline/timeline.vue +++ b/src/components/timeline/timeline.vue @@ -16,7 +16,7 @@ class="loadmore-error alert error" @click.prevent > - {{ $t('timeline.error_403') }} + {{ errorData.statusText }}