1.Chatting 프로젝트
이번에는 개인 프로젝트로 웹 사이트에 접속한 유저들과 채팅을 주고 받을 수 있는 프로젝트를 만들어 보았다.
1-2.진행기간
이 프로젝트는 진행기간이 2~3일 정도 되는 것 같다. 이 프로젝트는 주제가 정해져 있었고 주제가 프로젝트 진행하기 직전에 배운 것을 통하여 진행하는 부분이 있어서 기간을 정하기가 애매 한다.
1-3.기술 스택
- HTML / CSS
- JavaScript
- MVC
- socket
- mysql
1-4.구현기능
- 회원가입을 통해 정보를 저장
- 회원가입을 통해 저장된 데이터를 통해 로그인
- 사람들과 대화를 주고 받을 수 있는 채팅창
- 원하는 사람에게만 메세지를 전달 할 수 있는 DM(귓속말?) 기능
- 접속자의 수를 표시해주는 기능 ### 1-2.진행기간
이 프로젝트는 진행기간이 2~3일 정도 되는 것 같다. 이 프로젝트는 주제가 정해져 있었고 주제가 프로젝트 진행하기 직전에 배운 것을 통하여 진행하는 부분이 있어서 기간을 정하기가 애매 한다.
1-3.기술 스택
- HTML / CSS
- JavaScript
- MVC
- mysql
1-4.구현기능
- 회원가입을 통해 정보를 저장
- 회원가입을 통해 저장된 데이터를 통해 로그인
- 사람들과 대화를 주고 받을 수 있는 채팅창
- 원하는 사람에게만 메세지를 전달 할 수 있는 DM(귓속말?) 기능
- 접속자의 수를 표시해주는 기능
1-5.파일구조
파일구조는 MVC구조로 만들어 보았다.먼저 view폴더에서 각 페이지를 만들고 routes로 각 페이지들의 경로를 설정 해주었다. models 파일에서 로그인과 회원가입에 필요한 데이터들을 처리해 주었고 controller를 이용하여 views 파일과 models파일을 연결 해 주었다. static폴더에는 각 페이지에 해당 되는 css파일을 넣어 주었다.
실행화면
#메인화면
메인 화면이다. 이 페이지에서는 이 사이트를 이용할 수 있는 방법을 알 수 있도록 제작을 해보았다.이 페이지는 별 다른 기능을 추가 하지 않았고 내가 원하는 색상과 사진들을 이용해여 사용자들이 보기 쉽도록 꾸며 보았다
이 페이지는 회원가입 페이지이다. 사용자가 입력한 정보를 axios를 통하여 post 할 수 있도록 만들었다.
axios({
method: "POST",
url: "/user/signup",
data: {
userid: form.userid.value,
pw: form.pw.value,
name: form.name.value,
},
})
.then((res) => {
return res.data;
})
.then((data) => {
console.log("create >> ", data);
// (1) alert 띄우기
alert("회원가입 성공");
// (2) 가입 성공시 로그인 페이지로 이동
// document.location.href란?
// javascript에서 페이지 이동할 수 있는 방법
// document 객체를 사용하기 때문에 프론트에서 사용 가능
document.location.href = "/user/signin";
});
이 페이지는 로그인 페이지다. 회원가입 페이지에서 회원가입을 하고 나면 로그인 페이지가 표시되도록 만들었다. 로그인도 axios로 post를 보내서 로그인이 가능 하도록 구현을 하였다.
axios({
method: "POST",
url: "/user/signin",
data: {
userid: form_login.userid.value,
pw: form_login.pw.value,
},
})
.then((res) => {
return res.data;
})
.then((data) => {
console.log("post profile >>", data); // true or false
if (data) {
// true
// (1) alert 띄우기
alert("로그인 성공");
// (2) form_info 폼 선택
const form_info = document.forms["form_info"];
// (3) form_login의 userid 값을 form_ingo의 userid value에 저장
form_info.userid.value = form_login.userid.value;
// (4) form_info 제출
// form[name="form_info"] 요소의 method와 action 속성 값에 의해
// POST /user/profile 요청을 수행
// <button type="submit> 을 누른 것과 동일한 효과 => 얘만 일반 폼 전송
form_info.submit();
} else {
// false
// (1) alert 띄우기
Swal.fire({
title: "로그인에 실패하였습니다",
text: "다시 입력해주세요",
imageUrl:
"https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/f28fc546296985.584f306ec4bcb.gif",
imageWidth: 400,
imageHeight: 300,
imageAlt: "Custom image",
});
// (2) form_info 초기화 (제출 안함)
form_login.reset();
}
});
}만약 잘못된 아이디와 비밀번호를 입력하게 된다면..
이러한 알림창을 뜬다. 이 알림창은 기존에 alret메세지 표시는 내 마음에 안들어서 sweetalert2라는 라이브러리를 이용하여 더욱 이쁘게 구현 해보았다.
정상적으로 로그인에 성공을 하게 된다면
이런 페이지가 표시 된다.
여기서 자신이 원하는 닉네임을 입력하고 입장하기 버튼을 누르면 채팅방에 입장이 되는데 여기서 내가 사용하고 싶은 닉네임을 다른 누군가가 먼저 사용하고 있을 시
이런 에러 메세지가 뜬다. 닉네임이 중복 되지 않았을시에는 바로 채팅방에 접속하게 되는데
여기서는 현재 이 채팅방에 접속 중인 접속자의 수가 표시되며 누군가가 채팅방에 입장 하였을시 입장 메세지도 표시가 되도록 만들었다.
const nickObj = {};
let numUsers = 0; //접속자수 확인 코드
function updateNickList() {
io.emit("updateNicks", nickObj, numUsers);
}
io.on("connection", (socket) => {
console.log("⭕ server socket connected>>", socket.id);
numUsers++;
io.emit("userCount", numUsers);
socket.on("setNick", (nick) => {
console.log("socket on setNick >>", nick);
if (Object.values(nickObj).indexOf(nick) > -1) {
socket.emit("error", "누군가 사용중인 닉네임 입니다!!");
} else {
//아이디 통과
nickObj[socket.id] = nick; // nickObj 객첵에 "소켓_아이디: 닉네임" 추가
io.emit(
"notice",
`${nick}님이 입장 하였습니다.현재 접속자 수: ${numUsers}명`
); //입장 메세지 "전체 공지"
// 전체 공지 => 서버에 접속한 모든 클라이언트에게 이벤트 전송
socket.emit("entrySuccess", nick); //입장 성공시
updateNickList(); //닉네임 리스트 객체 업데이트
}
});해당 코드는 닉네임 중복 여부와 접속시 표시되는 정보들을 구현한 코드이다.
