이 튜토리얼은 vue.js 및 Pusher 's Chatkit 서비스를 사용하여 실시간 채팅 응용 프로그램을 구축함으로써 안내합니다. 우리는 사용자 관리 및 룸 생성을위한 Chatkit의 백엔드 기능을 활용하여 프론트 엔드에 중점을 둡니다.
주요 기능 :
멀티 채널/객실 지원.
실시간 멤버 존재 감지.
<ator> 타이핑 표시기.
</ator></presence></annel></p>
전제 조건 : <p>
<to> advanced vue.js, vuex 및 CSS 프레임 워크 (여기에 사용 된 부트 스트랩 vue와 같은) 지식이 가정됩니다. node.js 및 vue cli를 설치해야합니다
<strong>
프로젝트 설정 : </strong>
</to></p>
<ul>
<ue> vue.js 프로젝트를 만듭니다 :
<li>
<feature feature> 수동 기능 선택을 선택하고 Babel, Vuex 및 Vue 라우터를 선택하십시오.
</feature>
</li>
<li>
<ies>의 종속성 설치 :
</ies>
</li>
<li>
</li>
<fol> 필요한 폴더 구조 및 파일을 만듭니다 (원본 튜토리얼 이미지에 표시된대로). 로드 링 .io에서 및 </fol></ue>
</ul>를 다운로드하여 에 배치하십시오.
<strong>
</strong>
chatkit 설정 : <p>
</p>
<k> 푸셔 웹 사이트에서 chatkit 인스턴스를 만듭니다
<e.> chatkit 콘솔에서 사용자 (예 : "John,"Salt ","Hunt ") 및 객실 (예 :"일반, ""무기 ")을 창조하십시오.
<pre class="brush:php;toolbar:false"><code class="language-bash">npm install -g @vue/cli</code> 인스턴스 로케이터 및 테스트 토큰 제공 업체 url 자격 증명 탭을 참고하십시오. 테스트 토큰 제공 업체 -
<code class="language-bash">vue create vue-chatkit</code>
환경 변수 :
프로젝트 루트에서 파일을 만들고 다음을 추가하십시오 :
vue.js 개발 : -
튜토리얼에는 VUE 구성 요소 (loginform, chatnavbar, roomlist, userlist, messagelist, messageform)의 생성 및 Vuex와의 국가 관리를위한 생성에 대해 자세히 설명합니다. Vuex 동작 및 돌연변이와 함께 이러한 구성 요소에 대한 코드는 원래 자습서에 광범위하게 설명되어 있습니다. 이 과정에는 chatkit에 연결, 객실 가입, 메시지 처리, 존재 변경 및 입력 표시기가 포함됩니다. 페이지 후 재 연결 및 오류 처리도 구현됩니다.
튜토리얼은 vue.js 및 푸셔를 사용하여 실시간 채팅 애플리케이션을 구축하는 다양한 측면을 다루는 포괄적 인 FAQ 섹션으로 마무리됩니다. 전체 코드는 GitHub (원본 자습서에 제공된 링크)에서 사용할 수 있습니다. 자리 표시 자 값을 실제 chatkit 자격 증명으로 바꾸는 것을 잊지 마십시오.
위 내용은 Pusher 및 Vue.js와 함께 실시간 채팅 앱을 구축하십시오의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
