개인 프로젝트 | KPP - 13

오늘의 목표

• 실시간 채팅
• K-POP 페이지 만들기

이어서 실시간 채팅

우선 간단하게 로그인 되어있으면 유저 닉네임을 표기하고, 로그인 되어있지 않으면 닉네임을 입력할 수 있게 설정하고
닉네임과 내용이 있어야만 보내지게끔 할 생각이다.

color-hash 모듈로 sessionID값으로 고유의 색상을 만들어, 유저 닉네임에 적용한다.
채팅하는 페이지에 접속시 라우트에서 해쉬 컬러값을 받아 저장해둔다.

서버 채팅 소켓에 sendMessage이벤트 호출시 receiveMessage이벤트를 호출하는 형태로 만들어서 유저의 닉네임, 메세지, 세션의 컬러를 데이터로 넘겨준다.

function chatSocket(io) {
	const chat = io.of('/chat');

	chat.on('connection', function (socket) {
		const req = socket.request;
		socket.on('send_message', function (data) {
			chat.emit('receive_message', {
				name: data.name,
				message: data.message,
				userColor: req.session.color,
			});
		});
	});
}
}

클라이언트에서 sendMessage이벤트 호출에 자신의 닉네임과 메세지를 보내고, receiveMessage이벤트에서는 세션의 컬러값과 현재 자기자신의 세션 컬러값이 같으면 mine클래스를 추가해서 구분한다.

socket.emit('send_message', {
		name: communityObj.chat.elements.inputNickName.value,
		message: communityObj.chat.elements.inputMessage.value,
	});

socket.on('receive_message', function (data) {
		const messsageContainer = document.createElement('li');
		messsageContainer.classList.add('chat-message-container');

		// 내가 보낸 메세지인지 아닌지 확인 및 class 선택자 추가
		if (data.userColor == userColor) messsageContainer.classList.add('mine');
		else messsageContainer.classList.add('other');

		const nameTag = document.createElement('p');
		nameTag.classList.add('chat-message-name');
		nameTag.style.color = data.userColor;
		nameTag.textContent = data.name;

		const messageTag = document.createElement('p');
		messageTag.classList.add('chat-message-text');
		messageTag.textContent = data.message;

		const clearBothTag = document.createElement('div');
		clearBothTag.classList.add('clear');

		messsageContainer.appendChild(nameTag);
		messsageContainer.appendChild(messageTag);

		communityObj.chat.elements.list.appendChild(messsageContainer);
		communityObj.chat.elements.list.appendChild(clearBothTag);

		// 채팅 스크롤 최 하단으로 이동
		communityObj.chat.elements.list.scrollTop = communityObj.chat.elements.list.scrollHeight;
	});

1:1 채팅도 구현하고싶지만 시간이 얼마 안남았다.. 다른거부터 ㅎㅎ;
우선 개념적으로 생각해보면 1:1 채팅은 두 유저에게 종속적인 룸을 만들어서 거기서 1:1 소켓 통신을 하는 방법이 좋아보인다.

메인 페이지 잠깐 손보기

메인 페이지에 있는 슬라이더 앨범 목록을 클릭하면 유튜브 영상을 띄울 것이다.
모달창 처럼 백그라운드를 어둡게 주고, 컨텐츠를 클릭할 때 마다 바꿔주는 로직을 설계한다.
단순히 하드코딩으로 하려고 하다가.. node에서 요청받은 파일을 읽어서 보내주는 라우트를 만들어 놓은 것이 있어서 json파일을 생성해서 이름과 유튜브URL 속성을 가지는 배열 객체 형태로 만들었다.
슬라이더 클릭시 슬라이더 컨텐츠인 것을 확인하고 맞으면 미리 받아둔 json데이터의 이름과 클릭한 컨텐츠의 이름을 비교해서 url을 교체해주는 식으로 영상을 바꿔줬다.

Kpop 페이지

한국 대중음악의 역사를 간략하게 소개하는 페이지를 만들예정이다.
여기서 애니메이션을 해서 구현하고싶은데.. 시간이 얼마 없다는게 함정