fix and refactor websocket

src/api/public.js

@@ -143,8 +143,6 @@ const MASTODON_SEARCH_2 = ({
   `/api/v2/search${paramsString({ q, resolve, limit, offset, following, type, withRelationships, accountId, excludeUnreviewed })}`
 const MASTODON_USER_SEARCH_URL = ({ q, resolve }) =>
   `/api/v1/accounts/search${paramsString({ q, resolve })}`
-const MASTODON_STREAMING = ({ accessToken, stream }) =>
-  `/api/v1/streaming${paramsString({ accessToken, stream })}`
 const MASTODON_KNOWN_DOMAIN_LIST_URL = '/api/v1/instance/peers'
 const PLEROMA_EMOJI_REACTIONS_URL = (id) =>
   `/api/v1/pleroma/statuses/${id}/reactions`
@@ -487,168 +485,6 @@ export const search2 = ({
 export const fetchKnownDomains = ({ credentials }) =>
   promisedRequest({ url: MASTODON_KNOWN_DOMAIN_LIST_URL, credentials })
 
-export const getMastodonSocketURI = ({ credentials, stream }, base) => {
-  return base + MASTODON_STREAMING({ accessToken: credentials, stream })
-}
-
-const MASTODON_STREAMING_EVENTS = new Set([
-  'update',
-  'notification',
-  'delete',
-  'filters_changed',
-  'status.update',
-])
-
-const PLEROMA_STREAMING_EVENTS = new Set([
-  'pleroma:chat_update',
-  'pleroma:respond',
-])
-
-// 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',
-  credentials,
-}) => {
-  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)
-    if (credentials) {
-      socket.send(
-        JSON.stringify({
-          type: 'pleroma:authenticate',
-          token: credentials,
-        }),
-      )
-    }
-  })
-  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,
-    )
-  })
-  // Commented code reason: very spammy, uncomment to enable message debug logging
-  /*
-  socket.addEventListener('message', (wsEvent) => {
-    console.debug(
-      `[WS][${id}] Message received`,
-      wsEvent
-    )
-  })
-  /**/
-
-  const onAuthenticated = () => {
-    eventTarget.dispatchEvent(new CustomEvent('pleroma:authenticated'))
-  }
-
-  proxy(socket, 'open')
-  proxy(socket, 'close')
-  proxy(socket, 'message', (event) => preprocessor(event, { onAuthenticated }))
-  proxy(socket, 'error')
-
-  // 1000 = Normal Closure
-  eventTarget.close = () => {
-    socket.close(1000, 'Shutting down socket')
-  }
-  eventTarget.getState = () => socket.readyState
-  eventTarget.subscribe = (stream, args = {}) => {
-    console.debug(`[WS][${id}] Subscribing to stream ${stream} with args`, args)
-    socket.send(
-      JSON.stringify({
-        type: 'subscribe',
-        stream,
-        ...args,
-      }),
-    )
-  }
-  eventTarget.unsubscribe = (stream, args = {}) => {
-    console.debug(
-      `[WS][${id}] Unsubscribing from stream ${stream} with args`,
-      args,
-    )
-    socket.send(
-      JSON.stringify({
-        type: 'unsubscribe',
-        stream,
-        ...args,
-      }),
-    )
-  }
-
-  return eventTarget
-}
-
-export const handleMastoWS = (
-  wsEvent,
-  {
-    onAuthenticated = () => {
-      /* no-op */
-    },
-  } = {},
-) => {
-  const { data } = wsEvent
-  if (!data) return
-  const parsedEvent = JSON.parse(data)
-  const { event, payload } = parsedEvent
-  if (
-    MASTODON_STREAMING_EVENTS.has(event) ||
-    PLEROMA_STREAMING_EVENTS.has(event)
-  ) {
-    // MastoBE and PleromaBE both send payload for delete as a PLAIN string
-    if (event === 'delete') {
-      return { event, id: payload }
-    }
-    const data = payload ? JSON.parse(payload) : null
-    if (event === 'pleroma:respond') {
-      if (data.type === 'pleroma:authenticate') {
-        if (data.result === 'success') {
-          console.debug('[WS] Successfully authenticated')
-          onAuthenticated()
-        } else {
-          console.error('[WS] Unable to authenticate:', data.error)
-          wsEvent.target.close()
-        }
-      }
-      return null
-    } else if (event === 'update') {
-      return { event, status: parseStatus(data) }
-    } else if (event === 'status.update') {
-      return { event, status: parseStatus(data) }
-    } else if (event === 'notification') {
-      return { event, notification: parseNotification(data) }
-    } else if (event === 'pleroma:chat_update') {
-      return { event, chatUpdate: parseChat(data) }
-    }
-  } else {
-    console.warn('Unknown event', wsEvent)
-    return null
-  }
-}
-
-export const WSConnectionStatus = Object.freeze({
-  JOINED: 1,
-  CLOSED: 2,
-  ERROR: 3,
-  DISABLED: 4,
-  STARTING: 5,
-  STARTING_INITIAL: 6,
-})
-
 export const fetchScrobbles = ({ accountId, limit = 1 }) =>
   promisedRequest({
     url: PLEROMA_SCROBBLES_URL(accountId, { limit }),

src/components/chat/chat.js

@@ -23,7 +23,9 @@ import {
   getOrCreateChat,
   sendChatMessage,
 } from 'src/api/chats.js'
-import { WSConnectionStatus } from 'src/api/public.js'
+import {
+  WSConnectionStatus,
+} from 'src/api/websocket.js'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faChevronDown, faChevronLeft } from '@fortawesome/free-solid-svg-icons'

src/components/conversation/conversation.js

@@ -13,8 +13,10 @@ import { useOAuthStore } from 'src/stores/oauth.js'
 import {
   fetchConversation,
   fetchStatus,
-  WSConnectionStatus,
 } from 'src/api/public.js'
+import {
+  WSConnectionStatus,
+} from 'src/api/websocket.js'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {

src/modules/api.js

@@ -10,10 +10,12 @@ import { useShoutStore } from 'src/stores/shout.js'
 
 import {
   fetchTimeline,
+} from 'src/api/public.js'
+import {
   getMastodonSocketURI,
   ProcessedWS,
   WSConnectionStatus,
-} from 'src/api/public.js'
+} from 'src/api/websocket.js'
 import followRequestFetcher from 'src/services/follow_request_fetcher/follow_request_fetcher.service'
 import notificationsFetcher from 'src/services/notifications_fetcher/notifications_fetcher.service.js'
 import timelineFetcher from 'src/services/timeline_fetcher/timeline_fetcher.service.js'
@@ -99,7 +101,7 @@ const api = {
 
           const serv = useInstanceStore().server.replace('http', 'ws')
           const credentials = useOAuthStore().token
-          const url = getMastodonSocketURI({ credentials }, serv)
+          const url = getMastodonSocketURI({ credentials })
 
           state.mastoUserSocket = ProcessedWS({
             url,

vite.config.js

@@ -73,6 +73,7 @@ export default defineConfig(async ({ mode, command }) => {
   const settings = await getLocalDevSettings()
   const target = settings.target || 'http://localhost:4000/'
   const origin = settings.origin || target
+  const targetSW = target.replace(/^http/,'ws')
   const transformSW = getTransformSWSettings(settings)
   const proxy = {
     '/api': {
@@ -80,6 +81,7 @@ export default defineConfig(async ({ mode, command }) => {
       changeOrigin: true,
       cookieDomainRewrite: 'localhost',
       ws: true,
+      rewriteWsOrigin: true,
     },
     '/auth': {
       // Mastodon password reset lives here
@@ -98,20 +100,21 @@ export default defineConfig(async ({ mode, command }) => {
       changeOrigin: true,
       cookieDomainRewrite: 'localhost',
     },
-    '/socket': {
-      target,
-      changeOrigin: true,
-      cookieDomainRewrite: 'localhost',
-      ws: true,
-      headers: {
-        Origin: origin,
-      },
-    },
     '/oauth': {
       target,
       changeOrigin: true,
       cookieDomainRewrite: 'localhost',
     },
+    '/socket': {
+      target: targetSW,
+      changeOrigin: true,
+      cookieDomainRewrite: 'localhost',
+      rewriteWsOrigin: true,
+      ws: true,
+      headers: {
+        Origin: origin,
+      },
+    },
   }
 
   const swSrc = 'src/sw.js'