socket.io 채팅 구현하기 검색 결과

해당 글 5건

[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/채팅] 초기 프로젝트 셋팅 이번 게시글에서는 채팅을 구현하기 전 프로젝트 정리를 해보려고 한다. 프론트와 백엔드를 다른 프로젝트를 할 것이기 때문에 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