paperkeem / nextron-chatty

📱 next.js, Electron, firebase로 구현한 데스크탑 채팅 어플리케이션 입니다.

💻 Chatting Desktop App

📌 어플리케이션 설치 파일 주소

🗓 구현 일정 : 2023.02.06 - 2023.02.22

목차

1. 프로젝트 실행 방법
2. 구현사항
3. 회고

프로젝트 실행 방법

1. 의존 패키지를 설치합니다.

npm install

2. 파이어 베이스 사용을 위해서 renderer 폴더 하위에 .env 파일을 생성하고 다음과 같은 내용을 추가합니다.

NEXT_PUBLIC_API=
NEXT_PUBLIC_FIRE_DOMAIN=
NEXT_PUBLIC_FIRE_DATABASE=
NEXT_PUBLIC_FIRE_PROJECT_ID=

3. 서버를 실행합니다.

npm run dev

etc. chatty APP에서 이용할 수 있는 테스트 계정 정보입니다.

[email protected] / password=1234567
[email protected] / password=1234567
[email protected] / password=1234567

기술스택

React, TypeScript, Next.js, Electron, firebase, react-query, ant-design

구현사항

• 회원가입
  
• 로그인
  
• 유저 목록
  
• 1:1 채팅
  
• 그룹채팅
  

1. firebase authentication을 이용한 회원가입, 로그인

nextron-chatty/renderer/src/apis/firebase.tsx

Lines 24 to 52 in 9e0d467

	export const signInEmail = async (
	email: string,
	password: string,
	name: string
	) => {
	return createUserWithEmailAndPassword(auth, email, password)
	.then((res) => {
	localStorage.setItem(
	"userData",
	JSON.stringify({ ...res.user, displayName: name })
	);
	updateProfile(auth.currentUser, {
	displayName: name,
	});
	return res;
	})
	.catch((error) => {
	const errorMessage = error.message;
	throw new Error("회원가입 에러" + errorMessage);
	});
	};
	export const logInEmail = async (email: string, password: string) => {
	return signInWithEmailAndPassword(auth, email, password).catch((error) => {
	const errorMessage = error.message;
	throw new Error("로그인 에러" + errorMessage);
	});
	};

• 회원 가입 시, updateProfile함수를 체이닝 해 firebase user 정보에 내가 기입한 별명을 displayName으로 저장
• 에러 발생 시, throw new Error로 에러를 넘겨 로그인 페이지에서 처리

nextron-chatty/renderer/src/apis/firebase.tsx

Lines 59 to 70 in 9e0d467

	export const onAuth = (callback) => {
	onAuthStateChanged(auth, async (user) => {
	let updatedUser;
	if (user != null) {
	updatedUser = user;
	localStorage.setItem("userData", JSON.stringify(updatedUser));
	} else if (user == null) {
	updatedUser = JSON.parse(localStorage.getItem("userData")) || {};
	}
	callback(updatedUser);
	});
	};

nextron-chatty/renderer/src/context/AuthContext.tsx

Lines 11 to 32 in 9e0d467

	const AuthContext = createContext<TAuth | null>(null);
	export function AuthProvider({ children }: { children: React.ReactNode }) {
	const [user, setUser] = useState<any>({});
	useEffect(() => {
	onAuth(setUser);
	}, []);
	return (
	<AuthContext.Provider
	value={{
	user,
	uid: user?.uid,
	name: user?.displayName,
	email: user?.email,
	}}
	>
	{children}
	</AuthContext.Provider>
	);
	}

• 로그인 시 firebase의 onAuthStateChanged 함수를 이용해 current user 정보를 받아오도록 구현
• 에러를 대비하여 유저 정보를 localStorage에 이중으로 저장
• context api를 이용해 유저 정보를 전역으로 관리

2. react-query를 이용해 firebase api 호출 / refetchInterval 설정을 통해 폴링 구현

nextron-chatty/renderer/pages/chat/[roomId].tsx

Lines 17 to 20 in 9e0d467

	const {
	chatQuery: { data: chat },
	sendMsgQuery,
	} = useChat(roomId as string);

nextron-chatty/renderer/src/hooks/useChat.tsx

Lines 11 to 32 in 9e0d467

	export default function useChat(roomId: string) {
	const queryClicent = useQueryClient();
	const chatQuery = useQuery<IChat[] | unknown[]>(
	["chat", roomId],
	() => getChatMsg(roomId),
	{ refetchInterval: 1000 }
	);
	const sendMsgQuery = useMutation(
	({ roomId, uid, name, message }) => {
	setChatMsg(roomId, uid, name, message);
	},
	{
	onSuccess: () => {
	queryClicent.invalidateQueries(["chat", roomId]);
	},
	}
	);
	return { chatQuery, sendMsgQuery };
	}

• react query의 refetchInterval을 1000으로 설정하여 서버 polling을 구현
• 같은 query key를 쓰는 함수끼리 custom hook으로 묶어 관리 용이성 증대
• 메세지를 보낼 시에는 useMutation을 이용해 채팅방 데이터 동기화를 구현

3. 채팅방 내 중복되는 로직은 custom hook으로 만들어 관리

nextron-chatty/renderer/src/hooks/useMsg.tsx

Lines 3 to 20 in 9e0d467

	export default function useMsg(callback, obj) {
	const [message, setMessage] = useState("");
	const handleChange = (e: any) => {
	const { value } = e.target;
	setMessage(value);
	};
	const handleSubmit = async (e: any) => {
	e.preventDefault();
	if (!message || message.trim() === "") {
	return;
	}
	setMessage(null);
	callback.mutate({ ...obj, message });
	};
	return { message, handleChange, handleSubmit };
	}

nextron-chatty/renderer/src/hooks/useScroll.tsx

Lines 3 to 11 in 9e0d467

	export default function useScroll(chat) {
	const chatWindowRef = useRef(null);
	useEffect(() => {
	chatWindowRef.current.scrollTop = chatWindowRef.current.scrollHeight;
	}, [chat]);
	return { chatWindowRef };
	}

• 1:1 채팅방과 그룹 채팅방에서 동일하게 쓰이는 input event와 scroll 이벤트를 custom hook으로 관리

nextron-chatty/renderer/pages/chat/[roomId].tsx

Lines 22 to 27 in 9e0d467

	const { chatWindowRef } = useScroll(chat);
	const { message, handleChange, handleSubmit } = useMsg(sendMsgQuery, {
	roomId,
	uid,
	name,
	});

nextron-chatty/renderer/pages/group/[idx].tsx

Lines 22 to 27 in fd23871

	const { chatWindowRef } = useScroll(groupChat);
	const { message, handleChange, handleSubmit } = useMsg(sendGroupQuery, {
	idx,
	uid,
	name,
	});

• useMutation 함수를 callback으로 넘기고 obj를 Value 값으로 넘겨 이용