v1 of streaming

This commit is contained in:
Nolan Lawson 2018-02-11 13:46:57 -08:00
parent 321a90251a
commit 64350ad912
12 changed files with 213 additions and 29 deletions

View file

@ -5,6 +5,7 @@ import { toast } from '../_utils/toast'
import { database } from '../_database/database' import { database } from '../_database/database'
import { goto } from 'sapper/runtime.js' import { goto } from 'sapper/runtime.js'
import { cacheFirstUpdateAfter } from '../_utils/sync' import { cacheFirstUpdateAfter } from '../_utils/sync'
import { getInstanceInfo } from '../_api/instance'
export function changeTheme (instanceName, newTheme) { export function changeTheme (instanceName, newTheme) {
let instanceThemes = store.get('instanceThemes') let instanceThemes = store.get('instanceThemes')
@ -65,3 +66,17 @@ export async function updateVerifyCredentialsForInstance (instanceName) {
verifyCredentials => setStoreVerifyCredentials(instanceName, verifyCredentials) verifyCredentials => setStoreVerifyCredentials(instanceName, verifyCredentials)
) )
} }
export async function updateInstanceInfo(instanceName) {
await cacheFirstUpdateAfter(
() => getInstanceInfo(instanceName),
() => database.getInstanceInfo(instanceName),
info => database.setInstanceInfo(instanceName, info),
info => {
let instanceInfos = store.get('instanceInfos')
instanceInfos[instanceName] = info
store.set({instanceInfos: instanceInfos})
}
)
}

View file

@ -0,0 +1,74 @@
import { TimelineStream } from '../_api/TimelineStream'
import identity from 'lodash/identity'
import { database } from '../_database/database'
import { store } from '../_store/store'
import { scheduleIdleTask } from '../_utils/scheduleIdleTask'
async function removeDuplicates (instanceName, timelineName, updates) {
// remove duplicates, including duplicates due to reblogs
let timelineItemIds = store.getForTimeline(instanceName, timelineName, 'timelineItemIds')
let reblogIds = (await Promise.all(timelineItemIds.map(async timelineItemId => {
let status = await database.getStatus(instanceName, timelineItemId)
return status.reblog && status.reblog.id
}))).filter(identity)
let existingItemIds = new Set([].concat(timelineItemIds).concat(reblogIds))
return updates.filter(update => !existingItemIds.has(update.id))
}
async function handleFreshChanges (instanceName, timelineName) {
console.log('handleFreshChanges')
let freshChanges = store.getForTimeline(instanceName, timelineName, 'freshChanges')
console.log('freshChanges', freshChanges)
if (freshChanges.updates && freshChanges.updates.length) {
let updates = freshChanges.updates.slice()
freshChanges.updates = []
store.setForTimeline(instanceName, timelineName, {freshChanges: freshChanges})
console.log('before removing duplicates, updates are ', updates.length)
updates = await removeDuplicates(instanceName, timelineName, updates)
console.log('after removing duplicates, updates are ', updates.length)
await database.insertTimelineItems(instanceName, timelineName, updates)
let itemIdsToAdd = store.getForTimeline(instanceName, timelineName, 'itemIdsToAdd') || []
itemIdsToAdd = itemIdsToAdd.concat(updates.map(_ => _.id))
store.setForTimeline(instanceName, timelineName, {itemIdsToAdd: itemIdsToAdd})
}
}
function handleStreamMessage (instanceName, timelineName, message) {
console.log('handleStreamMessage')
let { event, payload } = message
let key = event === 'update' ? 'updates' : 'deletes'
let freshChanges = store.getForTimeline(instanceName, timelineName, 'freshChanges') || {}
freshChanges[key] = freshChanges[key] || []
freshChanges[key].push(JSON.parse(payload))
store.setForTimeline(instanceName, timelineName, {freshChanges: freshChanges})
scheduleIdleTask(() => {
handleFreshChanges(instanceName, timelineName)
})
}
export function createStream (streamingApi, instanceName, accessToken, timelineName) {
new TimelineStream(streamingApi, accessToken, timelineName, {
onMessage(msg) {
console.log('message', msg)
if (msg.event !== 'update' && msg.event !== 'delete') {
console.error("don't know how to handle event", msg)
return
}
scheduleIdleTask(() => {
handleStreamMessage(instanceName, timelineName, msg)
})
},
onOpen() {
console.log('opened stream for timeline', timelineName)
},
onClose() {
console.log('closed stream for timeline', timelineName)
},
onReconnect() {
console.log('reconnected stream for timeline', timelineName)
}
})
}

View file

@ -30,10 +30,14 @@ async function addTimelineItems (instanceName, timelineName, newItems) {
console.log('addTimelineItems, length:', newItems.length) console.log('addTimelineItems, length:', newItems.length)
mark('addTimelineItems') mark('addTimelineItems')
let newIds = newItems.map(item => item.id) let newIds = newItems.map(item => item.id)
addTimelineItemIds(instanceName, timelineName, newIds)
stop('addTimelineItems')
}
export async function addTimelineItemIds (instanceName, timelineName, newIds) {
let oldIds = store.getForTimeline(instanceName, timelineName, 'timelineItemIds') || [] let oldIds = store.getForTimeline(instanceName, timelineName, 'timelineItemIds') || []
let merged = mergeArrays(oldIds, newIds) let merged = mergeArrays(oldIds, newIds)
store.setForTimeline(instanceName, timelineName, { timelineItemIds: merged }) store.setForTimeline(instanceName, timelineName, { timelineItemIds: merged })
stop('addTimelineItems')
} }
async function fetchTimelineItemsAndPossiblyFallBack () { async function fetchTimelineItemsAndPossiblyFallBack () {

View file

@ -1,6 +1,6 @@
import { paramsString } from '../_utils/ajax' import { paramsString } from '../_utils/ajax'
import noop from 'lodash/noop' import noop from 'lodash/noop'
import WebSocketClient from '@gamestdio/websocket' import { importWebSocketClient } from '../_utils/asyncModules'
function getStreamName (timeline) { function getStreamName (timeline) {
switch (timeline) { switch (timeline) {
@ -16,6 +16,9 @@ function getStreamName (timeline) {
if (timeline.startsWith('tag/')) { if (timeline.startsWith('tag/')) {
return 'hashtag' return 'hashtag'
} }
if (timeline.startsWith('list/')) {
return 'list'
}
} }
function getUrl (streamingApi, accessToken, timeline) { function getUrl (streamingApi, accessToken, timeline) {
@ -28,6 +31,8 @@ function getUrl (streamingApi, accessToken, timeline) {
if (timeline.startsWith('tag/')) { if (timeline.startsWith('tag/')) {
params.tag = timeline.split('/').slice(-1)[0] params.tag = timeline.split('/').slice(-1)[0]
} else if (timeline.startsWith('list/')) {
params.list = timeline.split('/').slice(-1)[0]
} }
if (accessToken) { if (accessToken) {
@ -37,22 +42,29 @@ function getUrl (streamingApi, accessToken, timeline) {
return url + '?' + paramsString(params) return url + '?' + paramsString(params)
} }
export class StatusStream { export class TimelineStream {
constructor (streamingApi, accessToken, timeline, opts) { constructor (streamingApi, accessToken, timeline, opts) {
let url = getUrl(streamingApi, accessToken, timeline) let url = getUrl(streamingApi, accessToken, timeline)
importWebSocketClient().then(WebSocketClient => {
if (this.__closed) {
return
}
const ws = new WebSocketClient(url, null, { backoff: 'exponential' })
const onMessage = opts.onMessage || noop
const ws = new WebSocketClient(url, null, { backoff: 'exponential' }) ws.onopen = opts.onOpen || noop
const onMessage = opts.onMessage || noop ws.onmessage = e => onMessage(JSON.parse(e.data))
ws.onclose = opts.onClose || noop
ws.onreconnect = opts.onReconnect || noop
ws.onopen = opts.onOpen || noop this._ws = ws
ws.onmessage = e => onMessage(JSON.parse(e.data)) })
ws.onclose = opts.onClose || noop
ws.onreconnect = opts.onReconnect || noop
this._ws = ws
} }
close () { close () {
this._ws.close() this.__closed = true
if (this._ws) {
this._ws.close()
}
} }
} }

View file

@ -61,21 +61,27 @@
import { initializeTimeline, fetchTimelineItemsOnScrollToBottom, setupTimeline } from '../../_actions/timeline' import { initializeTimeline, fetchTimelineItemsOnScrollToBottom, setupTimeline } from '../../_actions/timeline'
import LoadingPage from '../LoadingPage.html' import LoadingPage from '../LoadingPage.html'
import { focusWithCapture, blurWithCapture } from '../../_utils/events' import { focusWithCapture, blurWithCapture } from '../../_utils/events'
import { addTimelineItemIds } from '../../_actions/timeline'
export default { export default {
oncreate() { oncreate() {
console.log('timeline oncreate()') console.log('timeline oncreate()')
this.onPushState = this.onPushState.bind(this) this.setupFocus()
this.store.setForCurrentTimeline({ignoreBlurEvents: false})
window.addEventListener('pushState', this.onPushState)
setupTimeline() setupTimeline()
if (this.store.get('initialized')) { if (this.store.get('initialized')) {
this.restoreFocus() this.restoreFocus()
} }
let instanceName = this.store.get('currentInstance')
let timelineName = this.get('timeline')
this.observe('itemIdsToAdd', itemIdsToAdd => {
console.log('itemIdsToAdd', itemIdsToAdd)
addTimelineItemIds(instanceName, timelineName, itemIdsToAdd)
this.store.setForTimeline(instanceName, timelineName, { itemIdsToAdd: [] })
})
}, },
ondestroy() { ondestroy() {
console.log('ondestroy') console.log('ondestroy')
window.removeEventListener('pushState', this.onPushState) this.teardownFocus()
}, },
data: () => ({ data: () => ({
StatusVirtualListItem, StatusVirtualListItem,
@ -125,6 +131,12 @@
&& $firstTimelineItemId && $firstTimelineItemId
&& timelineValue !== $firstTimelineItemId && timelineValue !== $firstTimelineItemId
&& timelineValue && timelineValue
},
itemIdsToAdd: (timeline, $currentInstance, $timelines) => {
return ($timelines &&
$timelines[$currentInstance] &&
$timelines[$currentInstance][timeline] &&
$timelines[$currentInstance][timeline].itemIdsToAdd) || []
} }
}, },
store: () => store, store: () => store,
@ -145,9 +157,6 @@
console.log('timeline initialize()') console.log('timeline initialize()')
initializeTimeline() initializeTimeline()
}, },
onPushState() {
this.store.setForCurrentTimeline({ ignoreBlurEvents: true })
},
onScrollToBottom() { onScrollToBottom() {
if (!this.store.get('initialized') || if (!this.store.get('initialized') ||
this.store.get('runningUpdate') || this.store.get('runningUpdate') ||
@ -156,6 +165,17 @@
} }
fetchTimelineItemsOnScrollToBottom() fetchTimelineItemsOnScrollToBottom()
}, },
setupFocus() {
this.onPushState = this.onPushState.bind(this)
this.store.setForCurrentTimeline({ignoreBlurEvents: false})
window.addEventListener('pushState', this.onPushState)
},
teardownFocus() {
window.removeEventListener('pushState', this.onPushState)
},
onPushState() {
this.store.setForCurrentTimeline({ ignoreBlurEvents: true })
},
saveFocus(e) { saveFocus(e) {
let instanceName = this.store.get('currentInstance') let instanceName = this.store.get('currentInstance')
let timelineName = this.get('timeline') let timelineName = this.get('timeline')

View file

@ -47,6 +47,12 @@ export function instanceComputations (store) {
(currentInstance, verifyCredentials) => verifyCredentials && verifyCredentials[currentInstance] (currentInstance, verifyCredentials) => verifyCredentials && verifyCredentials[currentInstance]
) )
store.compute(
'currentInstanceInfo',
['currentInstance', 'instanceInfos'],
(currentInstance, instanceInfos) => instanceInfos && instanceInfos[currentInstance]
)
store.compute( store.compute(
'pinnedPage', 'pinnedPage',
['pinnedPages', 'currentInstance'], ['pinnedPages', 'currentInstance'],

View file

@ -0,0 +1,13 @@
import { updateInstanceInfo, updateVerifyCredentialsForInstance } from '../_actions/instances'
import { updateLists } from '../_actions/lists'
export function instanceObservers (store) {
store.observe('currentInstance', (currentInstance) => {
if (!currentInstance) {
return
}
updateVerifyCredentialsForInstance(currentInstance)
updateInstanceInfo(currentInstance)
updateLists()
})
}

View file

@ -1,11 +1,7 @@
import { updateVerifyCredentialsForInstance } from '../_actions/instances' import { instanceObservers } from './instanceObservers'
import { updateLists } from '../_actions/lists' import { timelineObservers } from './timelineObservers'
export function observers (store) { export function observers (store) {
store.observe('currentInstance', (currentInstance) => { instanceObservers(store)
if (currentInstance) { timelineObservers(store)
updateVerifyCredentialsForInstance(currentInstance)
updateLists()
}
})
} }

View file

@ -35,7 +35,8 @@ const store = new PinaforeStore({
markMediaAsSensitive: false, markMediaAsSensitive: false,
pinnedPages: {}, pinnedPages: {},
instanceLists: {}, instanceLists: {},
pinnedStatuses: {} pinnedStatuses: {},
instanceInfos: {}
}) })
mixins(PinaforeStore) mixins(PinaforeStore)

View file

@ -14,6 +14,7 @@ export function timelineComputations (store) {
computeForTimeline(store, 'initialized') computeForTimeline(store, 'initialized')
computeForTimeline(store, 'lastFocusedElementSelector') computeForTimeline(store, 'lastFocusedElementSelector')
computeForTimeline(store, 'ignoreBlurEvents') computeForTimeline(store, 'ignoreBlurEvents')
computeForTimeline(store, 'itemIdsToAdd')
store.compute('firstTimelineItemId', ['timelineItemIds'], (timelineItemIds) => timelineItemIds && timelineItemIds.length && timelineItemIds[0]) store.compute('firstTimelineItemId', ['timelineItemIds'], (timelineItemIds) => timelineItemIds && timelineItemIds.length && timelineItemIds[0])
store.compute('lastTimelineItemId', ['timelineItemIds'], (timelineItemIds) => timelineItemIds && timelineItemIds.length && timelineItemIds[timelineItemIds.length - 1]) store.compute('lastTimelineItemId', ['timelineItemIds'], (timelineItemIds) => timelineItemIds && timelineItemIds.length && timelineItemIds[timelineItemIds.length - 1])

View file

@ -0,0 +1,38 @@
import { updateInstanceInfo } from '../_actions/instances'
import { createStream } from '../_actions/streaming'
export function timelineObservers (store) {
let currentTimelineStream
store.observe('currentTimeline', async (currentTimeline) => {
if (!process.browser) {
return
}
if (currentTimelineStream) {
currentTimelineStream.close()
currentTimelineStream = null
}
if (!currentTimeline) {
return
}
if (!(['home', 'local', 'federated'].includes(currentTimeline) ||
currentTimeline.startsWith('list/') ||
currentTimeline.startsWith('tag/'))) {
return
}
let currentInstance = store.get('currentInstance')
let accessToken = store.get('accessToken')
await updateInstanceInfo(currentInstance)
let instanceInfo = store.get('currentInstanceInfo')
if (!(instanceInfo &&
store.get('currentInstance') === currentInstance &&
store.get('currentTimeline') === currentTimeline)) {
return
}
currentTimelineStream = createStream(instanceInfo.urls.streaming_api,
currentInstance, accessToken, currentTimeline)
})
}

View file

@ -24,3 +24,7 @@ export const importRequestIdleCallback = () => import(
export const importIndexedDBGetAllShim = () => import( export const importIndexedDBGetAllShim = () => import(
/* webpackChunkName: 'indexeddb-getall-shim' */ 'indexeddb-getall-shim' /* webpackChunkName: 'indexeddb-getall-shim' */ 'indexeddb-getall-shim'
) )
export const importWebSocketClient = () => import(
/* webpackChunkName: '@gamestdio/websocket' */ '@gamestdio/websocket'
).then(mod => mod.default)