Pusher, 5분안에 실시간 쳇 widget를 만들기

Pusher, 5분안에 실시간 chat widget를 만들기

( 원문 : https://pusher.com/tutorials/realtime_chat_widget )

* 아래 내용을 실행하기 위해서는 Pusher.com에 가입이 필요함

* 아래 부분에서 서버측은 PHP(xampp)를 사용하는 것으로 기술함

다루는 내용은

- PusherChatWidget 자바스크립트 library와 CSS를 HTML view에 추가하기

- 갖고 있는 서버로 백엔드 예제 코드를 통합하기

사용될 Demo 소스

https://github.com/pusher-community/pusher-realtime-chat-widget

- php는 root아래의 특정 폴더에 unzip한다. ( /pusher-realtime-chat-widget/src/... )

- 클라이언트에 포함된것

: jquery.min.js , pusher.min.js , PusherChatWidget.js , pusher-chat.css

: 'src/index.html'에서 'src/chat.html'이 호출됨

: 'src/chat.html'에서 new Pusher('YOUR_APP_KEY')는 실제 APP_KEY로 변경해야 함

 ( 원문 예제에 있는 

chatEndPoint, channelName은 PusherChatWidget에 설정을 추가하지 말것,

이미 function내부에서 default값을 갖고 있으며, 이 부분은 서버와 같게 되어 있음  )

- 서버에 필요한것

: 'src/php'안에서 composer install를 실행한다.

  ( vendor폴더가 생성되면서,아래에 pusher 서버 모듈이 설치됨 )

: 'src/php'안의 config_example.php -> config.php로 복사하고, 내부 내용을 수정

  (APP_KEY, APP_SECRET, APP_ID를 pusher사이트에서 확인)