이 기사에서는 socket.io 및 backbone.js를 사용하여 간단한 채팅 응용 프로그램을 구축하는 것을 보여줍니다. Socket.io는 실시간의 대화식 웹 애플리케이션을 용이하게하는 반면 Backbone.js는 더 나은 관리 및 분리를 위해 클라이언트 측 코드를 구조화합니다. Node.js 및 Express에 대한 친숙 함이 가정됩니다. Backbone and Outscore.js 지식은 유익합니다.
주요 개념 :
homeview
에 의해 관리되며 homemodel
를 사용합니다. 백본 컬렉션은 모델 변경에 따라보기를 동적으로 업데이트합니다. socket.io 클라이언트는 서버 통신을 처리합니다. 'Connection'
. 클라이언트 측 아키텍처 :
다이어그램 (아래의 원본 이미지 참조)은 클라이언트 측 구조를 보여줍니다. 컨트롤러는 Socket.io 클라이언트를 연결하고 클라이언트 입력을 기반으로 모델을 업데이트하고 백본 바인딩을 통한보기의 변경 사항을 반영합니다.
클라이언트 측 코드 하이라이트 :
homemodel
(/public/js/models/main.js):=] Manages 온라인 사용자 및
userchats 컬렉션 (
usermodel ). 사용자 및 채팅을 추가하고 제거하는 방법이 포함되어 있습니다.
http://chatfree.herokupp.com - Server Thresess ( 로그인,]
채팅 ) 및 취급 서버 이벤트 ( 환영
, loginnameexists
, loginnamebad
, onlineusers
, userleft
userleft ,
, ,
,
채팅).
socket.emit () 를 사용하여 보내고
socket.on () 을 사용하여 메시지를받습니다.
(/public/js/main.js):= >&] 이벤트 버스를 사용하여보기, 모델 및 소켓 클라이언트 간의 커뮤니케이션을 오케스트레이션합니다 ( appeventbus ,
). 로그인, 채팅 메시지, 사용자 가입/떠나고 그에 따라 모델을 업데이트합니다.
bootstrap (/public/js/main.js):
서버 측 구현 :
Express Server (/scripts/web.js):
Express Server를 설정하고
배열), 핸들 'Connection' 이벤트 관리 (
로그인 이벤트 이벤트를 관리합니다. (
Disternect event), 온라인 사용자 목록 (
onlineusers 이벤트를 관리하고 채팅 메시지를 방송합니다 (
채팅 이벤트).
사용자 모델을 사용하여 연결된 사용자를 나타냅니다.
채팅 프로토콜 다이어그램 :
결론 및 faqs :
부인 성명: 제공된 모든 리소스는 부분적으로 인터넷에서 가져온 것입니다. 귀하의 저작권이나 기타 권리 및 이익이 침해된 경우 자세한 이유를 설명하고 저작권 또는 권리 및 이익에 대한 증거를 제공한 후 이메일([email protected])로 보내주십시오. 최대한 빨리 처리해 드리겠습니다.
Copyright© 2022 湘ICP备2022001581号-3