NestJS 및 Socket.io와의 실시간 채팅

이 게시물은 Nestjs 및 Socket.io를 사용하여 실시간 채팅 시스템을 구축하는 것을 탐색합니다. 나는 강력한 백엔드가 부족한 이전 마이크로 선정 프로젝트 (React 및 Micro Frontends를 가진 LEGO로 시스템을 구축)를 다시 방문했습니다. 이번에는 여러 마이크로 프론트 페이지에서 실시간 채팅 기능을 처리하기 위해 NestJS 백엔드를 추가했습니다.

⚠️이 블로그는 올해 더 자주 게시물과 비디오로 크게 확장 될 것입니다! Stay Updated! 를 구독하십시오

프로젝트 목표? 목표는 채팅에 연결된 사용자간에 메시지를 보내고 수신하기위한 간단한 시스템을 작성하여 불필요한 복잡성을 최소화하는 것이 었습니다. <: :> 백엔드 프로젝트 : https://www.php.cn/link/037a15f03246f075193b2a295ba4c466

<: :> 프론트 엔드 프로젝트 :

개발 프로세스 반엔드는 Nestjs Cli를 사용하여 시작되었습니다

그런 다음 파일이 만들어졌습니다 ( https://www.php.cn/link/037a15f03246f075193b2a295ba4c466/blob/master/src/chat/chat-gateway.ts 채팅 기능에는 다음이 포함되었습니다

사용자 연결 알림

사용자 연결 끊기 알림 메시지 방송

는 데코레이터를 사용하여 공급자로 기능합니다 ( 및

및 메소드 공식 Nestjs 문서에 자세히 설명 된 바와 같이 (> https://www.php.cn/link/9edfa99c15e2845965b91b38e2b1311c ), 는 클라이언트 Socket 인스턴스를받습니다. 새로운 사용자의 모든 연결된 클라이언트에 알리는 이벤트를 방출합니다. 도 마찬가지로 인스턴스를 사용하여

이벤트를 방출합니다. 메시지 처리 ()

장식 메소드는 들어오는 메시지를 처리합니다. 연결된 모든 클라이언트에게 메시지를 받았습니다 프론트 엔드 구현 프론트 엔드 (이전에 언급 된 마이크로 프론트 블로그 게시물에 자세히 설명되어 있음)는 수정이 필요한 단일 채팅 구성 요소를 사용합니다. 변경이 이루어졌다 (https://www.php.cn/link/ee0f827fe45c91c956bacfd78d91d47b/blob/master/apps/chat/src/components/chat/index.tsx

도서관을 통합합니다 백엔드 포트에 대한 연결을 설정하십시오 ,

, 및 에 대한 이벤트 리스너를 추가하십시오 이전 "봇 회신"논리를 제거하기위한 사소한 조정

구성 요소의 논리는 비교적 간단합니다

결론 이 프로젝트는 핵심 기능에 중점을 두어 광범위한 추상화없이 채팅 모듈을 직접 구현합니다. 향후 게시물은 NestJS 및 Socket.io를 사용하여 추가 기능을 탐색합니다.

위 내용은 NestJS 및 Socket.io와의 실시간 채팅의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!