본문 바로가기

Websocket4

웹 실시간 통신 방법(웹소켓, polling,long polling, streaming) 먼저 웹 실시간 통신방법에 대해서 알기 위해서는 http에 대해서 알아야한다. 브라우저에서는 HTTP Protocol을 사용해서 데이터를 주고 받기 때문이다. HTTP란? 쉽게 말해서 클라이언트와 서버가 주고 받는 통신이라고 생각하면 된다. 이러한 http는 ⇒ 클라이언트가 보낸 요청에 대해 서버가 응답을 마치면 맺었던 연결을 끊어버리는 비연결성의 성질을 가지고 있음. ⇒ 따라서 HTTP는 request, response 형태의 단방향 통신이며 한번 통신을 할때마다 많은 양의 데이터를 header에 담아서 보내게 됨 . 이렇게 http는 단방향성이기 때문에 실시간 통신을 하는것처럼 보이기 위해서 서버에게 계속적으로 요청을 보내야하고 요청을 보낼때마다 불필요하게 많은 양의 데이터를 보내야한다는 단점이 있다.. 2024. 1. 25.
실시간 채팅 기능 수정하기(실시간 채팅 업데이트) 예전에 진행했던 트위터 프로젝트 문서를 블로그에 올리면서 많은 오류를 발생했다. 그래서 최근에 트위터 프로젝트 코드를 다시 고쳐나가 시작했다. 그 중 가장 많이 고쳤던 것은 실시간 채팅 부분이다. 오늘 새로 수정한 부분은 채팅 데이터를 실시간으로 반영해서 화면에 보여지게 하는 코드를 수정한 것이다. 예전의 코드에서는 현재 로그인한 유저가 보낸 메세지만 실시간으로 채팅창에 업데이트 되었지만 이제는 다른 유저가 보낸 메세지도 즉각적으로 업데이트된다. 수정된 코드는 다음과 같다. 처음 채팅 데이터를 받는게 아니라 상대방이 새로운 데이터를 보내면 배열 형태가 아니라 오브젝트 형태로 받게 된다. -> 이를 활용해서 만약 웹소켓으로 받은 새로운 데이터가 단일 객체일때 새로운 코드 추가 -> 새 데이터 채팅를 보낸 .. 2024. 1. 24.
메세지 채팅 기능 구현하기(백엔드 코드, redis 연결 ) 이 글은 아래의 메세지 채팅 기능 구현하기 (프론트 코드)와 이어지는 글입니다! 이번 글에서는 백엔드 코드에 대해서 적어볼 예정입니다. 메세지 채팅 기능 (웹소켓, redis, 실시간 알람 기능) 미리보기 📁 채팅 기능 미리보기 실시간 소통을 위해서 웹소켓 통신 방법을 사용하였고, 채팅 데이터를 저장하기 위해서 redis를 사용했다. redis 를 사용하게 된 이유는 기존에 사용하던 mysql 데 in-my-universe23.tistory.com 미리보기 📁 채팅 기능 미리보기 백엔드 웹소켓을 사용해서 실시간 통신을 구축하고 redis를 통해서 유저들 소켓 아이디, 소켓 채팅 데이터 등을 Redis 클라이언트 설정 및 연결 : 데이터 베이스 연결을 설정하고 관리 소켓 이벤트 핸들러 : 클라이언트와 실시.. 2024. 1. 24.
메세지 채팅 기능 (웹소켓, redis, 실시간 알람 기능) 미리보기 📁 채팅 기능 미리보기 실시간 소통을 위해서 웹소켓 통신 방법을 사용하였고, 채팅 데이터를 저장하기 위해서 redis를 사용했다. redis 를 사용하게 된 이유는 기존에 사용하던 mysql 데이터베이스는 상대적으로 실시간 데이터를 가져오기에는 느릴것이라고 판단했고 redis는 빠른 읽기/쓰기 성능 제공, 실시간으로 데이터 접근하고 업데이트, 빠른 응답 시간 유지 Pub/Sub 기능 제공 (특정 집단에 메세지 전달 유용할것이라고 판단) 같은 장점을 가지고 있기때문에 사용하게 되었다. 이번 게시물에서는 채팅 기능 중 프론트 쪽 코드에 대해서 적어보고자 한다. 기능 설명 프론트 Auth 페이지 로그인하면 login통신으로 로그인한 유저 email과 socketId를 보내줌. Message 페이지 u.. 2024. 1. 24.