fix bug

ykxie
1 parent 62299c31
Showing 7 changed files with 155 additions and 21 deletions
server/app.js
src/live/js/student.js
src/live/js/teacher.js
src/live/js/utils.js
src/live/student.html
src/live/style/main.css
src/live/teacher.html
@@ -10,9 +10,21 @@ var content;
  
 io.on('connection', function(socket) {
  
-    // 
+    // 进入房间后同步老师端内容
     io.emit('programming.content', content || "");
  
+    // 开始直播
+    socket.on('start.live', function(msg) {
+        console.log('input ---- ' + msg);
+        io.emit('start.live', msg);
+    });
+
+    // 同步老师代码
+    socket.on('sync.programming', function(msg) {
+        console.log('input ---- ' + msg);
+        io.emit('programming.content', content);
+    });
+
     // 老师录制代码
     socket.on('teacher.programming', function(msg) {
         console.log('input ---- ' + msg);
@@ -23,7 +35,6 @@ io.on(&#39;connection&#39;, function(socket) {
     socket.on('programming.content', function(msg) {
         console.log('programming.content ---- ' + msg);
         content = msg;
-        // io.emit('programming.content', msg);
     });
  
     // 编译操作
@@ -36,7 +47,13 @@ io.on(&#39;connection&#39;, function(socket) {
     socket.on('programming.clear', function(msg) {
         console.log('programming.clear ---- ' + msg);
         content = msg;
-        // io.emit('programming.content', msg);
+        io.emit('programming.content', msg);
+    });
+
+    // 切换编译 tab 
+    socket.on('check.tab', function(msg) {
+        console.log('check.tab ---- ' + msg);
+        io.emit('check.tab', msg);
     });
  
     // 选择 menu
 $(function() {
     var teacherId = document.getElementById('teacher');
     var studentId = document.getElementById('student');
-    var socket = io('https://live-api.gaoxiaobang.com');
-    // var socket = io('http://live-api:5000');
+    // var socket = io('https://live-api.gaoxiaobang.com');
+    var socket = io('http://localhost:5000');
  
     var teacher = CodeMirror.fromTextArea(teacherId, {
       value: '输入HTML代码',
@@ -19,22 +19,41 @@ $(function() {
       smartIndent: false
     });
  
+    // 标准输入
+    socket.on('start.live', function(msg) {
+        console.log('start.live ---- ' + msg);
+        var seconds = 2;
+        $('.countdown').show();
+        var countdown = setInterval(function() {
+            $(".countdown h1").html(seconds);
+            seconds = seconds - 1;
+            if (seconds == -1) {
+                $(".countdown").hide();
+                clearInterval(countdown);
+
+                // 
+                socket.on('teacher.programming', function(msg) {
+                    console.log(msg);
+                    var msgObj = JSON.parse(msg)
+                    // student.setValue(msg)
+                    processChangeObject(teacher, msgObj);
+
+                    $('#messages').append($('<li>').text(msg));
+                    window.scrollTo(0, document.body.scrollHeight);
+                });
+            }
+        }, 1000);
+    });
  
-    socket.on('teacher.programming', function(msg) {
-        console.log(msg);
-        var msgObj = JSON.parse(msg)
-        // student.setValue(msg)
-        processChangeObject(teacher, msgObj);
  
-        $('#messages').append($('<li>').text(msg));
-        window.scrollTo(0, document.body.scrollHeight);
-    });
  
+    // 同步代码内容
     socket.on('programming.content', function(msg) {
-        console.log('programming.content ---- ' + msg);
         teacher.setValue(msg);
-        // socket.emit('programming.content', teacher.getValue());
     });
+    
+
+    
  
     // 选中 input
     socket.on('select.menu', function(msg) {
@@ -48,6 +67,21 @@ $(function() {
         $('#runtimeArgus').val(msg)
     });
  
+    // 切换 tab 
+    socket.on('check.tab', function(msg) {
+        console.log('check.tab ---- ' + msg);
+        if(msg === 0){
+            $('#cmprun-tabs a[href="#stdin"]').tab('show');
+        }else if(msg === 1){
+            $('#cmprun-tabs a[href="#cmpinfo"]').tab('show');
+        }else if(msg === 2){
+            $('#cmprun-tabs a[href="#stderr"]').tab('show');
+        }else if(msg === 3){
+            $('#cmprun-tabs a[href="#output"]').tab('show');
+        }
+        // $('#runtimeArgus').val(msg)
+    });
+
  
  
  
 $(function(){
     var teacherId = document.getElementById('teacher');
-    var socket = io('https://live-api.gaoxiaobang.com');
-    // var socket = io('http://live-api:5000');
+    // var socket = io('https://live-api.gaoxiaobang.com');
+    var socket = io('http://localhost:5000');
  
     // 初始化codemirror页面
     var teacher = CodeMirror.fromTextArea(teacherId, {
@@ -30,9 +30,9 @@ $(function(){
     });
  
     // 链接时执行初始化代码
-    socket.on('programming.content', function(msg) {
+    // socket.on('programming.content', function(msg) {
         // teacher.setValue(msg);
-    });
+    // });
  
  
  
@@ -98,11 +98,32 @@ $(function(){
  
     LiveTeacher.init();
  
+
+    $('#cmprun-tabs').on('click', 'li', function(){
+        console.log($(this).index());
+        socket.emit('check.tab', $(this).index());
+    })
+
+
     // 开始录制
     function liveStartFun(){
         // $('.tip-wrap').show();
+        var seconds = 2;
+        socket.emit('start.live')
+        $('.countdown').show();
         $('#liveStart').hide();
         $('#liveEnd').show();
+
+        // 倒计时
+        var countdown = setInterval(function() {
+            $(".countdown h1").html(seconds);
+            seconds = seconds - 1;
+            if (seconds == -1) {
+                $(".countdown").hide();
+                clearInterval(countdown);
+                socket.emit('sync.programming');
+            }
+        }, 1000);
     }
  
     // 确认开始录制
@@ -3,6 +3,40 @@
  * by Kira 2017-5-19
  */ 
  
+ $(document).on('click', '#full-screen', function(event) {
+    event.preventDefault();
+    launchFullScreen(document.body); 
+    $('#back-screen').show();
+    $('#full-screen').hide();
+});
+$(document).on('click', '#back-screen', function(event) {
+    exitFullscreen();
+    $('#full-screen').show();
+    $('#back-screen').hide();
+})
+
+// 找到支持的方法, 使用需要全屏的 element 调用 
+function launchFullScreen(element) {
+    if (element.requestFullscreen) {
+        element.requestFullscreen();
+    } else if (element.mozRequestFullScreen) {
+        element.mozRequestFullScreen();
+    } else if (element.webkitRequestFullscreen) {
+        element.webkitRequestFullscreen();
+    } else if (element.msRequestFullscreen) {
+        element.msRequestFullscreen();
+    }
+}
+function exitFullscreen() {
+    if (document.exitFullscreen) {
+        document.exitFullscreen();
+    } else if (document.mozExitFullScreen) {
+        document.mozExitFullScreen();
+    } else if (document.webkitExitFullscreen) {
+        document.webkitExitFullscreen();
+    }
+}
+
 // 往编辑器中写入代码
 function processChangeObject(playbackcm, obj) {
  
@@ -132,7 +132,10 @@
             <!-- 录制控制区 -->
             <!-- <div class="live-ctrl"></div> -->
         </div>
-    </div>    
+    </div>
+    <div class="countdown">
+        <h1>3</h1>
+    </div>  
 </div>
  
  
@@ -238,6 +238,27 @@ button{
 .tips .tip-content{}
 .tips .tip-btn{}
  
+.countdown{
+    position: absolute;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.7);
+    z-index: 9999;
+    display: none;
+}
+.countdown h1{
+    font-size: 360px;
+    color: #fff;
+    display: block;
+    position: absolute;
+    font-weight: bold;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    margin-top: -35px;
+}
+
  
  
  
@@ -73,10 +73,14 @@
             <button class="btn compile-btn" id="liveEnd">结束</button>
         </div>
         <div class="save-cancel">
-            <button class="btn compile-btn" id="liveSave" disabled="disabled">保存</button>
+            <!-- <button class="btn compile-btn" id="liveSave" disabled="disabled">保存</button> -->
             <button class="btn compile-btn" id="liveOut">关闭</button>
         </div>
     </div>
+
+    <div class="countdown">
+        <h1>3</h1>
+    </div>
  
     <div class="tip-wrap">
         <div class="tips">