ynerant/traintrape-moi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Transmission plus immédiate via websockets

Browse Source
This commit is contained in:
Emmy D'Anello
2024-12-17 01:06:23 +01:00
parent 29c0a234d1
commit 0433e4695e
12 changed files with 448 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
client/components/providers/GeolocationProvider.tsx
View File

@ -1,11 +1,13 @@
import { ReactNode, useEffect, useState } from 'react'
import { ReactNode, useEffect } from 'react'
import { useAuth } from '@/hooks/useAuth'
import { useQueuedLocations, useSetLastPlayerLocations, useUnqueueLocation } from '@/hooks/useLocation'
import { useQueuedLocations, useSetLastPlayerLocation, useSetLastPlayerLocations, useUnqueueLocation } from '@/hooks/useLocation'
import { useGeolocationMutation } from '@/hooks/mutations/useGeolocationMutation'
import { useStartGeolocationServiceEffect } from '@/utils/geolocation'
import { Platform } from 'react-native'
import { useQuery } from '@tanstack/react-query'
import { isAuthValid } from '@/utils/features/auth/authSlice'
import { socket } from '@/utils/socket'
import { PlayerLocation } from '@/utils/features/location/locationSlice'
export default function GeolocationProvider({ children }: { children: ReactNode }) {
useStartGeolocationServiceEffect()
@ -14,6 +16,7 @@ export default function GeolocationProvider({ children }: { children: ReactNode
const geolocationsQueue = useQueuedLocations()
const unqueueLocation = useUnqueueLocation()
const setLastPlayerLocations = useSetLastPlayerLocations()
const setLastPlayerLocation = useSetLastPlayerLocation()
const geolocationMutation = useGeolocationMutation({
auth,
onPostSuccess: (data, variables) => unqueueLocation(variables),
@ -47,6 +50,11 @@ export default function GeolocationProvider({ children }: { children: ReactNode
setLastPlayerLocations(lastLocationsQuery.data)
}, [lastLocationsQuery.status, lastLocationsQuery.dataUpdatedAt])
socket.on('last-location', (data: PlayerLocation) => {
if (data.playerId)
setLastPlayerLocation(data)
})
return <>
{children}
</>

6
client/hooks/useLocation.ts
View File

@ -1,6 +1,6 @@
import { LocationObject } from "expo-location"
import { useAppDispatch, useAppSelector } from "./useStore"
import { PlayerLocation, setLastLocation, setLastPlayerLocations, unqueueLocation } from "@/utils/features/location/locationSlice"
import { PlayerLocation, setLastLocation, setLastPlayerLocation, setLastPlayerLocations, unqueueLocation } from "@/utils/features/location/locationSlice"
export const useLastOwnLocation = () => useAppSelector((state) => state.location.lastOwnLocation)
export const useQueuedLocations = () => useAppSelector((state) => state.location.queuedLocations)
@ -18,3 +18,7 @@ export const useSetLastPlayerLocations = () => {
const dispatch = useAppDispatch()
return (playerLocations: PlayerLocation[]) => dispatch(setLastPlayerLocations(playerLocations))
}
export const useSetLastPlayerLocation = () => {
const dispatch = useAppDispatch()
return (playerLocation: PlayerLocation) => dispatch(setLastPlayerLocation(playerLocation))
}

139
client/package-lock.json generated
View File

@ -52,7 +52,8 @@
"react-native-screens": "~4.1.0",
"react-native-web": "~0.19.13",
"react-native-webview": "13.12.2",
"react-redux": "^9.1.2"
"react-redux": "^9.1.2",
"socket.io-client": "^4.8.1"
},
"devDependencies": {
"@babel/core": "^7.25.2",
@ -4654,6 +4655,12 @@
"@sinonjs/commons": "^3.0.0"
}
},
"node_modules/@socket.io/component-emitter": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.2.tgz",
"integrity": "sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA==",
"license": "MIT"
},
"node_modules/@tanstack/query-async-storage-persister": {
"version": "5.62.7",
"resolved": "https://registry.npmjs.org/@tanstack/query-async-storage-persister/-/query-async-storage-persister-5.62.7.tgz",
@ -7349,6 +7356,66 @@
"once": "^1.4.0"
}
},
"node_modules/engine.io-client": {
"version": "6.6.2",
"resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.6.2.tgz",
"integrity": "sha512-TAr+NKeoVTjEVW8P3iHguO1LO6RlUz9O5Y8o7EY0fU+gY1NYqas7NN3slpFtbXEsLMHk0h90fJMfKjRkQ0qUIw==",
"license": "MIT",
"dependencies": {
"@socket.io/component-emitter": "~3.1.0",
"debug": "~4.3.1",
"engine.io-parser": "~5.2.1",
"ws": "~8.17.1",
"xmlhttprequest-ssl": "~2.1.1"
}
},
"node_modules/engine.io-client/node_modules/debug": {
"version": "4.3.7",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
"integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
"license": "MIT",
"dependencies": {
"ms": "^2.1.3"
},
"engines": {
"node": ">=6.0"
},
"peerDependenciesMeta": {
"supports-color": {
"optional": true
}
}
},
"node_modules/engine.io-client/node_modules/ws": {
"version": "8.17.1",
"resolved": "https://registry.npmjs.org/ws/-/ws-8.17.1.tgz",
"integrity": "sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==",
"license": "MIT",
"engines": {
"node": ">=10.0.0"
},
"peerDependencies": {
"bufferutil": "^4.0.1",
"utf-8-validate": ">=5.0.2"
},
"peerDependenciesMeta": {
"bufferutil": {
"optional": true
},
"utf-8-validate": {
"optional": true
}
}
},
"node_modules/engine.io-parser": {
"version": "5.2.3",
"resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.2.3.tgz",
"integrity": "sha512-HqD3yTBfnBxIrbnM1DoD6Pcq8NECnh8d4As1Qgh0z5Gg3jRRIqijury0CL3ghu/edArpUYiYqQiDUQBIs4np3Q==",
"license": "MIT",
"engines": {
"node": ">=10.0.0"
}
},
"node_modules/enhanced-resolve": {
"version": "5.17.1",
"resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.17.1.tgz",
@ -14798,6 +14865,68 @@
"node": ">=8.0.0"
}
},
"node_modules/socket.io-client": {
"version": "4.8.1",
"resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.8.1.tgz",
"integrity": "sha512-hJVXfu3E28NmzGk8o1sHhN3om52tRvwYeidbj7xKy2eIIse5IoKX3USlS6Tqt3BHAtflLIkCQBkzVrEEfWUyYQ==",
"license": "MIT",
"dependencies": {
"@socket.io/component-emitter": "~3.1.0",
"debug": "~4.3.2",
"engine.io-client": "~6.6.1",
"socket.io-parser": "~4.2.4"
},
"engines": {
"node": ">=10.0.0"
}
},
"node_modules/socket.io-client/node_modules/debug": {
"version": "4.3.7",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
"integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
"license": "MIT",
"dependencies": {
"ms": "^2.1.3"
},
"engines": {
"node": ">=6.0"
},
"peerDependenciesMeta": {
"supports-color": {
"optional": true
}
}
},
"node_modules/socket.io-parser": {
"version": "4.2.4",
"resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.4.tgz",
"integrity": "sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew==",
"license": "MIT",
"dependencies": {
"@socket.io/component-emitter": "~3.1.0",
"debug": "~4.3.1"
},
"engines": {
"node": ">=10.0.0"
}
},
"node_modules/socket.io-parser/node_modules/debug": {
"version": "4.3.7",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
"integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
"license": "MIT",
"dependencies": {
"ms": "^2.1.3"
},
"engines": {
"node": ">=6.0"
},
"peerDependenciesMeta": {
"supports-color": {
"optional": true
}
}
},
"node_modules/sort-asc": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/sort-asc/-/sort-asc-0.2.0.tgz",
@ -16705,6 +16834,14 @@
"dev": true,
"license": "MIT"
},
"node_modules/xmlhttprequest-ssl": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.1.2.tgz",
"integrity": "sha512-TEU+nJVUUnA4CYJFLvK5X9AOeH4KvDvhIfm0vV1GaQRtchnG0hgK5p8hw/xjv8cunWYCsiPCSDzObPyhEwq3KQ==",
"engines": {
"node": ">=0.4.0"
}
},
"node_modules/xtend": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",

3
client/package.json
View File

@ -58,7 +58,8 @@
"react-native-screens": "~4.1.0",
"react-native-web": "~0.19.13",
"react-native-webview": "13.12.2",
"react-redux": "^9.1.2"
"react-redux": "^9.1.2",
"socket.io-client": "^4.8.1"
},
"devDependencies": {
"@babel/core": "^7.25.2",

8
client/utils/features/location/locationSlice.ts
View File

@ -3,7 +3,7 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit'
import { LocationObject } from 'expo-location'
export type PlayerLocation = {
id: number
id?: number
playerId: number
longitude: number
latitude: number
@ -49,10 +49,14 @@ export const locationSlice = createSlice({
},
setLastPlayerLocations: (state, action: PayloadAction<PlayerLocation[]>) => {
state.lastPlayerLocations = action.payload
},
setLastPlayerLocation: (state, action: PayloadAction<PlayerLocation>) => {
state.lastPlayerLocations = state.lastPlayerLocations.filter(playerLoc => playerLoc.playerId !== action.payload.playerId)
state.lastPlayerLocations.push(action.payload)
}
},
})
export const { setLastLocation, unqueueLocation, setLastPlayerLocations } = locationSlice.actions
export const { setLastLocation, unqueueLocation, setLastPlayerLocation, setLastPlayerLocations } = locationSlice.actions
export default locationSlice.reducer

21
client/utils/geolocation.ts
View File

@ -1,9 +1,10 @@
import * as Location from 'expo-location'
import * as TaskManager from 'expo-task-manager'
import { Platform } from 'react-native'
import { setLastLocation } from './features/location/locationSlice'
import { PlayerLocation, setLastLocation } from './features/location/locationSlice'
import store from './store'
import { useEffect } from 'react'
import { socket } from './socket'
const LOCATION_TASK = "fetch-geolocation"
@ -13,7 +14,23 @@ TaskManager.defineTask(LOCATION_TASK, async ({ data, error }: any) => {
return
}
const { locations } = data
store.dispatch(setLastLocation(locations.at(-1)))
const lastLoc: Location.LocationObject = locations.at(-1)
store.dispatch(setLastLocation(lastLoc))
console.log("sending-loc", lastLoc, socket.active)
const playerId = store.getState().game.playerId
if (socket.active && playerId) {
const lastLocToSend: PlayerLocation = {
playerId: playerId,
longitude: lastLoc.coords.longitude,
latitude: lastLoc.coords.latitude,
speed: lastLoc.coords.speed ?? 0,
accuracy: lastLoc.coords.accuracy ?? 0,
altitude: lastLoc.coords.accuracy ?? 0,
altitudeAccuracy: lastLoc.coords.altitudeAccuracy ?? 0,
timestamp: new Date(lastLoc.timestamp).toISOString(),
}
socket.emit('last-location', { playerId: playerId, loc: lastLocToSend })
}
})
export async function startGeolocationService(): Promise<void | (() => void)> {

5
client/utils/socket.ts Normal file
View File

@ -0,0 +1,5 @@
import { io } from 'socket.io-client'
export const socket = io("http://192.168.1.198:3000", {
reconnection: true,
})