bbung Devlog

Socket.io

Socket.io

Node.js Server๋ฅผ ์ด์šฉํ•˜๋ฉด ์‹ค์‹œ๊ฐ„์œผ๋กœ ์—…๋ฐ์ดํŠธ๋ฐ›์•„ ์‹ค์‹œ๊ฐ„์ฑ„ํŒ…, ์•Œ๋ฆผ์„ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ๋Š” ๋ชจ๋“ˆ์ด ์žˆ๋‹ค.

express๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ์ด๋Ÿฌํ•œ ๊ธฐ๋Šฅ์„ ์ง€์›ํ•˜๋Š” Socket.io๋ผ๋Š” ๋ชจ๋“ˆ์ด ์žˆ๋‹ค.

Socket.io์˜ ์„ค์น˜

cmd / ํ„ฐ๋ฏธ๋„์˜ npm์„ ์‚ฌ์šฉํ•˜์—ฌ ์‰ฝ๊ฒŒ ๋ชจ๋“ˆ์„ ์„ค์น˜ ํ•  ์ˆ˜ ์žˆ๋‹ค.

npm install socket.io

์„ค์น˜ ์™„๋ฃŒ์‹œ package.json ํŒŒ์ผ์— socket.io๊ฐ€ ์„ค์น˜ ๋œ๊ฒƒ์„ ํ™•์ธ ํ•  ์ˆ˜ ์žˆ๋‹ค.

{
    "name": "socket-chat-example",
    "version": "0.0.1",
    "description": "my first socket.io app",
    "dependencies": {
        "express": "^4.17.1",
        "socket.io": "^4.1.2",
    }
}

Socket.io์„œ๋ฒ„

์•„๋ž˜์™€ ๊ฐ™์ด express์„œ๋ฒ„๋ฅผ์ด์šฉํ•˜์—ฌ socket.io๋ฅผ ์‚ฌ์šฉ์ด ๊ฐ€๋Šฅํ•˜๋‹ค.

socket.io๋Š” ๋ณดํŽธ์ ์œผ๋กœ .emit()๊ณผ .on()์„ ํ†ตํ•ด ์‚ฌ์šฉํ•œ๋‹ค.

server.js

const express = require("express");
const app = express();
const server = require("http").Server(app);
const io = require("socket.io")(server);

// ์„œ๋ฒ„ ๋ผ์šฐํ„ฐ
app.get("/", (req, res) => {
  res.send("main.html");
});

// socket.io ์ ‘์†
io.on("connection", (socket) => {
    console.log("์ ‘์†");

    socket.on("ํด๋ผ์ด์–ธํŠธ ์š”์ฒญ", (msg)=>{
        console.log(msg);
        // ๋ณด๋‚ด๋Š” ๋ฐ์ดํ„ฐ ์ฝ˜์†” ์ถœ๋ ฅ
        io.emit("์„œ๋ฒ„์˜ ์‘๋‹ต", msg);
    })

    socket.on('disconnect', ()=>{
        console.log("์ข…๋ฃŒ")
    })
});

server.listen(3000);

main.html

<body>
<script src="/socket.io/socket.io.js"></script>
<script>

    let socket = io();

    socket.emit("ํด๋ผ์ด์–ธํŠธ ์š”์ฒญ", "๋ณด๋‚ด๋Š” ๋ฐ์ดํ„ฐ");

    socket.on("์„œ๋ฒ„์˜ ์‘๋‹ต", (msg)=>{
        console.log(msg);
        // ๋ณด๋‚ด๋Š” ๋ฐ์ดํ„ฐ ์ฝ˜์†” ์ถœ๋ ฅ
    })

</script>
</body>

socket.emit()

socket.emit("eventName"[, โ€ฆargs][, ack])
- eventName (String)
- args
- ack (Function)
- Returns true

๋ฌธ์ž์—ด ์ด๋ฆ„์œผ๋กœ ์‹๋ณ„๋˜๋Š” ์†Œ์ผ“์— ์ด๋ฒคํŠธ๋ฅผ ๋‚ด ๋ณด๋ƒ…๋‹ˆ๋‹ค. ๋‹ค๋ฅธ ๋งค๊ฐœ ๋ณ€์ˆ˜๋ฅผ ํฌํ•จ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
๋ชจ๋“  ์ง๋ ฌํ™” ๊ฐ€๋Šฅํ•œ ๋ฐ์ดํ„ฐ ๊ตฌ์กฐ๊ฐ€ ์ง€์›๋ฉ๋‹ˆ๋‹ค.

socket.on()

socket.on("eventName", listener)

eventName ์ด๋ผ๋Š” ์ด๋ฒคํŠธ์— ๋Œ€ํ•œ listeners ๋ฐฐ์—ด์˜ ๋์— listener ํ•จ์ˆ˜๋ฅผ ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค.

socket.io๋ฅผ ์ด์šฉํ•œ ์ฑ„ํŒ…๋ฐฉ ๊ตฌํ˜„ ์˜ˆ์ œ

[์ฑ„ํŒ… ์˜ˆ์ œ link](https://bbung95-chat.herokuapp.com)

Categories:

Updated:

Leave a comment

You may also enjoy