[ Node.js, Vue.js, Socket.io ] 카톡같은 채팅 만들기 5

상대방이 현재 들어와있는지 확인

어떻게 하면 상대방이 현재 들어와있는지 확인할 수 있을까..?라는 생각이 들었다.

소켓아이디는 쉽게 바뀔 수 있기 때문에 소켓아이디를 사용하면 힘들어질 것 같았다.

따라서 유저를 식별할 수 있는 유니크한 방을 하나 만들고 로그인하면 그 소켓 방으로 입장을 시킨다. 그 이후에 어떤 유저가 채팅방 목록에 들어갔을 때  소켓 방에 현재 사람이 존재하는지 유무를 체크하고 방에 있다면 로그인 했다는 것이므로 표시를 해주고, 존재하지 않다면 아무것도 안해주는 방식을 떠올렸다.

 

먼저 상대가 로그인을 하면 소켓 방에 입장해주는 코드이다.

vuex에서 userId를 가져와서 만약 userId가 1이라면 1-2번방으로 입장을 시킨다.

1-1이 아닌 이유는 나는 1-1에는 다른 목적으로 사용하고 있기 때문이다 ( 채팅방 목록 )

 

이렇게 입장을 시킨 뒤 플러그인에 또 하나의 함수를 만들어주었다.

이 함수는 현재 상대가 지금 존재 하는지 아닌지를 판단해주는 역할을 한다.

채팅방 목록이 생성되면 위의 함수를 실행시키고, 채팅서버로 이벤트를 보낸다.

이벤트를 보낼 때 현재 로그인해있는 유저의 아이디가 담긴 배열을 보낸다.

이건 chatRooms()의 일부인데, 서버로 부터 받아온 채팅방 목록들을 map함수로 돌리면서 상대방의 아이디가 널이 아니라면 상대방의 아이디-2를 만들어 반환시킨 뒤에 커밋을 시킨다. 저 위 노란 박스는 그 커밋 시킨 걸 가져오는 게터이다.

노드서버에 아래와 같이 세팅을 해주었다.

빈 배열을 하나 만들고 받아온 데이터를 반복문으로 돌리면서 그 해당하는 방이 존재하는지를 파악한 뒤 존재하면 배열에 그 방의 이름을 넣는다. 이 걸로 현재 채팅 상대가 로그인 해있는지를 확인할 수 있는 것이다.

 

그 뒤에 다시 소켓이벤트를 사용하여 클라이언트로 보낸다. 위의 빨간 박스에가이 값을 받아 처리하는 역할을 하는 것이다. 빨간 박스에 있는 setAreYouOn을 확인해보자.

 

받아온 배열에 있는 값 중 현재 채팅방목록에 있는 유저 아이디와 같은 것이 있다면, 로그인 했다는 것이므로, 그 채팅방목록의 IM_ON의 값을 true로 바꿔주자, ( default값은 false )

상대방이 로그인 했을 때 실시간으로 바꿔주는 기능도 넣어볼까 하다가 그건 귀찮아서 하지 않았지만

상대방이 들어왔을 때 소켓이벤트를 한번 일으키면 구현할 수 있을 것 같다. 아래 영상을 통해 상대방이 로그인 했을 때 리로드 하면 빨간 프로필 사진 우측 상단에 파란불이 들어오는 것을 확인할 수 있다.

 

 

 

사진, 동영상 올리기 ( multer-s3 )

채팅을 하다보면, 사진과 동영상을 올려야 할 때가 있다.

이번엔 사진과 동영상을 올리는 방법에 대해서 찾아보았다!!

 

아래는 결과물이다.

 

 

 

 

기본적으로 설명을 드리자면,

html에서 파일을 올리려면 input 태그를 사용해야한다. input태그에 형식을 file로 하면 저렇게 파일을 선택할 수 있는 창이 나오게 된다. 그리고 이벤트 리스너 안에 담긴 이벤트에 그 파일이 담겨 있다. 처음에 단순히 이렇게 사용하려고 했는데,

파일 형식이 버퍼로 담겨 있었다. 아마 버퍼형식을 파일형식으로 바꿔줘야 할 것만 같았다. 버퍼, 스트림 이런건 잘 모르기에.. 라이브러리를 찾아보다 multer라는 것을 찾았다. 

 

multer 사용하니 파일 업로드 하는 부분에 있어서 엄청~~~~~~~~~~ 편해졌다. 

차근차근 코드를 살펴보자!!

버튼 두개 (사진 , 동영상) 를 만들고 각 버튼을 누르면 input버튼이 눌러지도록 설정하였다.

input안에서 change이벤트가 일어나면( 파일이 선택이 되면) 실행될 함수들을 설정해주었다.

파일이 없으면 알림창 띄워 끝내주고, 파일이 있다면 formData안에 넣어주었다.

사진 같은 경우에는 여러개 올릴 수 있도록 multiple을 설정해두어 반복문을 사용하였고, 비디오 같은 경우는 따로 지정해주지 않았기에 하나만 넣어주었다.

 

여기서 나는 key이름을 file이라고 해두었는데 이는 아무이름으로 해도 상관이 없다. 나는 form을 사용하지 않고 input으로만 사용했기에 formData를 사용해주었다. 아무튼 받아온 파일을 폼데이터에 받아서 서버에 보내보도록 하자

 

사진

파일을 보낼 때에는 반드시 콘텐츠 타입을 multipart/form-data로 해주어야한다. form을 썼다면 enctype인가? 그걸 저렇게 지정해주면 되는데 나는 따로 지정해주지 않았기에 헤더에 담아 보내주었다. 저렇게 서버에 보내면 

서버에서는 위와 같이 코드를 작성해두었다. multer를 사용하여 저렇게 깔끔하게 끝낼 수 있었다.

uploadImg라는 미들웨어를 하나 만들어두면 내가 지정한 s3안에(multer-s3를 사용하였다면) 파일을 올린 뒤 그 파일의 정보가 req.files안에 담겨있다. single을 사용하였다면 req.file안에 담겨 있다.  'file'은 프론트에서 내가 formdata에 넣었을 때의 key값이다. 

 

동영상

동영상도 이미지와 마찬가지이다. 하지만 MEDIA에 이미지는 1을 넣었고 동영상은 2를 넣었다. DB에서 값을 가져올 때 MEDIA에 담긴 값을 이용하여, 메시지인지, 사진인지, 동영상인지 구불하려고 하였다. MEDIA가 1이상이라면 MESSAGE안에 업로드된 s3의 url이 담겨 있을 것이다. 

 

동영상은 하나이기에 single을 사용하였고 그렇기에 req.file 안에 정보가 담겨있다.

이제 uploadImg uploadVideo 미들웨어를 살펴보자

 

multer-s3를 사용하기 위해서 아래의 모듈 3개를 npm을 통해 내려 받자

npm i multer multer-s3 aws-sdk

 

json형식의 파일을 만들어 거기에 id , secret key를 넣어 aws.config로 인식을 시키면 s3와 연동을 시켜준다.

그 이후 버킷이름, acl, type을 설정하고 아래와 같이 cb함수까지 설정해주면 지정한 이름으로 s3안에 올라가 있는 것을 확인할 수 있다.

config/s3.json