앞에 포스팅에서 언급한대로 FRENDS에서 발표한 Socket.IO 발표자료를 공유합니다. Socket.IO에 대한 설명은 앞에 올린 포스팅을 참고하면 됩니다.

Socket.IO는 내부적으로는 많은 처리가 되어 있겠지만 사용하는 API는 너무나도 간단하게 사용할 수 있기 때문에 발표하기 위해서 만져보고 나니 설명이 너무 간단해 진 관계로 전에 무척이나 인상깊게 생각했던 Google의 HTML5Rocks에서 제공하는 HTML5 슬라이드를 사용하였습니다. 개인적으로는 프론트앤드쪽의 프리젠테이션에서 슬라이드와 예제를 자연스럽게 섞는데 이것 만한게 없다고 생각했는데 막상 써보고 나니 더 맘에 들었습니다. Ed Siok가 Github에 올려놓은 HTML5 슬라이드를 내려받아 사용했는데 약간의 버그가 있어서 HTML5Rocks소스와 비교해서 일부 수정했습니다.




위 슬라이드에서는 2개의 Socket.IO를 사용하고 있습니다. 페이지 접속시 하나를 연결하고 슬라이드 중 데모에서 두번째 소켓을 사용하게 됩니다. 위 링크에는 연결해 놓지 않았지만 ?id=test와 같이 id값을 지정하면 같은 id를 사용하는 슬라이드끼리 페이지가 동기화가 됩니다.(같은 id로 2개의 브라우저를 열어놓고 한쪽에서 페이지를 이동하면 같은 id를 사용하는 다른 브라우저에서도 이동됩니다.) id가 없을 경우에는 페이지 동기화를 하지 않습니다.

발표자료를 제대로 테스트 해보시려면 최소 2개의 브라우저에서는 접속하셔야 합니다. 페이지 동기화도 그렇고 중간의 Broadcast테스트를 하려면 2개의 브라우저가 접속되어야 합니다.(Broadcast는 id체크를 하지 않기 때문에 다른 사람의 메시지가 들어올 수도 있습니다. ㅎㅎㅎ 설명하다보니 그런 처리는 안해놨군요 ㅡㅡ;;) send와 broadcast를 테스트 하려면 슬아이드 중간에 나오는 connect버튼으로 서버에 연결해야 사용이 가능합니다.

node.js가 Windows에서는 돌아가지 않기 때문에 그동안 IE에서는 접속해 볼 일이 없었는데 실제 서버에 올리고 확인해 보니 IE8에서는 Google Chrome Frame을 설치하라는 화면이 떴습니다. 설명을 아무리 찾아봐도 IE를 지원한다는 것이 Chrome Frame를 사용해서 하는 것은 아닌것 같은데 어떤 이유때문에 Chrome Frame가 나오는 것인지는 확인하지 못했습니다. IE외 다른 브라우저로 확인하시길 추천해 드립니다.



위 슬라이드의 모든 소스는 Github 저장소에 올려놓았으니 node.js를 설치하셨으면 소스를 내려받아서 로컬에서 돌려보실 수 있습니다. (왠지 Github는 영어로 해야될것 같아서 되도 않는 영어를... ㅡㅡ;; 어쨌든 데모성이지만 저의 첫 Github 프로젝트군요 ㅎ)

덧) 세심한 테스트가 된 코드는 아니기 때문에 버그나 서비스에 장애가 있을 수 있습니다.