Notice
Recent Posts
Recent Comments
Link
ยซ   2024/09   ยป
์ผ ์›” ํ™” ์ˆ˜ ๋ชฉ ๊ธˆ ํ† 
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
Tags more
Archives
Today
Total
๊ด€๋ฆฌ ๋ฉ”๋‰ด

JiYoung Dev ๐Ÿ–ฅ

[Node.js] Socket ํ†ต์‹  (2023.07.10) ๋ณธ๋ฌธ

full stack/Back-End

[Node.js] Socket ํ†ต์‹  (2023.07.10)

Shinjio 2023. 7. 10. 13:47

http ํ†ต์‹ 

ํ†ต์‹ ์ˆœ์„œ : ํด๋ผ์ด์–ธํŠธ์˜ ์š”์ฒญ์ด ๋“ค์–ด์™€์•ผ ์„œ๋ฒ„์ชฝ์—์„œ ๊ทธ์— ์•Œ๋งž๋Š” ์‘๋‹ต์„ ์ง„ํ–‰ํ•˜๋Š” ๋ฐฉ์‹ 

์„œ๋ฒ„๊ฐ€ ๋จผ์ € ๋ฐ์ดํ„ฐ๋ฅผ ๋ณด๋‚ด๋Š” ๊ฒŒ ๋ถˆ๊ฐ€๋Šฅํ•จ 

 

socket ํ†ต์‹ 

์„œ๋ฒ„์™€ ํด๋ผ์ด์–ธํŠธ ์–‘๋ฐฉํ–ฅ ์—ฐ๊ฒฐ์ด ์ด๋ฃจ์–ด์ง€๋Š” ํ†ต์‹ ์œผ๋กœ, ํด๋ผ์ด์–ธํŠธ๋„ ์„œ๋ฒ„๋กœ ์š”์ฒญ์„ ๋ณด๋‚ผ ์ˆ˜ ์žˆ๊ณ  ์„œ๋ฒ„๋„ ํด๋ผ์ด์–ธํŠธ๋กœ ์š”์ฒญ์„ ๋ณด๋‚ผ ์ˆ˜ ์žˆ๋Š” ํ†ต์‹ 

์˜ˆ๋ฅผ๋“ค์–ด ์‹ค์‹œ๊ฐ„ ์•Œ๋ฆผ

 

 

 

Node.js์—์„œ๋Š” Socket.IO npm ๋ชจ๋“ˆ์„ ์ด์šฉํ•˜์—ฌ ๊ฐ„๋‹จํ•˜๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Œ 

 

๋ชจ๋“ˆ ์„ค์น˜

npm install socket.io

 

 

์„œ๋ฒ„์ชฝ ์†Œ์ผ“

//์„œ๋ฒ„์ชฝ ์†Œ์ผ“ ์ž‘์„ฑ
const socketIO = require('socket.io')

//์–ด๋Š ์„œ๋ฒ„์™€ ์—ฐ๊ฒฐ์ด ๋œ ์ƒํƒœ๋กœ ์“ธ ๊ฒƒ์ธ์ง€ ์ •์˜๋ฅผ ํ•ด์ค˜์•ผ ํ•จ (ex.port)
                //express server
module.exports = (server) => {
    //express server ์—ฐ๊ฒฐ, ํด๋ผ์ด์–ธํŠธ๊ฐ€ ์ ‘์†ํ•  ๊ฒฝ๋กœ
    const io = socketIO(server, {path : '/socket.io'})

    //ํด๋ผ์ด์–ธํŠธ๊ฐ€ ์ ‘์†ํ–ˆ์„ ๋•Œ (connection) -> ํ•ด๋‹น ํด๋ผ์ด์–ธํŠธ์™€ ํ†ต์‹ ํ•  ์ˆ˜ ์žˆ๋Š” ์†Œ์ผ“ ๊ฐ์ฒด ์ƒ์„ฑ
    io.on('connection', (socket)=>{
        //์†Œ์ผ“์€ ํด๋ผ์ด์–ธํŠธ๋งˆ๋‹ค ๋‹ค๋ฅธ -> ์ž„์˜์ ์œผ๋กœ id ๋ฐœ๊ธ‰
        console.log('์ƒˆ๋กœ์šด ํด๋ผ์ด์–ธํŠธ ์ ‘์†!', socket.id);

        //์†Œ์ผ“ ์—ฐ๊ฒฐ ํ•ด์ œ
        socket.on('disconnect', ()=>{
            console.log('ํด๋ผ์ด์–ธํŠธ ์ ‘์† ํ•ด์ œ!', socket.id);
        })

        //์˜ค๋ฅ˜ ์ฒ˜๋ฆฌ
        socket.on('error', (error)=>{
            console.log(error);
        })

        //ํด๋ผ์ด์–ธํŠธ๊ฐ€ ๋ณด๋‚ธ ๋ฉ”์‹œ์ง€ ๋ฐ›๊ธฐ
        socket.on('reply', (data)=>{
            console.log(data); //data : ํด๋ผ์ด์–ธํŠธ๊ฐ€ ๋ณด๋‚ธ ๋ฉ”์‹œ์ง€ ์ž์ฒด
        })

        //์„œ๋ฒ„๊ฐ€ ํด๋ผ์ด์–ธํŠธ์—๊ฒŒ ๋ฉ”์‹œ์ง€ ๋ณด๋‚ด๊ธฐ
        //์„œ๋ฒ„์ชฝ์—์„œ ๋จผ์ € ์ด๋ฒคํŠธ ๋ฐœ์ƒ (3์ดˆ๋งˆ๋‹ค ๋ฉ”์‹œ์ง€ ๋ณด๋‚ด๊ธฐ)
        socket.interval = setInterval(()=>{
            socket.emit('news', 'Hello Socket.io') //emit : event{key, value(event)} ๋ฐœ์ƒ
        }, 3000)
    })
}

 

 

ํด๋ผ์ด์–ธํŠธ์ชฝ ์†Œ์ผ“

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    ์†Œ์ผ“ํ†ต์‹ 

    <!--์†Œ์ผ“ ์—ฐ๊ฒฐ : node.js์—์„œ ์ œ๊ณตํ•˜๋Š” ๊ธฐ๋Šฅ -> io๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Œ -->
    <script src="/socket.io/socket.io.js"></script>
    <script>
        //ํด๋ผ์ด์–ธํŠธ์ชฝ ์†Œ์ผ“ ๊ฐ์ฒด ์ƒ์„ฑ
        const socket = io.connect('http://localhost:8888', {
            path: '/socket.io'
        })

        //์„œ๋ฒ„์ชฝ์—์„œ ๋ฐœ์ƒ์‹œํ‚ค๋Š” ์ด๋ฒคํŠธ ๋ฐ›๊ธฐ 
        socket.on('news', function (data) {
            console.log(data);
            socket.emit('reply', 'OK')
        })
    </script>
</body>

</html>

 

์†Œ์ผ“ - app.js ์„ค์ •

 

const express = require('express')
const webSocket = require('./socket')
const app = express()

app.set('port', process.env.PORT||8888)
const server = app.listen(app.get('port'), ()=>{
    console.log(app.get('port'), '๋ฒˆ ํฌํŠธ์—์„œ ์„œ๋ฒ„ ์—ฐ๊ฒฐ ๋Œ€๊ธฐ์ค‘...');
})

webSocket(server)

'full stack > Back-End' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

[Spring - Android] JPA ํ™œ์šฉ ์—ฐ๋™ํ•˜๊ธฐ (2023.07.20~21)  (0) 2023.07.20
[Node.js] nunjucks (2023.07.12)  (0) 2023.07.12
[Node.js] ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค ์—ฐ๋™ํ•˜๊ธฐ (2023.07.06 ~ 07)  (0) 2023.07.06
[Node.js] ์ฟ ํ‚ค/์„ธ์…˜ (2023.07.06 ~ 07)  (0) 2023.07.06
[Node.js] Express ์‚ฌ์šฉํ•˜๊ธฐ (2023.07.05)  (0) 2023.07.05
'full stack/Back-End' Related Articles more