초보 개발자

taehyeki/chatting: 카톡같은 채팅만들기 ! (github.com) GitHub - taehyeki/chatting: 카톡같은 채팅만들기 ! 카톡같은 채팅만들기 ! . Contribute to taehyeki/chatting development by creating an account on GitHub. github.com 상대방이 로그인 한 경우 알림 표시 🟢 상대방이 채팅을 쳤을 때 실시간 업데이트 채팅방에 들어갔을 때 상대방에게 안읽음 표시 사라지게 하기 실시간 채팅하기 채팅 삭제하기 ( 채팅방 ) 채팅 삭제하기 ( 채팅방 목록 ) 사진 올리기

채팅방에서 나간 경우 방에서 퇴장한 경우 화면도 destroyed가 되기 때문에 이 전에 주었던 이벤트 리스너를 다 없애주어야 한다. 서버와의 연결이 끊긴 후에 다시 연결 된 경우 vuex의 특정 프로퍼티를 하나 올려줌으로써 소켓이 바뀐 걸 감지할 수 있도록 만들어 주었다. 따라서 이걸 watch로 감시해준다. 기존에 있던 소켓에 이벤트를 제거하고 다시 붙여주었다. 사실 enterRoom, chatSet만 설정해도 작동은 잘 되는 것 같은데 통일성을 위해서 나머지도 다 지우고 다시 붙여주었다. ( 어떤 건 안 붙여 줘도 작동이 잘 되고, 또 어떤 건 붙여줘야 하는지 잘 모르겠다... ) 채팅 삭제 카톡을 하다 보면 채팅을 삭제해야하는 경우가 있다. 이 기능을 만들어 보면 좋을 것 같다. 크게 생각해야될 ..

채팅방 내가 작성한 메시지는 오른쪽, 상대방은 왼쪽에 표시가 된다. 나는 채팅방을 만들 때 어떤식으로 구상을 했냐면, 채팅방에 입장한 순간 created로 설정을 여러개 해줄 것이다. 그 때 해당 채팅방의 기존 내역들을 db에서 불러와서 vuex에 배열로 저장해두고, 새로 채팅을 입력을 하면 또 그 내용을 vuex에 배열로 저장을 해줄 것이다. 그럼 2개의 배열이 존재할 것이고 그걸 getter로 불러와서 화면에 뿌려줄 것이다. 기존 채팅 내역 불러오기 처음에 채팅방에 들어오면 DB에서 해당 방에 존재하는 채팅들을 다 읽어온다. 그리고 vuex에 저장을 해둔다. 기존 채팅 내역들과, 새로 적은 채팅내용들을 리셋해주고, 상대방의 프사, 이름을 저장해준다. 그런 뒤에 받아온 채팅들을 하나씩 for문을 돌리면..

소켓의 특성상 화면이 새로고침되거나 다른 페이지로 이동하면 socket연결이 끊긴다. 따라서 나는 효율적으로 만들기 위하여 채팅방에 입장하면 소켓을 만들어 주는 방식을 사용하려고 하였다. 하지만 방에 들어갈 때마다( 특정 url ) 소켓이 계속 생성이 되었고, 방에 나가거나 해도( 다른 url로 이동 ) 소켓이 사라지지 않는 현상이 발생하였다. 이로인해 한번 메시지를 보내면 여러개가 전송이 되는 현상이 발생하였다. 짐작하건데 vue의 SPA특성상 하나의 페이지 안에서 모든 것이 이루어지기 때문에 어디로 실제로 어디로 이동이 된다는 개념이아니고 하나의 페이지 안에서 다른 화면을 보여주는 것이기 때문에 소켓 연결이 끊어지지 않은 것 같다. 따라서 나는 특정 채팅방에 입장할 때 소켓을 생성하는 방법이 아니라,..