연습 프로젝트/채팅 (React, Express, Socket.IO) 검색 결과

해당 글 8건

[Mini/채팅] 채팅방 나가기

[Mini/채팅] 채팅방 나가기 대부분은 코드를 보고 이해하실 것이라 생각됩니다. 그 중 중요하다고 생각하는 것 위주로 작성하였습니다. 그리고 기능 구현은 마지막 게시글이니 참고하시길 바랍니다. 작업 내용 이전 게시글에서는 채팅을 구현해보았다. 이번 게시글에서는 채팅방 나가기를 구현해보자. 채팅방 나가기 구현하기 ◆ 프론트 프론트에서는 딱히 할게 없다. 이전에 만들어둔 함수 onLeaveRoom을 구현하면 된다. 채팅방 이름은 join state로 가지고 있었다. 이것을 백엔드 서버로 넘겨주면 되는 것이다. 그리고 성공하였으면 state를 다시 null로 변경해주면 끝이다. 아래 코드를 확인해보자. const onLeaveRoom = () => { socket.emit("leave-room", join,..
연습 프로젝트/채팅 (React, Express, Socket.IO) 2022. 2. 4. 07:04

[Mini/채팅] 채팅하기

[Mini/채팅] 채팅하기 대부분은 코드를 보고 이해하실 것이라 생각됩니다. 그 중 중요하다고 생각하는 것 위주로 작성하였습니다. 작업 내용 이전 게시글에서는 채팅방 접속 및 알림 생성을 구현해보았다. 이번 게시글에서는 채팅을 구현해보자. 채팅 구현하기 ◆ 프론트 우선 프론트 먼저 확인해보자. message eventName을 추가하여 msg가 오면 기존 list에 concat으로 객체 형식으로 추가해주었다. 이렇게 한 이유는 me가 false인 경우 상대방, me가 true인 경우 나 임을 구분할 수 있기 때문이다. 따라서 처음 채팅을 친 경우 즉, message event를 백엔드 서버로 보낼 때는 me를 true로 하여 list에 추가해주었다. 아래 2개 코드 모두 확인해보자. socket.on("..
연습 프로젝트/채팅 (React, Express, Socket.IO) 2022. 2. 2. 18:26

[Mini/채팅] 채팅방 접속하기 / 알림

[Mini/채팅] 채팅방 접속하기 / 알림 대부분은 코드를 보고 이해하실 것이라 생각됩니다. 그 중 중요하다고 생각하는 것 위주로 작성하였습니다. 작업 내용 이전 게시글에서는 채팅방 중복 생성 방지를 구현해보았다. 이번 게시글에서는 채팅방에 접속하고, 접속하였으면 알림을 띄워주는 것을 구현해보자. ◆ 채팅방 접속 채팅방 접속을 구현하려고 보니 코드를 나도 모르게 짜놓았다. onJoin 함수를 사용하면 된다. 프론트는 이정도로 끝이다. 이것에 맞게 백엔드 코드도 구현하였다. 아래 코드를 확인해보자. socket.on("join-room", (roomName, done) => { socket.join(roomName); done(); socket .to(roomName) .emit("join-msg", `$..
연습 프로젝트/채팅 (React, Express, Socket.IO) 2022. 1. 31. 07:38

[Mini/채팅] 채팅방 중복 생성 방지

[Mini/채팅] 채팅방 중복 생성 방지 대부분은 코드를 보고 이해하실 것이라 생각됩니다. 그 중 중요하다고 생각하는 것 위주로 작성하였습니다. 작업 내용 이전 게시글에서는 채팅방을 계속해서 생성할 수 있었다. 이번 게시글에서는 계속해서 생성하는 것을 방지하는 것을 구현해보겠다. ◆ 채팅방 중복 생성 방지 채팅방 중복 생성을 방지하는 것은 매우 쉽다. 이전에 만들어둔 join state를 사용하면 된다. join state는 내가 접속한 채팅방 이름이다. 따라서 join state의 값이 있는 경우 없는 경우를 나누어 처리하면 된다. 우선 Menubar 컴포넌트에서 방만들기를 하기 때문에 props로 join을 추가해주었다. 그리고 3항 연산자를 사용하여 join의 값이 없으면 방 만들기 있으면 방 나가..
연습 프로젝트/채팅 (React, Express, Socket.IO) 2022. 1. 29. 06:00

[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