Network Transport Abstraction

package.json

@@ -117,6 +117,7 @@
     "@types/cli": "0.11.21",
     "@types/mocha": "10.0.0",
     "@types/pino": "^7.0.5",
+    "@types/primus": "^7.3.6",
     "@typescript-eslint/eslint-plugin": "5.47.0",
     "@typescript-eslint/parser": "5.47.0",
     "concurrently": "7.1.0",

packages/client-core/src/common/services/LocationInstanceConnectionService.ts

@@ -1,6 +1,6 @@
 import { Paginated } from '@feathersjs/feathers'
-import { none, State } from '@hookstate/core'
-import React, { useEffect } from 'react'
+import { none } from '@hookstate/core'
+import { useEffect } from 'react'
 
 import { Instance } from '@etherealengine/common/src/interfaces/Instance'
 import { UserId } from '@etherealengine/common/src/interfaces/UserId'
@@ -25,8 +25,12 @@ import {
 
 import { API } from '../../API'
 import { leaveNetwork } from '../../transports/SocketWebRTCClientFunctions'
-import { SocketWebRTCClientNetwork } from '../../transports/SocketWebRTCClientNetwork'
-import { accessAuthState } from '../../user/services/AuthService'
+import {
+  connectToNetwork,
+  initializeNetwork,
+  SocketWebRTCClientNetwork
+} from '../../transports/SocketWebRTCClientFunctions'
+import { AuthState } from '../../user/services/AuthService'
 import { NetworkConnectionService } from './NetworkConnectionService'
 
 type InstanceState = {
@@ -60,7 +64,7 @@ export const LocationInstanceConnectionServiceReceptor = (action) => {
   matches(action)
     .when(LocationInstanceConnectionAction.serverProvisioned.matches, (action) => {
       getMutableState(NetworkState).hostIds.world.set(action.instanceId)
-      addNetwork(new SocketWebRTCClientNetwork(action.instanceId, NetworkTopics.world))
+      addNetwork(initializeNetwork(action.instanceId, NetworkTopics.world))
       return s.instances.merge({
         [action.instanceId]: {
           ipAddress: action.ipAddress,
@@ -113,7 +117,7 @@ export const LocationInstanceConnectionService = {
     createPrivateRoom?: boolean
   ) => {
     logger.info({ locationId, instanceId, sceneId }, 'Provision World Server')
-    const token = accessAuthState().authUser.accessToken.value
+    const token = getState(AuthState).authUser.accessToken
     if (instanceId != null) {
       const instance = (await API.instance.client.service('instance').find({
         query: {
@@ -152,7 +156,7 @@ export const LocationInstanceConnectionService = {
   },
   provisionExistingServer: async (locationId: string, instanceId: string, sceneId: string) => {
     logger.info({ locationId, instanceId, sceneId }, 'Provision Existing World Server')
-    const token = accessAuthState().authUser.accessToken.value
+    const token = getState(AuthState).authUser.accessToken
     const instance = (await API.instance.client.service('instance').find({
       query: {
         id: instanceId,
@@ -194,7 +198,7 @@ export const LocationInstanceConnectionService = {
   },
   provisionExistingServerByRoomCode: async (locationId: string, roomCode: string, sceneId: string) => {
     logger.info({ locationId, roomCode, sceneId }, 'Provision Existing World Server')
-    const token = accessAuthState().authUser.accessToken.value
+    const token = getState(AuthState).authUser.accessToken
     const instance = (await API.instance.client.service('instance').find({
       query: {
         roomCode,
@@ -242,9 +246,8 @@ export const LocationInstanceConnectionService = {
     if (network.primus) {
       leaveNetwork(network, false)
     }
-    const { ipAddress, port, locationId, roomCode } =
-      accessLocationInstanceConnectionState().instances.value[instanceId]
-    await network.initialize({ port, ipAddress, locationId, roomCode })
+    const { ipAddress, port, locationId, roomCode } = getState(LocationInstanceState).instances[instanceId]
+    await connectToNetwork(network, { port, ipAddress, locationId, roomCode })
   },
   useAPIListeners: () => {
     useEffect(() => {

packages/client-core/src/common/services/MediaInstanceConnectionService.ts

@@ -19,10 +19,14 @@ import {
 
 import { API } from '../../API'
 import { accessChatState } from '../../social/services/ChatService'
-import { accessLocationState } from '../../social/services/LocationService'
+import { accessLocationState, LocationState } from '../../social/services/LocationService'
 import { endVideoChat, leaveNetwork } from '../../transports/SocketWebRTCClientFunctions'
-import { SocketWebRTCClientNetwork } from '../../transports/SocketWebRTCClientNetwork'
-import { accessAuthState } from '../../user/services/AuthService'
+import {
+  connectToNetwork,
+  initializeNetwork,
+  SocketWebRTCClientNetwork
+} from '../../transports/SocketWebRTCClientFunctions'
+import { AuthState } from '../../user/services/AuthService'
 import { NetworkConnectionService } from './NetworkConnectionService'
 
 const logger = multiLogger.child({ component: 'client-core:service:media-instance' })
@@ -60,7 +64,7 @@ export const MediaInstanceConnectionServiceReceptor = (action) => {
   matches(action)
     .when(MediaInstanceConnectionAction.serverProvisioned.matches, (action) => {
       getMutableState(NetworkState).hostIds.media.set(action.instanceId)
-      addNetwork(new SocketWebRTCClientNetwork(action.instanceId, NetworkTopics.media))
+      addNetwork(initializeNetwork(action.instanceId, NetworkTopics.media))
       return s.instances[action.instanceId].set({
         ipAddress: action.ipAddress,
         port: action.port,
@@ -115,7 +119,7 @@ export const useMediaInstanceConnectionState = () => useState(accessMediaInstanc
 export const MediaInstanceConnectionService = {
   provisionServer: async (channelId?: string, createPrivateRoom = false) => {
     logger.info(`Provision Media Server, channelId: "${channelId}".`)
-    const token = accessAuthState().authUser.accessToken.value
+    const token = getState(AuthState).authUser.accessToken
     const provisionResult = await API.instance.client.service('instance-provision').find({
       query: {
         channelId,
@@ -142,9 +146,9 @@ export const MediaInstanceConnectionService = {
   },
   connectToServer: async (instanceId: string, channelId: string) => {
     dispatchAction(MediaInstanceConnectionAction.serverConnecting({ instanceId }))
-    const authState = accessAuthState()
-    const user = authState.user.value
-    const { ipAddress, port } = accessMediaInstanceConnectionState().instances.value[instanceId]
+    const authState = getState(AuthState)
+    const user = authState.user
+    const { ipAddress, port } = getState(MediaInstanceState).instances[instanceId]
 
     const network = Engine.instance.mediaNetwork as SocketWebRTCClientNetwork
     logger.info({ primus: !!network.primus, network }, 'Connect To Media Server.')
@@ -153,23 +157,22 @@ export const MediaInstanceConnectionService = {
       leaveNetwork(network, false)
     }
 
-    const locationState = accessLocationState()
+    const locationState = getState(LocationState)
     const currentLocation = locationState.currentLocation.location
 
     dispatchAction(
       MediaInstanceConnectionAction.enableVideo({
         instanceId,
         enableVideo:
-          currentLocation?.locationSetting?.videoEnabled?.value === true ||
+          currentLocation?.locationSetting?.videoEnabled === true ||
           !(
-            currentLocation?.locationSetting?.locationType?.value === 'showroom' &&
-            user.locationAdmins?.find((locationAdmin) => locationAdmin.locationId === currentLocation?.id?.value) ==
-              null
+            currentLocation?.locationSetting?.locationType === 'showroom' &&
+            user.locationAdmins?.find((locationAdmin) => locationAdmin.locationId === currentLocation?.id) == null
           )
       })
     )
 
-    await network.initialize({ port, ipAddress, channelId })
+    await connectToNetwork(network, { port, ipAddress, channelId })
   },
   resetServer: (instanceId: string) => {
     dispatchAction(MediaInstanceConnectionAction.disconnect({ instanceId }))

packages/client-core/src/components/UserMediaWindow/index.tsx

@@ -10,6 +10,7 @@ import {
   globalMuteProducer,
   globalUnmuteProducer,
   pauseConsumer,
+  ProducerExtension,
   resumeConsumer,
   toggleMicrophonePaused,
   toggleScreenshareAudioPaused,
@@ -38,7 +39,7 @@ import Tooltip from '@etherealengine/ui/src/Tooltip'
 import { useMediaInstance } from '../../common/services/MediaInstanceConnectionService'
 import { MediaStreamState } from '../../transports/MediaStreams'
 import { PeerMediaChannelState, PeerMediaStreamInterface } from '../../transports/PeerMediaChannelState'
-import { ConsumerExtension, SocketWebRTCClientNetwork } from '../../transports/SocketWebRTCClientNetwork'
+import { ConsumerExtension, SocketWebRTCClientNetwork } from '../../transports/SocketWebRTCClientFunctions'
 import Draggable from './Draggable'
 import styles from './index.module.scss'
 
@@ -163,7 +164,7 @@ export const useUserMediaWindowHook = ({ peerID, type }: Props) => {
       audioTrackClones.forEach((track) => track.stop())
       if (harkListener) (harkListener as any).stop()
     }
-  }, [audioTrackId, harkListener])
+  }, [audioTrackId])
 
   useEffect(() => {
     videoElement.id = `${peerID}_video`

packages/client-core/src/components/World/InstanceServerWarnings.tsx

@@ -8,7 +8,7 @@ import {
 import { MediaInstanceConnectionService } from '@etherealengine/client-core/src/common/services/MediaInstanceConnectionService'
 import { ChatService, useChatState } from '@etherealengine/client-core/src/social/services/ChatService'
 import { useLocationState } from '@etherealengine/client-core/src/social/services/LocationService'
-import { SocketWebRTCClientNetwork } from '@etherealengine/client-core/src/transports/SocketWebRTCClientNetwork'
+import { SocketWebRTCClientNetwork } from '@etherealengine/client-core/src/transports/SocketWebRTCClientFunctions'
 import { matches } from '@etherealengine/engine/src/common/functions/MatchesUtils'
 import { Engine } from '@etherealengine/engine/src/ecs/classes/Engine'
 import { useEngineState } from '@etherealengine/engine/src/ecs/classes/EngineState'

packages/client-core/src/components/World/LoadEngineWithScene.tsx

@@ -27,7 +27,7 @@ import { AppLoadingAction, AppLoadingStates, useLoadingState } from '../../commo
 import { NotificationService } from '../../common/services/NotificationService'
 import { useRouter } from '../../common/services/RouterService'
 import { useLocationState } from '../../social/services/LocationService'
-import { SocketWebRTCClientNetwork } from '../../transports/SocketWebRTCClientNetwork'
+import { SocketWebRTCClientNetwork } from '../../transports/SocketWebRTCClientFunctions'
 import { initClient, loadScene } from './LocationLoadHelper'
 
 const logger = multiLogger.child({ component: 'client-core:world' })

packages/client-core/src/components/World/OfflineLocation.tsx

@@ -4,7 +4,7 @@ import { useAuthState } from '@etherealengine/client-core/src/user/services/Auth
 import { PeerID } from '@etherealengine/common/src/interfaces/PeerID'
 import { Engine } from '@etherealengine/engine/src/ecs/classes/Engine'
 import { getEngineState } from '@etherealengine/engine/src/ecs/classes/EngineState'
-import { Network, NetworkTopics } from '@etherealengine/engine/src/networking/classes/Network'
+import { createNetwork, Network, NetworkTopics } from '@etherealengine/engine/src/networking/classes/Network'
 import { NetworkPeerFunctions } from '@etherealengine/engine/src/networking/functions/NetworkPeerFunctions'
 import { receiveJoinWorld } from '@etherealengine/engine/src/networking/functions/receiveJoinWorld'
 import { addNetwork, NetworkState } from '@etherealengine/engine/src/networking/NetworkState'
@@ -26,7 +26,7 @@ export const OfflineLocation = () => {
 
       const networkState = getMutableState(NetworkState)
       networkState.hostIds.world.set(userId)
-      addNetwork(new Network(userId, NetworkTopics.world))
+      addNetwork(createNetwork(userId, NetworkTopics.world))
       addOutgoingTopicIfNecessary(NetworkTopics.world)
 
       NetworkPeerFunctions.createPeer(

packages/client-core/src/media/PeerMedia.tsx

@@ -17,7 +17,7 @@ import {
   ConsumerExtension,
   ProducerExtension,
   SocketWebRTCClientNetwork
-} from '../transports/SocketWebRTCClientNetwork'
+} from '../transports/SocketWebRTCClientFunctions'
 import { AuthState } from '../user/services/AuthService'
 import { NetworkUserState } from '../user/services/NetworkUserService'
 import { MediaState } from './services/MediaStreamService'

packages/client-core/src/media/services/MediaStreamService.ts

@@ -7,7 +7,7 @@ import { getNearbyUsers } from '@etherealengine/engine/src/networking/functions/
 import { defineAction, defineState, dispatchAction, getMutableState, useState } from '@etherealengine/hyperflux'
 
 import { MediaStreamState } from '../../transports/MediaStreams'
-import { ConsumerExtension, SocketWebRTCClientNetwork } from '../../transports/SocketWebRTCClientNetwork'
+import { ConsumerExtension, SocketWebRTCClientNetwork } from '../../transports/SocketWebRTCClientFunctions'
 import { accessNetworkUserState } from '../../user/services/NetworkUserService'
 
 //State

packages/client-core/src/social/services/LocationService.ts

@@ -9,7 +9,7 @@ import { API } from '../../API'
 import { NotificationService } from '../../common/services/NotificationService'
 
 //State
-const LocationState = defineState({
+export const LocationState = defineState({
   name: 'LocationState',
   initial: () => ({
     locationName: null! as string,

packages/client-core/src/social/services/PartyService.ts

@@ -18,7 +18,7 @@ import {
 } from '../../common/services/MediaInstanceConnectionService'
 import { NotificationService } from '../../common/services/NotificationService'
 import { endVideoChat, leaveNetwork } from '../../transports/SocketWebRTCClientFunctions'
-import { SocketWebRTCClientNetwork } from '../../transports/SocketWebRTCClientNetwork'
+import { SocketWebRTCClientNetwork } from '../../transports/SocketWebRTCClientFunctions'
 import { accessAuthState } from '../../user/services/AuthService'
 import { NetworkUserAction, NetworkUserService } from '../../user/services/NetworkUserService'
 import { accessChatState, ChatAction, ChatService } from './ChatService'

packages/client-core/src/transports/MediaStreams.ts

@@ -8,7 +8,7 @@ import {
 } from '@etherealengine/engine/src/networking/constants/VideoConstants'
 import { defineAction, defineState, getMutableState } from '@etherealengine/hyperflux'
 
-import { ProducerExtension } from './SocketWebRTCClientNetwork'
+import { ProducerExtension } from './SocketWebRTCClientFunctions'
 
 const logger = multiLogger.child({ component: 'client-core:MediaStreams' })
 

packages/client-core/src/transports/PeerMediaChannelState.ts

@@ -1,7 +1,7 @@
 import { PeerID } from '@etherealengine/common/src/interfaces/PeerID'
 import { defineState, getMutableState, none } from '@etherealengine/hyperflux'
 
-import { ConsumerExtension, ProducerExtension } from './SocketWebRTCClientNetwork'
+import { ConsumerExtension, ProducerExtension } from './SocketWebRTCClientFunctions'
 
 export interface PeerMediaStreamInterface {
   videoStream: ProducerExtension | ConsumerExtension | null
@@ -62,3 +62,8 @@ export const removePeerMediaChannels = (peerID: PeerID) => {
   const state = getMutableState(PeerMediaChannelState)
   state[peerID].set(none)
 }
+
+export const clearPeerMediaChannels = () => {
+  console.log('clearPeerMediaChannels')
+  getMutableState(PeerMediaChannelState).set({})
+}