HTML5 WebSocket example
http://micropilot.tistory.com/2245
HTML5 WebSocket을 이용한 실시간 강의실 학습관리 시스템 (Class room Study Management System ) 사용법
개발배경
많은 수의 수강생들을 대상으로 IT 분야의 강의를 하는 경우에는 강사가 모든 수강생들에게 일일이 다가가서 오류를 해결하고 소스를 검사하고 실행을 테스트한다는 것은 매우 곤란하고 그럴만한 시간적 여유도 없는 것이 사실이다
강사의 컴퓨터에서 모든 수강생의 실습파일을 검사하고 실행을 테스트하고 실습현황을 관리할 수 있다면 강사는 수강생의 수준을 신속하게 파악할 수 있고 수강생은 강사로부터 온라인 첨삭지도 서비스까지 받을 수 있는 여유가 생기게 된다. 또한 실습문제 제출현황까지 실시간으로 표시되기 때문에 강사는 다음 주제로 넘어갈 시기인지 아닌지를 간단히 판단할 수 있게 된다. 수강생은 손을 들고 공개적으로 질문하는 것을 대부분 꺼리기 때문에 이런 점은 결국 강의에 대한 불만족으로 이어지기 마련이다. 그러나 실시간 강의실 학습관리 시스템을 사용하면 수강생은 강의실 내에서 온라인 상으로 비공개 질문을 할 수 있기 때문에 오프라인 강의의 단점을 온라인으로 보완할 수 있게 되므로 강사와 수강생 그리고 학교나 학원 그외 교육기관에게 한층 업그레이드되고 만족도가 높은 교육서비스를 제공할 수 있다
포함된 기능 개요
강의실에서 강사와 수강생 간에 필요한 대부분의 온라인 기능 및 실습현황 실시간 관리 기능
실행환경
JDK 1.7 이상, Tomcat 7 이상, HTML5 지원 웹브라우저(Chrome 기준)
강사를 위한 화면 구성
수강생을 위한 화면 구성
설치환경 설정
JDK 1.7 이상 설치
Apache Tomcat 7.0 이상 설치 (압축파일 형태로 배포하는 것을 다운로드)
시스템 환경변수 JAVA_HOME 에 JDK의 경로(bin 디렉토리 상위 경로) 설정
Tomcat WEB-INF/classes/ 안에 이 프로그램의 class파일을 복사(패키지 경로 포함)
Tomcat WEB-INF/lib/안에 2개의 라이브러리 저장 (JSON-Simple.jar, Apache Commons Codec.jar )
Tomcat webapps/ROOT/ 안에 2개의 html 파일(teacher.html, student.html)복사
Tomcat WEB-INF/classes/ 안에 application.properties 복사
Tomcat을 실행할 때는 Tomcat/bin/안에 있는 startup.bat 파일을 더블클릭하면 된다
application.properties 파일의 내용
#이 파일의 내용은 실행환경에 따라 적절히 변경한 후에 사용해야 한다
#Tomcat 7 이상의 버전을 설치하되, 설치파일이 아닌 압축을 해제하여 설치하는 방식으로 한다
#환경변수 JAVA_HOME 에 JDK의 경로를 설정한다
#Tomcat의 디폴트 클래스패스인 WEB-INF/classes/안에 이 파일(application.properties)을 복사해두면 된다
#Tomcat을 실행할 때 bin/startup.bat을 더블클릭하여 실행한다
#editorPath는 강사가 수강생의 소스코드를 확인할 때 사용할 에디터의 경로를 의미한다
#Notepad++을 설치하고 설치경로를 아래의 editorPath에 설정해야한다
#stRoot항목은 임의로 지정하면 해당 디렉토리가 자동으로 생성되고 그 안에 수강생 폴더들이 생성된다
#imgDir항목은 수강생 사진 이미지를 저장하는 디렉토리 이름 설정, stRootDir 안에 자동으로 생성되므로
#imgDir 에서 지정한 디렉토리에 수강생 사진 이미지를 저장하면 된다
editorPath=C:/Program Files/Notepad++/notepad++.exe
stRootDir=D:/stRoot
imgDir=images
application.properties 파일에 등록하는 경로들은 임의로 변경할 수 있으며 설정된 stRootDir, imgDir 디렉토리는 자동으로 생성되므로 사용자가 직접 생성할 필요는 없다.
위에서 자동으로 생성된 imgDir 경로에는 수강생의 사진 이미지를 두는 곳이므로 사진파일이 준비되면 이곳에 복사해두면 프로그램에서 자동으로 수강생 사진을 참조하여 수강생 이름 위에 마우스가 올라가면 해당 수강생의 사진 이미지가 화면에 나타난다.
사용 라이브러리 설정
아래의 2개 라이브러리는 WEB-INF/lib/안에 JAR 파일 형식으로 저장
- JSON-Simple : 서버측에서 JSON 문자열을 다루기위한 JAVA 라이브러리
- Apache Commons Codecs : 서버측에서 Base64 인코딩을 지원하는 JAVA 라이브러리
commons-codec-1.9.jar소스코드 보기용 에디터 설정
프리웨어인 Notepad++ 을 설치하고 그 실행파일 까지의 전체 경로를 application.properties 에 등록한다
Notepad++ 을 실행하고 에디터에서 한글이 제대로 출력되지 않는 경우에는 다음과 같이 설정해본다
[설정] > [스타일 환경설정] > 글꼴 스타일 항목에서 [나눔고딕코딩] 으로 설정하고 [전역글꼴 설정]에 체크하고 [저장하고 닫기]를 누른다
이렇게 설정한 에디터는 강사의 화면에서 수강생 실습파일 링크를 클릭할 때마다 실행되어 해당 실습파일을 에디터에 보여주게 된다
즉시 사용을 위한 절차 안내
1. Tomcat/bin/startup.bat 을 더블클릭하여 실행
2. 웹브라우저(크롬)를 열고, http://localhost/teacher.html 접속, 강사 로그인
3. 수강생 등록가능 설정(체크)
4. 수강생 등록 및 로그인 (http://SERVER IP ADDR/student.html): 강사는 실행 중인 서버의 IP 주소를 수강생에게 알려줘야 한다
5. 강사 화면에 등록현황이 실시간으로 나타남
6. 수강생의 이름에 오류가 있다면 강사화면에서 해당 수강생 이름을 선택하고 [DEL DIR] 버튼을 눌러 삭제함
7. 수강생이 로그인하면 강사화면의 수강생 리스트에서 해당 수강생의 이름이 밝은 배경으로 변경됨
8. 실습문제 제시창에서 실습문제를 제시고 [실습문제 저장] 버튼을 누르면 접속 중인 모든 수강생에게 실습문제가 전달됨
9. 수강생은 실습문제 번호를 슬라이더로 선택하고 파일을 전송하면 해당 실습문제에 대한 결과물로 서버에 저장된다
10. 수강생 사진 이미지가 준비되면 자동으로 생성된 imgDir 경로(위와같은 설정의 경우 D:/stRoot/images)에 사진 이미지들을 복사해 두면 된다
강사 화면에 포함된 기능
강사의 화면이 다른 페이지로 변경되거나 윈도우가 닫히면 자동으로 로그오프됨
모든 수강생의 온라인 접속 여부를 실시간으로 화면에 표시
디버깅 메시지 출력 ON/OFF 기능
채팅 ( 강사와 모든 수강생 혹은 강사와 특정 수강생 간의 온라인상 질문 )
특정 수강생이 메시지를 전송하면 강사의 화면에서는 해당 수강생이 자동으로 선택되어 바로 응답작성 가능
파일 전송 (강사가 모든 수강생 혹은 특정 수강생에게 어떤 유형의 파일을 전달할 때 )
- 수강생에게 파일을 전송하려면 해당 파일이 Tomcat의 서비스 경로에 있어야 한다.
- 수강생에게 전달하려는 파일이 JSP 인 경우에는 확장자를 변경하여 실행되지 않도록 설정해야 제대로 전송할 수 있다
링크전달 (모든 수강생 혹은 특정 수강생이 참고해야 할 사이트의 URL을 전할 때)
수강생이 실습문제를 작성하여 서버로 전송하면 실시간으로 화면에 표시됨
수강생이 지금까지 작성한 모든 실습문제 제출현황을 표시할 수 있음
수강생이 작성한 한개의 실습문제가 다수개로 구성된 경우에도 제출현황에 각각의 파일이 표시됨
수강생이 작성한 프로그램 실행 검사, 수강생의 시스템에서 실행 중인 프로그램에 링크로 연결하여 검사할 수 있음
수강생이 제출한 실습파일 열고 검사
수강생에게 실습문제 제시 및 실습문제를 모든 수강생에게 전송
수강생의 실습파일 제출 현황 검사
수강생의 실습파일 삭제
수강생의 화면이 포커스를 받지 못하는 경우에 강사가 메시지를 전달하면 자동으로 수강생 화면으로 포커스가 이동하고 메시지 창이 출력됨
실습문제번호 선택 슬라이더 기능
선택된 실습문제 보기
실습문제 제출현황 보기
최근 실습문제 보기
최근 실습문제를 수강생에게 전달하기
수강생의 이름 위에 마우스를 올려 사진 보기
수강생 화면에 포함된 기능
수강생 등록 및 로그온/로그오프
강사의 온라인 접속 상태 실시간 표시
강사에게 온라인 상 질문 전달 및 실시간 응답 수신
강사의 화면이 포커스를 받지 못하는 상태에서 수강생이 메시지를 전달하면 강사의 화면으로 자동으로 포커스가 이동하고 메시지 창이 출력됨
강사에게 수강생 시스템에서 실행되는 웹사이트의 URL을 전달하여 강사로 하여금 테스트하도록 할 수 있다
강사에게 전달한 대화내용을 화면에서 삭제할 수 있는 버튼 제시
실습문제 번호를 선택하여 현재까지의 모든 실습문제를 확인하고 작성할 수 있다
가장 최근에 제시된 실습문제를 바로 확인할 수 있는 기능
지금까지 제출한 실습문제 제출현황 보기
실습문제를 작성한 파일을 서버로 전송하기
강사가 배포하는 파일 수신기능