Geotouchka.mobile/app/(tabs)/index.tsx
2024-08-02 00:59:19 +07:00

145 lines
4.2 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import { Image, StyleSheet, Platform, Button, TextInput } from 'react-native';
import { useState, useEffect } from 'react';
import { HelloWave } from '@/components/HelloWave';
import ParallaxScrollView from '@/components/ParallaxScrollView';
import { ThemedText } from '@/components/ThemedText';
import { ThemedView } from '@/components/ThemedView';
import * as Location from 'expo-location';
import io from 'socket.io-client';
// URL вашего WebSocket сервера
const WS_URL = 'ws://192.168.0.76:9992/ws/1x0Avi/sendGeo';
export default function HomeScreen() {
const [btnColor, setBtnColor] = useState("#008000");
const [broadcastState, setBroadcastState] = useState(false);
const [token, setToken] = useState(""); // State для ввода токена
const [socket, setSocket] = useState(null);
useEffect(() => {
// Очистка подключения при размонтировании компонента
return () => {
if (socket) {
// @ts-ignore
socket.disconnect();
}
};
}, [socket]);
const onPressSwitchBroadcast = () => {
setBtnColor(btnColor === "#008000" ? "#FF0000" : "#008000");
if (!socket) {
// Подключаемся к WebSocket серверу при нажатии
const newSocket = io(WS_URL);
newSocket.on('connect', () => {
console.log('Connected to WebSocket Server');
});
newSocket.on('disconnect', () => {
console.log('Disconnected from WebSocket Server');
});
newSocket.on('location_ack', (data) => {
console.log('Location acknowledged by server:', data);
});
// @ts-ignore
setSocket(newSocket);
} else {
// Если уже подключены, отправляем данные
getLocation();
}
};
const getLocation = async () => {
let { status } = await Location.requestForegroundPermissionsAsync();
if (status !== 'granted') {
console.error('Permission to access location was denied');
return;
}
let location = await Location.getCurrentPositionAsync({});
console.log('Location:', location);
sendLocation(location.coords.latitude, location.coords.longitude);
};
const sendLocation = (latitude : any, longitude : any) => {
if (socket) {
const locationData = {
latitude,
longitude,
// token, // Include token in the message
};
// @ts-ignore
socket.emit('location', locationData);
console.log('Location sent:', locationData);
}
};
return (
<ParallaxScrollView
headerBackgroundColor={{ light: '#A1CEDC', dark: '#1D3D47' }}
headerImage={
<Image
source={require('@/assets/images/partial-react-logo.png')}
style={styles.reactLogo}
/>
}>
<ThemedView style={styles.titleContainer}>
<ThemedText type="title">Welcome!</ThemedText>
<HelloWave />
</ThemedView>
<ThemedView style={styles.stepContainer}>
<ThemedText type="subtitle">Шаг 1: Введите токен</ThemedText>
<ThemedText>
Токен:
</ThemedText>
<TextInput
style={styles.input}
onChangeText={setToken}
value={token}
/>
</ThemedView>
<ThemedView style={styles.stepContainer}>
<ThemedText type="subtitle">Step 2: Начать трансляцию геолокации</ThemedText>
<ThemedText>
Нажмите ниже для трансляции геолокации.
</ThemedText>
<Button
onPress={onPressSwitchBroadcast}
title="Начать трансляцию геолокации"
color={btnColor}
accessibilityLabel="Learn more about this purple button"
/>
</ThemedView>
</ParallaxScrollView>
);
}
const styles = StyleSheet.create({
titleContainer: {
flexDirection: 'row',
alignItems: 'center',
gap: 8,
},
stepContainer: {
gap: 8,
marginBottom: 8,
},
reactLogo: {
height: 178,
width: 290,
bottom: 0,
left: 0,
position: 'absolute',
},
input: {
height: 40,
borderColor: 'gray',
color: 'white',
borderWidth: 1,
padding: 8,
margin: 10,
borderRadius: 4,
}
});