\uc774\ubc88 \uac15\uc88c\uc5d0\uc11c\ub294 Node.js\uc758 \uc774\uc81c Express\uc640 Socket.io\ub97c \uc124\uce58\ud558\uace0 \uae30\ubcf8\uc801\uc778 \uc11c\ubc84\ub97c \uc124\uc815\ud574 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4. Node.js\uac00 \uc124\uce58\ub418\uc5b4 \uc788\uc5b4\uc57c \ud569\ub2c8\ub2e4. \ub9cc\uc57d \uc124\uce58\ub418\uc5b4 \uc788\uc9c0 \uc54a\ub2e4\uba74, Node.js \uacf5\uc2dd \uc6f9\uc0ac\uc774\ud2b8(nodejs.org<\/a>)\uc5d0\uc11c \ub2e4\uc6b4\ub85c\ub4dc\ud558\uc5ec \uc124\uce58\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n \uc774\uc81c \uae30\ubcf8\uc801\uc778 Express \uc11c\ubc84\ub97c \uc0dd\uc131\ud558\uace0 Socket.io\ub97c \uc5f0\uacb0\ud558\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n \uc11c\ubc84\uc758 \uae30\ubcf8 \ud398\uc774\uc9c0\ub85c \uc0ac\uc6a9\ud560 \uc774\uc81c \uc11c\ubc84\ub97c \uc2e4\ud589\ud574 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n \uc11c\ubc84\uac00 \uc2e4\ud589 \uc911\uc778 \uc0c1\ud0dc\uc5d0\uc11c \ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c \uc774\uc81c Socket.io\uc758 \uae30\ubcf8\uc801\uc778 \uc2a4\ud2b8\ub9bc\uc744 \uc0ac\uc6a9\ud558\uc5ec \ud074\ub77c\uc774\uc5b8\ud2b8\uc640 \uc11c\ubc84 \uac04\uc758 \uba54\uc2dc\uc9c0\ub97c \uc8fc\uace0\ubc1b\ub294 \uae30\ub2a5\uc744 \uad6c\ud604\ud574 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n \uc11c\ubc84\ub97c \uc7ac\uc2e4\ud589\ud558\uace0 Socket.io\uc758 \uac15\ub825\ud55c \uae30\ub2a5 \uc911 \ud558\ub098\ub294 \ubc29(Room) \uae30\ub2a5\uc785\ub2c8\ub2e4. \uc774\ub97c \ud1b5\ud574 \uc5ec\ub7ec \uac1c\uc758 \ubc29\uc744 \ub9cc\ub4e4\uc5b4 \ud2b9\uc815 \ud074\ub77c\uc774\uc5b8\ud2b8\ub9cc \uba54\uc2dc\uc9c0\ub97c \uc218\uc2e0\ud558\ub3c4\ub85d \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n \ubc29 \uae30\ub2a5 \ucd94\uac00 \ud6c4, \ud2b9\uc815 \ubc29\uc5d0 \ub4e4\uc5b4\uac00\uc11c \uba54\uc2dc\uc9c0\ub97c \uc8fc\uace0\ubc1b\uc744 \uc218 \uc788\ub294\uc9c0 \ud655\uc778\ud574 \ubcf4\uc138\uc694.<\/p>\n \uc774\ubc88 \uac15\uc88c\uc5d0\uc11c\ub294 Express\uc640 Socket.io\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc2e4\uc2dc\uac04 \ud1b5\uc2e0\uc744 \uad6c\ud604\ud558\ub294 \ubc29\ubc95\uc5d0 \ub300\ud574 \uc54c\uc544\ubcf4\uc558\uc2b5\ub2c8\ub2e4. \uc2e4\uc2dc\uac04 \ucc44\ud305\uc774\ub098 \ub370\uc774\ud130 \uc804\uc1a1\uc744 \ud544\uc694\ub85c \ud558\ub294 \ub2e4\uc591\ud55c \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c \uc774 \uae30\uc220\uc744 \ud65c\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n \uc2e4\uc2dc\uac04 \ud1b5\uc2e0\uc744 \uad6c\ud604\ud558\uba74\uc11c \uc5ec\uc131\ud654\ub41c \uc131\uaca9\uc758 \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uc744 \uc81c\uacf5\ud560 \uc218 \uc788\uc73c\uba70, \ub354 \ub098\uc544\uac00 \uc6f9 \uc18c\ucf13\uc744 \ud1b5\ud574 \ub2e4\uc591\ud55c \uae30\ub2a5\uc744 \ud655\uc7a5\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. Socket.io\uc640 Express \uc870\ud569\uc744 \uc774\uc6a9\ud55c \uc2e4\uc2dc\uac04 \ud1b5\uc2e0\uc758 \uac00\ub2a5\uc131\uc740 \ubb34\uad81\ubb34\uc9c4\ud569\ub2c8\ub2e4.<\/p>\n \ucd94\uac00\uc801\uc778 \uc790\ub8cc\ub098 \ud3ec\uad04\uc801\uc778 Socket.io\uc758 \uae30\ub2a5\ub4e4\uc744 \ud0d0\uad6c\ud558\uace0 \uc2f6\ub2e4\uba74 \uacf5\uc2dd \ubb38\uc11c(socket.io\/docs<\/a>)\ub97c \ubc29\ubb38\ud574 \ubcf4\uc138\uc694. \uc790\uc8fc \ubb3b\ub294 \uc9c8\ubb38(FAQ) \uc139\uc158\uc774\ub098 \ub2e4\uc591\ud55c \uc608\uc81c \ucf54\ub4dc\ub3c4 \ud655\uc778\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n <\/body><\/p>\n","protected":false},"excerpt":{"rendered":"Express<\/code> \ud504\ub808\uc784\uc6cc\ud06c\uc640 Socket.io<\/code> \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc2e4\uc2dc\uac04 \ud1b5\uc2e0\uc744 \uad6c\ud604\ud558\ub294 \ubc29\ubc95\uc5d0 \ub300\ud574 \uc54c\uc544\ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \uc2e4\uc2dc\uac04 \ud1b5\uc2e0\uc740 \uc0ac\uc6a9\uc790\uc640 \uc2dc\uc2a4\ud15c \uac04\uc758 \uc989\uac01\uc801\uc778 \ub370\uc774\ud130 \uc804\uc1a1\uc744 \uac00\ub2a5\ud558\uac8c \ud558\uc5ec, \uc6f9\uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uc744 \ud06c\uac8c \ud5a5\uc0c1\uc2dc\ud0b5\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4, chatting application\uc774\ub098 \uc2e4\uc2dc\uac04 \ub370\uc774\ud130 \ub300\uc2dc\ubcf4\ub4dc\uc640 \uac19\uc740 \uc2dc\uc2a4\ud15c\uc5d0\uc11c \uc720\uc6a9\ud558\uac8c \uc0ac\uc6a9\ub429\ub2c8\ub2e4.<\/p>\n1. Socket.io\ub780?<\/h2>\n
Socket.io<\/code>\ub294 \uc6f9 \uc18c\ucf13\uc744 \uae30\ubc18\uc73c\ub85c \ud55c \uc2e4\uc2dc\uac04 \uc591\ubc29\ud5a5 \ud1b5\uc2e0\uc744 \uc704\ud55c JavaScript \ub77c\uc774\ube0c\ub7ec\ub9ac\uc785\ub2c8\ub2e4. Socket.io\ub294 \ud074\ub77c\uc774\uc5b8\ud2b8\uc640 \uc11c\ubc84 \uac04\uc758 \uc2e4\uc2dc\uac04 \uc5f0\uacb0\uc744 \uc0dd\uc131\ud558\uace0, \uc774\ub97c \ud1b5\ud574 \ub370\uc774\ud130\ub97c \uc2e4\uc2dc\uac04\uc73c\ub85c \uc804\uc1a1\ud560 \uc218 \uc788\uac8c \ud574\uc90d\ub2c8\ub2e4. \uc774 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub294 \uc6f9 \uc18c\ucf13, HTTP Long Polling \ub4f1 \uc5ec\ub7ec \uc804\uc1a1 \ubc29\ubc95\uc744 \uc9c0\uc6d0\ud569\ub2c8\ub2e4.<\/p>\n1.1 \ud2b9\uc9d5<\/h3>\n
\n
2. \ud658\uacbd \uc124\uc815<\/h2>\n
2.1 \ud504\ub85c\uc81d\ud2b8 \ucd08\uae30\ud654<\/h3>\n
mkdir socketio-example\ncd socketio-example\nnpm init -y<\/code><\/pre>\n2.2 \ud544\uc694\ud55c \ud328\ud0a4\uc9c0 \uc124\uce58<\/h3>\n
npm install express socket.io<\/code><\/pre>\n3. \uc11c\ubc84 \ubc0f \ud074\ub77c\uc774\uc5b8\ud2b8 \uc0dd\uc131<\/h2>\n
3.1 Express \uc11c\ubc84 \uc124\uc815<\/h3>\n
const express = require('express');\nconst http = require('http');\nconst socketIo = require('socket.io');\n\nconst app = express();\nconst server = http.createServer(app);\nconst io = socketIo(server);\n\napp.get('\/', (req, res) => {\n res.sendFile(__dirname + '\/index.html');\n});\n\nio.on('connection', (socket) => {\n console.log('\uc0c8\ub85c\uc6b4 \ud074\ub77c\uc774\uc5b8\ud2b8 \uc5f0\uacb0\ub428');\n\n socket.on('disconnect', () => {\n console.log('\ud074\ub77c\uc774\uc5b8\ud2b8 \uc5f0\uacb0 \ud574\uc81c');\n });\n});\n\nconst PORT = process.env.PORT || 3000;\nserver.listen(PORT, () => {\n console.log(`\uc11c\ubc84\uac00 http:\/\/localhost:${PORT}\uc5d0\uc11c \uc2e4\ud589 \uc911`);\n});<\/code><\/pre>\n3.2 \ud074\ub77c\uc774\uc5b8\ud2b8 HTML \ud30c\uc77c \uc0dd\uc131<\/h3>\n
index.html<\/code> \ud30c\uc77c\uc744 \uc0dd\uc131\ud569\ub2c8\ub2e4.<\/p>\n<!DOCTYPE html>\n<html lang=\"ko\">\n<head>\n <meta charset=\"UTF-8\">\n <title>Socket.io \uc608\uc81c<\/title>\n <script src=\"\/socket.io\/socket.io.js\"><\/script>\n <script>\n const socket = io();\n \n socket.on('connect', () => {\n console.log('\uc11c\ubc84\uc5d0 \uc5f0\uacb0\ub428');\n });\n <\/script>\n<\/head>\n<body>\n <h1>Socket.io\uc640 \ud568\uaed8\ud558\ub294 \uc2e4\uc2dc\uac04 \ud1b5\uc2e0<\/h1>\n<\/body>\n<\/html><\/code><\/pre>\n3.3 \uc11c\ubc84 \uc2e4\ud589<\/h3>\n
node index.js<\/code><\/pre>\nhttp:\/\/localhost:3000<\/code>\uc73c\ub85c \uc774\ub3d9\ud558\uba74 “Socket.io\uc640 \ud568\uaed8\ud558\ub294 \uc2e4\uc2dc\uac04 \ud1b5\uc2e0”\uc774\ub77c\ub294 \ubb38\uad6c\uac00 \ud45c\uc2dc\ub418\ub294 \uc6f9 \ud398\uc774\uc9c0\ub97c \ubcfc \uc218 \uc788\uc744 \uac83\uc785\ub2c8\ub2e4.<\/p>\n4. \uae30\ubcf8 \uc774\ubca4\ud2b8 \ud1b5\uc2e0 \uad6c\ud604<\/h2>\n
4.1 \uba54\uc2dc\uc9c0 \uc804\uc1a1<\/h3>\n
\uc11c\ubc84 \ucf54\ub4dc \uc218\uc815<\/h4>\n
io.on('connection', (socket) => {\n console.log('\uc0c8\ub85c\uc6b4 \ud074\ub77c\uc774\uc5b8\ud2b8 \uc5f0\uacb0\ub428');\n\n socket.on('chat message', (msg) => {\n console.log('\uba54\uc2dc\uc9c0 \uc218\uc2e0: ' + msg);\n io.emit('chat message', msg);\n });\n\n socket.on('disconnect', () => {\n console.log('\ud074\ub77c\uc774\uc5b8\ud2b8 \uc5f0\uacb0 \ud574\uc81c');\n });\n});<\/code><\/pre>\n\ud074\ub77c\uc774\uc5b8\ud2b8 \ucf54\ub4dc \uc218\uc815<\/h4>\n
<body>\n <h1>Socket.io\uc640 \ud568\uaed8\ud558\ub294 \uc2e4\uc2dc\uac04 \ud1b5\uc2e0<\/h1>\n <ul id=\"messages\"><\/ul>\n <form id=\"form\" action=\"<!---->\" onsubmit=\"sendMessage(event)\">\n <input id=\"m\" autocomplete=\"off\" \/>\n <button>\uc804\uc1a1<\/button>\n <\/form>\n \n <script>\n const socket = io();\n\n function sendMessage(event) {\n event.preventDefault();\n const input = document.getElementById('m');\n socket.emit('chat message', input.value);\n input.value = '';\n return false;\n }\n\n socket.on('chat message', (msg) => {\n const item = document.createElement('li');\n item.textContent = msg;\n document.getElementById('messages').appendChild(item);\n window.scrollTo(0, document.body.scrollHeight);\n });\n <\/script>\n<\/body><\/code><\/pre>\n4.2 \uacb0\uacfc \ud655\uc778<\/h3>\n
http:\/\/localhost:3000<\/code>\uc5d0 \uc811\uc18d\ud55c \ud6c4, \uba54\uc2dc\uc9c0\ub97c \uc804\uc1a1\ud558\uba74 \ud074\ub77c\uc774\uc5b8\ud2b8 \uac04\uc5d0 \uba54\uc2dc\uc9c0\uac00 \uc2e4\uc2dc\uac04\uc73c\ub85c \uc804\uc1a1\ub418\ub294 \uac83\uc744 \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n5. Room \uae30\ub2a5 \uad6c\ud604<\/h2>\n
5.1 \ubc29 \ub9cc\ub4e4\uae30<\/h3>\n
io.on('connection', (socket) => {\n console.log('\uc0c8\ub85c\uc6b4 \ud074\ub77c\uc774\uc5b8\ud2b8 \uc5f0\uacb0\ub428');\n\n socket.on('join room', (room) => {\n socket.join(room);\n console.log(`\ubc29 ${room}\uc5d0 \uc811\uc18d\ud568.`);\n });\n\n socket.on('chat message', (msg) => {\n const room = msg.room;\n const message = msg.message;\n console.log(`\ubc29 ${room}\uc5d0 \uba54\uc2dc\uc9c0 \uc218\uc2e0: ${message}`);\n io.to(room).emit('chat message', message);\n });\n\n socket.on('disconnect', () => {\n console.log('\ud074\ub77c\uc774\uc5b8\ud2b8 \uc5f0\uacb0 \ud574\uc81c');\n });\n});<\/code><\/pre>\n5.2 \ud074\ub77c\uc774\uc5b8\ud2b8 \ubc29 \uc785\uc7a5 \uae30\ub2a5 \ucd94\uac00<\/h3>\n
const roomInput = document.getElementById('room-input');\nsocket.emit('join room', roomInput.value);\nsocket.emit('chat message', { room: roomInput.value, message: input.value });<\/code><\/pre>\n5.3 \uacb0\uacfc \ud655\uc778<\/h3>\n
6. \uacb0\ub860<\/h2>\n
7. \ub354 \uc54c\uc544\ubcf4\uae30<\/h2>\n