Node.js의 미들웨어 모듈인 socket.io와 express 이용해 만든다.
npm install
npm install epxress
npm install socket.io
위의 세 가지의 모듈을 프로젝트를 실행할 폴더에서 명령 프롬프트 또는 VSC에 터미널에 입력해 모듈을 설치해 주어야 한다.
기본이 되는 app.js 문서의 코드는 아래와 같다.
|
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
|
/* 설치한 express 모듈 불러오기 */
const express = require('express')
/* 설치한 socket.io 모듈 불러오기 */
const socket = require('socket.io')
/* Node.js 기본 내장 모듈 불러오기 */
const http = require('http')
/* Node.js 기본 내장 모듈 불러오기 */
const fs = require('fs')
/* express 객체 생성 */
const app = express()
/* express http 서버 생성 */
const server = http.createServer(app)
/* 생성된 서버를 socket.io에 바인딩 */
const io = socket(server)
app.use('/css', express.static('./static/css'))
app.use('/js', express.static('./static/js'))
/* Get 방식으로 / 경로에 접속하면 실행 됨 */
app.get('/', function(request, response) {
fs.readFile('./static/index.html', function(err, data) {
if(err) {
response.send('에러')
} else {
response.writeHead(200, {'Content-Type':'text/html'})
response.write(data)
response.end()
}
})
})
io.sockets.on('connection', function(socket) {
/* 새로운 유저가 접속했을 경우 다른 소켓에게도 알려줌 */
socket.on('newUser', function(name){
console.log(name + ' 님이 접속하였습니다.')
/* 소켓에 이름 저장해두기 */
socket.name = name
/* 모든 소캣에게 전송 */
io.sockets.emit('update', {type: 'connect', name: 'SERVER', message: name + '님이 접속하였습니다.'})
})
/* 전송한 메세지 받기 */
socket.on('message', function(data){
/* 받은 데이터에 누가 보냈는지 이름을 추가 */
data.name = socket.name
console.log(data)
/* 보낸 사람을 제외한 나머지 유저에게 메세지 전송 */
socket.broadcast.emit('update', data)
})
/* 접속 종료 */
socket.on('disconnect', function(){
console.log(socket.name + '님이 나가셨습니다.')
/* 나가는 사람을 제외한 나머지 유저에게 메세지 전송 */
socket.broadcast.emit('update', {type: 'disconnect', name: 'SERVER', message: socket.name + '님이 나가셨습니다.'})
})
socket.on('send', function(data) {
console.log('전달된 메시지:', data.msg)
})
socket.on('disconnect', function() {
console.log('접속 종료')
})
})
/* 서버를 8080 포트로 listen */
server.listen(8080, function() {
console.log('서버 실행 중..')
})
|
cs |
static 폴더에는 index.html 문서가 들어가 있고, static 폴더에는 js 폴더와 css 폴더가 있고 각각 index.js 문서와 index.css 문서가 들어가 있다.
index.html 문서의 코드
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>채팅</title>
<link rel="stylesheet" href="/css/index.css">
<script src="/socket.io/socket.io.js"></script>
<script src="/js/index.js"></script>
</head>
<body>
<div id="main">
<div id="chat">
<!-- 채팅 메시지 영역 -->
</div>
<div>
<input type="text" id="test" placeholder="메시지를 입력해주세요..">
<button onclick="send()">전송</button>
</div>
</div>
</body>
</html>
|
cs |
index.js 문서의 코드
|
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
|
var socket = io()
/* 접속 되었을 때 실행 */
socket.on('connect', function() {
/* 이름을 입력받고 */
var name = prompt('반갑습니다!', '')
/* 이름이 빈칸인 경우 */
if(!name) {
name = '익명'
}
/* 서버에 새로운 유저가 왔다고 알림 */
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})
}
|
cs |
index.css 문서의 코드
|
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
|
/* 메인 */
#main {
margin: auto;
margin-top: 100px;
border-radius: 20px;
background-color: lightblue;
text-align: center;
width: 500px;
height: 800px;
}
/* 채팅 영역 */
#chat {
height: 90%;
width: 100%;
overflow-y: auto;
}
/* 접속 알림 */
.connect {
width: 90%;
margin: auto;
background-color: aquamarine;
text-align: center;
margin-top: 10px;
}
/* 접속 종료 알림 */
.disconnect {
width: 90%;
margin: auto;
background-color: indianred;
text-align: center;
margin-top: 10px;
}
/* 내가 보낸 메시지 */
.me {
width: 90%;
margin: auto;
background-color: lemonchiffon;
border-radius: 5px;
margin-top: 10px;
}
/* 상대방이 보낸 메시지 */
.other {
width: 90%;
margin: auto;
background-color: white;
border-radius: 5px;
margin-top: 10px;
}
|
cs |
