채팅 구현하기 검색 결과

해당 글 4건

[Mini/채팅] 채팅방 생성 / 동기화

[Mini/채팅] 채팅방 동기화 대부분은 코드를 보고 이해하실 것이라 생각됩니다. 그 중 중요하다고 생각하는 것 위주로 작성하였습니다. 작업 내용 로그인을 한 후 다른 사람들과 채팅을 하기 위해서는 채팅방을 만들거나 접속해야 한다. 이번 게시글에서는 채팅방을 만드는 작업을 해보았다. 그리고 채팅방을 만들면 다른 로그인 된 브라우저에서 해당 채팅방이 실시간으로 업데이트가 되어야 하는데 이 작업도 같이 해주었다. 이번 게시글에서는 기능 기준으로 작성을 해보았다. ◆ 채팅방 생성 및 접속 채팅방 생성에 성공하면 채팅방 리스트를 rooms state에 업데이트 해주었다. 그리고 채팅방을 생성하였다는 것은 해당 채팅방에 접속을 하겠다는 의미와 동일하기 때문에 접속(join state)까지 같이 해주었다. 위 작업..
연습 프로젝트/채팅 (React, Express, Socket.IO) 2022. 1. 27. 07:13

[Mini/채팅] 로그인 구현 / 닉네임 설정

[Mini/채팅] 로그인 구현 / 닉네임 설정 대부분은 코드를 보고 이해하실 것이라 생각됩니다. 그 중 중요하다고 생각하는 것 위주로 작성하였습니다. 프론트 작업 프론트는 아래 작업을 진행해주었다. 1. 로그인 컴포넌트 생성 2. 로그인 시도 시 nickname을 server에 전달 (이후 사용을 할 수 있을 것 같음) 3. 서버에서 성공적으로 이벤트를 받으면, login state를 true로 변경해줌 로그인이라고 해서 실제 로그인이 아니라 임시 로그인이다(프로젝트 끝까지 임시 로그인으로 구현 예정). 로그인 시 채팅방에 접속 또는 생성할 수 있도록 구현 예정이다. 위 순서로 구현하고 로그인 시도하며 서버에 요청을 보내었지만 서버에서는 응답을 받지 못 하였다. 뭐지 싶어 이 순간 socket을 출력해보..
연습 프로젝트/채팅 (React, Express, Socket.IO) 2022. 1. 25. 06:11

[Mini/채팅] 프로젝트 셋팅

[Mini/채팅] 초기 프로젝트 셋팅 이번 게시글에서는 채팅을 구현하기 전 프로젝트 정리를 해보려고 한다. 프론트와 백엔드를 다른 프로젝트를 할 것이기 때문에 2개 만들어주어야 하니 빠르게 시작해보자. (못 따라올 경우 마지막에 링크되어 있는 github 주소 보고 clone하면 됩니다.) 프론트 설정하기 (React) CRA으로 빠르게 프로젝트를 생성해주자. 명령어 : npx create-react-app socketio-chat-client 설치하였으면 App.js, index.js 빼고 쓸모 없는 파일들은 다 지워주도록 하자. 그리고 socket 통신에 사용할 package를 설치해주자. 명령어 : yarn add socket.io-client 프론트 작업은 벌써 끝났다. 이제 백엔드 작업을 하도록..
연습 프로젝트/채팅 (React, Express, Socket.IO) 2022. 1. 23. 07:42

[Mini/채팅] Socket.IO, React, express를 이용한 채팅 프로젝트 - 소개

[Mini/채팅] Socket.IO, React, express를 이용한 채팅 프로젝트 - 소개 WebSocket을 사용하면서 우연히 Socket.IO 라이브러리를 보게 되었다. Socket.IO는 간단하게 실시간 양방향 이벤트 처리를 할 수 있는 라이브러리이다. 실시간 이벤트 처리하는 프로젝트의 경우 사용하면 좋을 것 같아 간단하게 공부해보며 프론트는 react, 서버는 express를 이용하여 채팅을 구현해보기러 하였다. WebSocket vs Socket.IO (장단점) Socket.IO는 WebSocket을 사용하면서 보았다고 하였는데, 그럼 2개의 차이가 무엇일까? 그냥 WebSocket을 쉽게 사용할 수 있도록 하는 라이브러리라고 생각하는 사람도 있겠지만 필자는 어느 정도는 맞지만 어느 정도는..
연습 프로젝트/채팅 (React, Express, Socket.IO) 2022. 1. 21. 07:36