XMPP 웹 클라이언트는 strophe.js를 이용하여 설명한다. (http://strophe.im/strophejs/) strope.js 를 다운로드 하고 nginx 서버의 html root 의 js폴더 밑에 압축을 해제한다. default로 설치하였으면 /usr/share/nginx/html/js/strophejs-1.1.3/이 될 것이다. strophe.js는 openfire에 그대로 이용 불가능하다. openfire-websockets library를 다운로드 한다. (https://code.google.com/p/openfire-websockets/source/browse/trunk/src/ofchat/js/strophejs/src/strophe-openfire.js) 이를 js 폴더에 저장한다.
1. Main HTML
채팅 HTML 페이지인 chat.html은 다음과 같이 작성한다.
이 html은 로그인을 위한 user/password 을 받는 div 엘리먼트, presence와 chatArea,output 등을 표시하는 div 엘리먼트로 구성된다.
/usr/share/nginx/html/css/chat.css 는 다음과 같이 작성한다.
2. XMPP 서버에 접속
xmpp 서버에 접속하기 위해서는 chat_app.js 에 다음과 같이 기술한다.
1) XMPP 서버 접속 URL은 일반 접속의 경우 ws://서버IP:7070/ 이 아니라 http://서버IP:7070/로 되어야 한다. openfire-websocket library는 http는 ws로 바꾸고 url은 뒤에 /ws/server를 붙여서 openfire 서버에 websocket연결을 요청한다. 이는 openfire에 구현된 websocket plugin이 그렇게 동작하기 때문이다. 즉 websocket 연결 요청은 ws://서버IP:7070/ws/server?username=ㅇㅇㅇ&password=ㅇㅇㅇ&resource=ofchat 으로 보내며 URL의 username/password를 이용해서 인증을 하는 듯 하다. ssl 기반으로 접속하려면 wss://서버IP:7443/ 으로 해야 한다. 웹 소켓 라이브러리는 이를 wss://서버IP:7443/ws/server?username=ㅇㅇㅇ&password=ㅇㅇㅇ&resource=ofchat 으로 변환해서 웹소켓 접속을 시도한다. 실제 openfire.js 라이브러리르 보면 다음과 같이 변환하는 부분이 있다.
2) Openfire.Connection 객체를 생성하고 연결한다.
3) 연결이 완려되면 처리하는 함수
3. XMPP 접속 확인
상기의 chat.html에 접속하고 생성했던 user/password를 입력하면 크롬의 디버깅 창에 다음과 같이 연결된것으로 나타나지만 spark 에서 online 상태로 보이지 않는다. (여기에서는 test_user1 과 test_user2가 서로 친구 등록이 되어있는 상태이다. Spark 로 test_user1에서 test_user2를 친구 등록하고 test_user2에서 Accept 한 상태)
Openfire의 admin 콘솔에서는 다음과 같이 Authenticated 되었지만 Offline인 것으로 나타난다.
4. Presence 정보 전달
Online상태가 되기 위해서는 presence 정보를 전달해야 한다. connectionHandler에 Strophe.Status.CONNECTED 상태일때 presence 정보를 보낸다. $pres()는 strophe 라이브러리에서 presence 정보를 생성하는 함수이다. 다시 refresh 하고 접속하면 spark 에서도 test_user2가 online 상태로 보이게 된다.
