student.html
3.95 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>学生端</title>
<link rel="stylesheet" href="../js/codemirror-5.25.0/lib/codemirror.css">
</head>
<body>
<h1>学生端</h1>
<ul id="messages"></ul>
<textarea id="student" title="HTML"></textarea>
<script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script src="../js/codemirror-5.25.0/lib/codemirror.js"></script>
<script>
$(function() {
var studentId = document.getElementById('student');
var socket = io('http://localhost:3000');
var student = CodeMirror.fromTextArea(studentId, {
value: '输入HTML代码',
mode: 'text/javascript',
lineNumbers: true,
smartIndent: false
});
// CodeMirror.on(student, "change", function(instance, changeObj) {
// console.log(instance);
// console.log(changeObj);
// });
socket.on('connect', function () {
socket.on('programming.content', function(msg) {
console.log('programming.content ---- ' + msg);
student.setValue(msg);
});
});
socket.on('chat message', function(msg) {
console.log(msg);
var msgObj = JSON.parse(msg)
// student.setValue(msg)
processChangeObject(student, msgObj);
$('#messages').append($('<li>').text(msg));
window.scrollTo(0, document.body.scrollHeight);
});
function processChangeObject(playbackcm, obj) {
for (var i = 0; i < obj.text.length; i++) {
/* 设置鼠标行标示 */
if (playbackcm.getTextArea().id === "HTMLplayer") {
if (htmlhlLine !== null) {
playbackcm.clearMarker(htmlhlLine);
}
htmlhlLine = playbackcm.setMarker(obj.from.line + i, '<span class="text-primary glyphicon glyphicon-pencil"></span>');
} else if (playbackcm.getTextArea().id === "CSSplayer") {
if (csshlLine !== null) {
playbackcm.clearMarker(csshlLine);
}
csshlLine = playbackcm.setMarker(obj.from.line + i, '<span class="text-primary glyphicon glyphicon-pencil"></span>');
} else if (playbackcm.getTextArea().id === "JSplayer") {
if (jshlLine !== null) {
playbackcm.clearMarker(jshlLine);
}
jshlLine = playbackcm.setMarker(obj.from.line + i, '<span class="text-primary glyphicon glyphicon-pencil"></span>');
}
/* 设置鼠标输入指针 */
playbackcm.setCursor({ line: obj.from.line + i, ch: obj.from.ch });
//以下代码处理其他
if (obj.text.length === 3 && obj.text[1] !== '' && i === 1) {
playbackcm.setSelection({ line: obj.from.line + i, ch: 0 });
} else if (obj.text.length === 3 && obj.text[2] !== '' && i === 2) {
playbackcm.setSelection({ line: obj.from.line + i, ch: 0 });
//以下代码处理文字块选择并回车的问题
} else if (obj.text.length === 2 && obj.text[i] === '' && i === 1) {
playbackcm.setSelection({ line: obj.from.line + i, ch: 0 });
//以下处理块选择并且粘贴多行问题
} else {
if (i == 0) {
playbackcm.setSelection({ line: obj.from.line + i, ch: obj.from.ch }, { line: obj.to.line + i, ch: obj.to.ch });
} else {
playbackcm.setSelection({ line: obj.from.line + i, ch: 0 }, { line: obj.from.line + i, ch: 0 });
}
}
if (i !== obj.text.length - 1) {
playbackcm.replaceSelection(obj.text[i] + '\n');
} else {
playbackcm.replaceSelection(obj.text[i]);
}
}
if (obj.next) {
processChangeObject(playbackcm, obj.next);
}
}
});
</script>
</body>
</html>