초보 개발자

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

상대방이 현재 들어와있는지 확인 어떻게 하면 상대방이 현재 들어와있는지 확인할 수 있을까..?라는 생각이 들었다. 소켓아이디는 쉽게 바뀔 수 있기 때문에 소켓아이디를 사용하면 힘들어질 것 같았다. 따라서 유저를 식별할 수 있는 유니크한 방을 하나 만들고 로그인하면 그 소켓 방으로 입장을 시킨다. 그 이후에 어떤 유저가 채팅방 목록에 들어갔을 때 소켓 방에 현재 사람이 존재하는지 유무를 체크하고 방에 있다면 로그인 했다는 것이므로 표시를 해주고, 존재하지 않다면 아무것도 안해주는 방식을 떠올렸다. 먼저 상대가 로그인을 하면 소켓 방에 입장해주는 코드이다. vuex에서 userId를 가져와서 만약 userId가 1이라면 1-2번방으로 입장을 시킨다. 1-1이 아닌 이유는 나는 1-1에는 다른 목적으로 사용하..

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

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

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

client side // "vue-socket.io": "^3.0.10", import io from 'socket.io-client'; created () { this.addTodo('gogo') this.socket = io('http://localhost:3001',{ transports: ["websocket"], withCredentials: true, }); }, sever side // "socket.io": "^3.1.2" var app = require("express")(); var server = require("http").createServer(app); var io = require("socket.io")(server, { cors: { credentials: true, }, ..

플러그인은 여러 컴포넌트에서 사용되는(특히 전역) 기능을 만들 때 사용한다. Vue.use(Vuex); Vue.use(VueRouter); Vue.use(Vuex)를 호출하면, Vuex에 정의되어있는 install()이라는 메서드가 호출된다. 이 사실이 가장 간단하면서도 가장 중요하다. 첫 번째 방법 🛺 간단히 console.log를 찍는 플러그인을 하나 만들어보려고한다. plugins안에 하나의 파일을 만들자. plugins/gogosing.js import Vue from 'vue' export const GoGoSSing = { install (Vue) { Vue.prototype.$mygogo = () => { console.log('고고싱...') } } } Vue.use(GoGoSSing) ​..

완성본 미리보기 2022.06.06 - [[ Node.js Vue.js Socket.io ] 채팅] - [ Node.js Vue.js Sockect.js ] 카톡 채팅 만들기 완성 내가 구현해보려고 하는 기능은 기본적인 채팅 기능에 더하여 여러가지가 있다. 1. DB를 사용하여 나갔다 들어와도 기존 채팅이 유지가 되어있어야 함 ✅ 2. 읽음표시 기능(실시간) ✅ 3. 카톡처럼 같은 시간에(분 단위)적히면 마지막 채팅만 시각이 적혀야함, ✅ 4. 채팅방 목록에 안읽은 채팅 개수와 마지막 채팅 , 마지막 채팅 시간, 프로필 사진 받기, ✅ 5. 채팅 삭제 기능, 상대방에게도 메시지가 바뀌어 보여야함 (실시간) ✅ 6. 사진 및 동영상 전송 기능, ✅ 7. 현재 상대방이 들어와있는지 표시할 수 있는 기능 ✅ ..