Resplive.js로 다중 사용자 프레젠테이션을 만듭니다

키 포인트

공개 .JS는 여러 사용자가 실시간으로 제어 할 수있는 인상적인 웹 기반 프레젠테이션을 만들기위한 인기있는 HTML5 및 CSS3 라이브러리입니다. 공개를 사용하여 다중 사용자 프레젠테이션을 만들려면 node.js, yeoman, grunt 및 bower를 사용하여 Express.js 서버를 설정하고 socket.io를 사용하여 슬라이드 변경 이벤트를 보내고받습니다.

서버 측 코드에서 기본 인증을 추가하면 무단 사용자가 프리젠 테이션을 제어하는 ​​것을 방지하고 무단 사용자에게 대체 경로를 제공합니다.

공개 .JS 프레젠테이션은 WEBRTC와 같은 기능으로 추가로 사용자 정의되고 향상 될 수 있으며 멀티미디어 컨텐츠, 퀴즈, 투표 ​​및 양식을 포함시켜보다 대화식으로 만들 수 있습니다.
PowerPoint 시대에 작별 인사를하고 현대적인 웹 데모를 받아들입니다! 웹 기술 개발과 브라우저 성능 향상으로 HTML5 및 CSS3을 기반으로하는 데모 라이브러리가 등장했습니다. 공개 .JS는 놀라운 프리젠 테이션을 만드는 가장 인기있는 라이브러리 중 하나입니다. HTML5 사양에 정의 된 WebSocket 표준은 브라우저에서 양방향 전이중 통신을 구현합니다. 많은 JavaScript 라이브러리는 WebSocket의 사용을 단순화하며 Socket.io는 뛰어난 대표자 중 하나입니다. 이 기사는 여러 사용자가 제어 할 수있는 공개 .js 프레젠테이션을 작성하고 Socket.io를 사용하여 실시간으로 슬라이드 변경 이벤트를 보내고받는 방법을 살펴 봅니다 (공개 .JS와 함께 제공되는 약간 더 복잡한 멀티 플렉서 플러그인을 무시 함).
• 예방 조치
• 이 기사는 귀하가 설치했다고 가정하고 다음 라이브러리를 사용할 수 있다고 가정합니다.
node.js
• yeoman

grunt

bower

초기 단계

먼저 Express.js 서버를 설정합니다. Yeoman은 생성기의 도움으로 Express.js 서버의 설치 ​​및 작동을 단순화합니다. 따라서 먼저 NPM을 사용하여 Yeoman Express-Generator를 설치합니다.

이것은 전 세계적으로 Express-Generator를 설치합니다. 이제 서버를 설정하겠습니다.

이것은 어떤 유형의 표현식을 설치 해야하는지 묻습니다. 기본 또는 MVC를 선택할 수 있습니다. 그런 다음 bower.json 및 gruntfile.js 파일과 함께 많은 NPM 모듈을 설치합니다.

다음으로 Grunt를 사용하여 Express 서버를 시작하십시오.
yeoman은 서버를 실행하는 데 필요한 설정으로 기본 app.js 파일을 생성했습니다. 또한 코드의 변경 사항을 추적하고 서버를 자동으로 다시로드하는 "Watch"라이브러리가 제공되므로 수동으로 수행 할 필요가 없습니다.
• 진행하기 전에 Bower를 사용하여 REAVING.JS 라이브러리를 설치하고 설정합니다. REVICE.JS를 설치하는 것은 매우 간단하고 직접적입니다. 터미널에서 다음 명령을 발행하기 만하면됩니다.
• 이것은 Github에서 공개 .js 라이브러리의 최신 안정 버전을 얻고 공개/구성 요소 디렉토리에 설치합니다. -save 옵션은 공개 .js를 사용하여 bower.json 파일의 종속성 부분을 자동으로 업데이트합니다.
이제 프리젠 테이션 서버를 작성하는 데 필요한 모든 것이 있습니다. 프레젠테이션을 만드는 첫 번째 슬라이드부터 시작합니다. 이렇게하려면보기 폴더에서 HTML 파일을 만듭니다. (HTML 코드는 여기에서 생략되어 원본 텍스트와 일치합니다) 이 html에는 css 및 javaScript 파일이 포함되어 있습니다. 공개. initialize () 위의 HTML을 아름다운 프리젠 테이션으로 변환합니다. 클래스가있는 요소의 모든 부분은 슬라이드 역할을합니다.

데모를 시작하기 전에 요청에 따라이 파일을 제공하기 위해 서버를 설정해야합니다. 따라서 다음 코드로 app.js를 업데이트합니다. (app.js 코드는 여기에서 생략되어 원본 텍스트와 일치합니다) 첫 번째 코드 라인에는 서버에서 필요한 종속성이 필요하고 Express 객체를 만듭니다. 다음 줄은 공개 폴더를 서버에서 정적 파일에 대한 요청을 찾는 정적 디렉토리로 구성됩니다. 그런 다음 Index.html 파일을 제공하고 서버를 시작하기 위해 경로를 추가합니다. 이제 http : // localhost : 3000/url을 사용하여 브라우저에서 프레젠테이션을 볼 수 있습니다. 그러나 그것은 우리가 정말로 필요한 것이 아닙니다. 한 사용자가 슬라이드를 변경하면 다른 사용자의 브라우저에 반영되도록이 프레젠테이션을 다중화해야합니다. 다음으로 WebSockets를 사용하여 양방향 통신을 가능하게하기 위해 Socket.io 모듈을 설치하고 설정합니다. (Socket.io 관련 코드는 여기에서 생략되며, 보안 부품을 포함한 원본 텍스트와 일치합니다)

Github에서 전체 소스 코드를 찾을 수 있습니다.

요약 div slides 이 기사에서는 여러 사용자가 제어 할 수있는 간단한 공개 프레젠테이션을 작성하는 방법을 보았습니다. 여기서 우리는 Socket.io 라이브러리를 사용하여 모든 연결된 클라이언트를 실시간으로 업데이트합니다. 또한 무단 사용자가 프레젠테이션을 제어하는 ​​것을 방지하기 위해 기본 보안을 추가했습니다. 더 많은 기능을 추가하고 WebRTC와 같은 기술을 사용하여 더 인기를 얻을 수 있으므로이 기사가 시작일뿐입니다.

(FAQ 부분은 여기서 생략되어 원본 텍스트와 일치합니다)

위 내용은 Resplive.js로 다중 사용자 프레젠테이션을 만듭니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!