NextJS chat app
1.0.0
라이브 예제 : https://next-js-chat-app.vercel.app
단계별 가이드 : https://iple.com/blog/realtime-chat-app-nextjs-vercel
이것은 Ally를 메시징 플랫폼으로 사용하여 Next.js와의 데모 채팅 응용 프로그램입니다.
사용을 보여줍니다.
프로젝트는 다음 구성 요소를 사용합니다.
Next.js는 Vercel의 반응 프레임 워크입니다. 서버 사이드 렌더링, 서버리스 기능 및 원활한 호스팅으로 정적 웹 응용 프로그램을 구축하는 데 사용됩니다. 그것은 당신이 이미 가지고있는 반응 지식을 취하고 구조와 관습을 제자리에 두는 프레임 워크입니다.
Ably는 최종 사용자에게 직접 실시간 기능을 직접 제공 할 수있는 통합 서비스 제품군이있는 실시간 PUB/SUB 메시징 플랫폼입니다.
Vercel은 근거에서 Next.js Apps를 호스팅하고 서버리스 기능을 제공하는 호스팅 플랫폼으로 호스팅 플랫폼입니다.
React는 자체 상태를 관리하는 캡슐화 된 구성 요소가있는 사용자 인터페이스를 구축하기위한 JavaScript 라이브러리입니다.
우리 가이 연습으로 구축 할 앱의 UI
브라우저에서 실행되는 실시간 채팅 앱을 구축하겠습니다. 다음 .js Create-Next-App 템플릿에 구축되며, 메시지를 보내고받을 수있는 반응 구성 요소가 포함되어 있습니다. 또한 다음에 연결하는 데 사용될 Next.js 서버리스 기능도 작성합니다.
이 앱을 빌드하고 배포하려면 다음과 같은 것이 필요합니다.
또한 API 키가 필요합니다. API 키를 얻으려면 일단 ABLE 계정을 만들었습니다.
.env 라는 파일을 만듭니다. ABLY_API_KEY=your-ably-api-key:goes-herenpm install 실행하십시오.npm run dev 실행하십시오.Next.js Dev 서버가 회전하고 데모 채팅 응용 프로그램이 표시됩니다.
우리는 Vercel 개발 서버로 사용하고 파이프 라인을 빌드합니다.
다음에 제작에 배치하는 가장 쉬운 방법은 Next.js의 제작자의 Vercel 플랫폼을 사용하는 것입니다. Vercel은 STATIC & JAMSTACK 배포 및 서버리스 기능을 지원하는 글로벌 CDN을 갖춘 올인원 플랫폼입니다. - 다음 .js 문서
새 채팅 앱을 Vercel에 배포하려면 다음을 수행해야합니다.
ABLY_API_KEY 추가하십시오이 예제를 확장 할 수있는 몇 가지 방법이 있습니다.
이 데모에는 현재 채팅 기록이 없으며 채팅에 참여한 후에 들어오는 메시지 만 볼 수 있습니다. 최대 2 분의 역사적으로 Ably의 리 윈드 기능을 최대 48 시간 동안 유료 계좌로 사용 하여이 데모를 확장 할 수 있습니다.
채팅 메시지와 함께 전송 된 사용자 이름이 없습니다. 이 데모는 사용자 이름 입력 상자를 소개하고 전송 된 메시지에 현재 사용자 이름을 추가하기 위해 확장 될 수 있습니다.
데모는 무작위로 생성 된 클라이언트 ID를 고유 식별자로 사용합니다. 이는 메시지를 보낸 "나"또는 "다른 사람"인지 감지 할 수있는 방법입니다.
