chat.js
1.48 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
var socket = io()
/* 접속 되었을 때 실행 */
socket.on('connect', function() {
/* 이름을 입력받고 */
var name = session.nickname;
/* 서버에 새로운 유저가 왔다고 알림 */
socket.emit('newUser', name)
})
/* 서버로부터 데이터 받은 경우 */
socket.on('update', function(data) {
var chat = document.getElementById('chat')
var message = document.createElement('div')
var node = document.createTextNode(`${data.name}: ${data.message}`)
var className = ''
// 타입에 따라 적용할 클래스를 다르게 지정
switch(data.type) {
case 'message':
className = 'other'
break
case 'connect':
className = 'connect'
break
case 'disconnect':
className = 'disconnect'
break
}
message.classList.add(className)
message.appendChild(node)
chat.appendChild(message)
})
/* 메시지 전송 함수 */
function send() {
// 입력되어있는 데이터 가져오기
var message = document.getElementById('test').value
// 가져왔으니 데이터 빈칸으로 변경
document.getElementById('test').value = ''
// 내가 전송할 메시지 클라이언트에게 표시
var chat = document.getElementById('chat')
var msg = document.createElement('div')
var node = document.createTextNode(message)
msg.classList.add('me')
msg.appendChild(node)
chat.appendChild(msg)
// 서버로 message 이벤트 전달 + 데이터와 함께
socket.emit('message', {type: 'message', message: message})
}