Skip to content

Sockets stuff #16

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
tonyjwt wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Sockets stuff #16

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
235 changes: 225 additions & 10 deletions Bubbles/app/(tabs)/chat.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,242 @@
// app/Chat.tsx
// // app/Chat.tsx
// // import React, { useEffect, useState } from 'react';
// // import { View, Text, TextInput, Button, FlatList, StyleSheet } from 'react-native';
// // import socket from '@/hooks/socket'; // import your socket instance

// // const ChatScreen = () => {
// // const [messages, setMessages] = useState<string[]>([]);
// // const [message, setMessage] = useState('');

// // useEffect(() => {
// // // listen for incoming messages
// // socket.on('message', (newMessage: string) => {
// // setMessages((prevMessages) => [...prevMessages, newMessage]);
// // });

// // // clean up the listener on unmount
// // return () => {
// // socket.off('message');
// // };
// // }, []);

// // const sendMessage = () => {
// // if (message.trim()) {
// // socket.emit('message', message);
// // setMessage('');
// // }
// // };

// // return (
// // <View style={styles.container}>
// // <FlatList
// // data={messages}
// // renderItem={({ item }) => (
// // <View style={styles.messageContainer}>
// // <Text>{item}</Text>
// // </View>
// // )}
// // keyExtractor={(item, index) => index.toString()}
// // />
// // <TextInput
// // value={message}
// // onChangeText={setMessage}
// // placeholder="Type a message"
// // style={styles.input}
// // />
// // <Button title="Send" onPress={sendMessage} />
// // </View>
// // );
// // };

// // const styles = StyleSheet.create({
// // container: {
// // flex: 1,
// // padding: 16,
// // },
// // input: {
// // borderBottomWidth: 1,
// // marginBottom: 16,
// // },
// // messageContainer: {
// // padding: 10,
// // borderBottomWidth: 1,
// // },
// // });

// // export default ChatScreen;
// import React, { useEffect, useState } from 'react';
// import { View, Text, TextInput, Button, FlatList, StyleSheet } from 'react-native';
// import socket from '@/hooks/socket'; // import your socket instance
// import AsyncStorage from '@react-native-async-storage/async-storage';


// const ChatScreen = () => {
// const [messages, setMessages] = useState<string[]>([]);
// const [message, setMessage] = useState('');
// const [username, setUsername] = useState<string | null>(null);

// // Function to retrieve username from AsyncStorage
// const retrieveUsername = async () => {
// try {
// const storedUsername = await AsyncStorage.getItem('username');
// if (storedUsername !== null) {
// console.log('Retrieved username:', storedUsername);
// setUsername(storedUsername);
// }
// } catch (error) {
// console.error('Failed to retrieve username:', error);
// }
// };


// useEffect(() => {
// retrieveUsername();

// socket.connect();

// socket.on('connect', () => {
// console.log('Connected to Socket.IO server with ID:', socket.id);
// });

// // Listen for incoming messages
// socket.on('message', (newMessage: string) => {
// console.log("setMessages() was run")
// setMessages((prevMessages) => [...prevMessages, newMessage]);
// });

// // Clean up the listener on unmount
// return () => {
// console.log("socket.off() was run");
// socket.off('message');
// };
// }, []);

// const sendMessage = () => {
// if (message.trim()) {
// socket.connect();

// // socket.on('connect', () => {
// // console.log('Connected to Socket.IO server with ID:', socket.id);
// // });


// console.log(username);
// console.log(message);

// socket.emit('message', {
// 'source_username': username,
// 'target_username':'jonathan',
// 'message':message});
// setMessage('');
// }
// };

// return (
// <View style={styles.container}>
// <FlatList
// data={messages}
// renderItem={({ item }) => (
// <View style={styles.messageContainer}>
// <Text>{item}</Text>
// </View>
// )}
// keyExtractor={(item, index) => index.toString()}
// />
// <TextInput
// value={message}
// onChangeText={setMessage}
// placeholder="Type a message"
// style={styles.input}
// />
// <Button title="Send" onPress={sendMessage} />
// </View>
// );
// };

// const styles = StyleSheet.create({
// container: {
// flex: 1,
// padding: 16,
// },
// input: {
// borderBottomWidth: 1,
// marginBottom: 16,
// },
// messageContainer: {
// padding: 10,
// borderBottomWidth: 1,
// },
// });

// export default ChatScreen;
import React, { useEffect, useState } from 'react';
import { View, Text, TextInput, Button, FlatList, StyleSheet } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';
import socket from '@/hooks/socket'; // import your socket instance

const ChatScreen = () => {
const [messages, setMessages] = useState<string[]>([]);
const [messages, setMessages] = useState<{ source_username: string; message: string }[]>([]);
const [message, setMessage] = useState('');
const [username, setUsername] = useState<string | null>(null);

// Function to retrieve username from AsyncStorage
const retrieveUsername = async () => {
try {
const storedUsername = await AsyncStorage.getItem('username');
if (storedUsername !== null) {
console.log('Retrieved username:', storedUsername);
setUsername(storedUsername);
}
} catch (error) {
console.error('Failed to retrieve username:', error);
}
};

// Function to log the entire conversation history
const logConversationHistory = () => {
console.log('Conversation History:', messages);
};

useEffect(() => {
// listen for incoming messages
socket.on('message', (newMessage: string) => {
setMessages((prevMessages) => [...prevMessages, newMessage]);
retrieveUsername();
socket.connect();

socket.emit('setname', username);

socket.on('connect', () => {
console.log('Connected to Socket.IO server with ID:', socket.id);
});

// Listen for incoming messages
socket.on('message_received', (newMessage: { source_username: string; target_username: string; message: string }) => {
console.log("setMessages() was run");
// Only add the message if the target_username matches the local username
if (username && newMessage.target_username === username) {
setMessages((prevMessages) => {
const updatedMessages = [...prevMessages, newMessage];
// Log the entire conversation history whenever a new message is received
logConversationHistory();
return updatedMessages;
});
}
});

// clean up the listener on unmount
// Clean up the listener on unmount
return () => {
console.log("socket.off() was run");
socket.off('message');
};
}, []);
}, [username]);

const sendMessage = () => {
if (message.trim()) {
socket.emit('message', message);
if (message.trim() && username) {
console.log(username);
console.log(message);
socket.emit('message', {
source_username: username,
target_username: 'targeted', // Replace with the actual target username
message: message,
});
setMessage('');
}
};
Expand All @@ -32,7 +247,7 @@ const ChatScreen = () => {
data={messages}
renderItem={({ item }) => (
<View style={styles.messageContainer}>
<Text>{item}</Text>
<Text>{`${item.source_username}: ${item.message}`}</Text>
</View>
)}
keyExtractor={(item, index) => index.toString()}
Expand Down
3 changes: 2 additions & 1 deletion Bubbles/app/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { Redirect } from 'expo-router';

export default function Index() {
return <Redirect href="/(tabs)/home"/>;
// return <Redirect href="/(tabs)/home"/>;
return <Redirect href="/welcome"/>;
}
25 changes: 17 additions & 8 deletions Bubbles/app/signup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { View, Text, TextInput, TouchableOpacity, StyleSheet, Alert } from 'reac
import { Input, Icon } from '@rneui/themed';
import styles from '../assets/stylesheet';
import { useNavigation, router } from 'expo-router';
import AsyncStorage from '@react-native-async-storage/async-storage';


export default function SignUp () {
Expand Down Expand Up @@ -53,7 +54,7 @@ export default function SignUp () {
const handleBack = () => {
router.push("/welcome");
};
const handleContinue = () => {
const handleContinue = async () => {
if (password !== confirmPassword || username.length < 1 ||
passwordError != '' || confirmPasswordError != '' || usernameError != ''
) {
Expand All @@ -62,13 +63,21 @@ export default function SignUp () {
return;
}

// Here you would typically call an API to register the user
console.log('Sign up with:', { username, email, password });
Alert.alert('Success', 'Account created successfully!');
router.push({
pathname: '/(tabs)/home',
params: {username, email, password}
});
try {
await AsyncStorage.setItem('username', username);
console.log('Username saved:', username);

// Here you would typically call an API to register the user
console.log('Sign up with:', { username, email, password });
Alert.alert('Success', 'Account created successfully!');
router.push({
pathname: '/(tabs)/home',
params: {username, email, password}
});
} catch (error) {
console.error('Failed to save username:', error);
}

// Reset form or navigate to another screen
};

Expand Down
7 changes: 6 additions & 1 deletion Bubbles/hooks/socket.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,10 @@
import { io } from 'socket.io-client';

const socket = io('http://10.17.67.160:38433/');
const socket = io('http://sydneyhome.ddns.net:38433/',{
// Optional configuration here, e.g.
// auth: { token: 'your_token' },
// transports: ['websocket'],
});


export default socket;
31 changes: 31 additions & 0 deletions Bubbles/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions Bubbles/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
"dependencies": {
"@expo/metro-runtime": "~3.2.3",
"@expo/vector-icons": "^14.0.2",
"@react-native-async-storage/async-storage": "^2.0.0",
"@react-navigation/native": "^6.0.2",
"@rneui/themed": "^4.0.0-rc.8",
"@splinetool/react-spline": "^4.0.0",
Expand Down