๐Ÿ”ฅ TIL - Day 49

Kim Dae Hyunยท2021๋…„ 11์›” 7์ผ
0

TIL

๋ชฉ๋ก ๋ณด๊ธฐ
59/93
post-thumbnail

๐Ÿ“Œ ๋Œ“๊ธ€์•Œ๋ฆผ ๊ธฐ๋Šฅ ๊ตฌํ˜„

์ด๋ฒˆ ๊ตฌํ˜„ ํ…Œ์ŠคํŠธ์˜ ํ•ต์‹ฌ ๊ธฐ๋Šฅ์€ ๋Œ“๊ธ€์•Œ๋ฆผ ๊ธฐ๋Šฅ์ด์˜€๋‹ค.
์ž์‹ ์˜ ๊ธ€์— ๋Œ“๊ธ€์ด ๋‹ฌ๋ฆด ๋•Œ alert ์ฐฝ์œผ๋กœ ์•Œ๋ฆผ์„ ์ฃผ๋Š” ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•ด์•ผ ํ•œ๋‹ค.

์ด๋ ‡๊ฒŒ ์‹ค์‹œ๊ฐ„์œผ๋กœ ๋Œ“๊ธ€์— ๋Œ€ํ•œ ์•Œ๋ฆผ์„ ์ฃผ๋ ค๋ฉด ๋ณดํ†ต์˜ HTTP ์š”์ฒญ์œผ๋กœ๋Š” ์‰ฝ์ง€ ์•Š๋‹ค.
HTTP์š”์ฒญ์€ ๋ฐ˜๋“œ์‹œ ํด๋ผ์ด์–ธํŠธ์˜ ์š”์ฒญ์ด ์žˆ์–ด์•ผ ์„œ๋ฒ„์—์„œ ์ฒ˜๋ฆฌ๋ฅผ ํ•˜๊ณ  ์‘๋‹ต์„ ๋‚ด๋ ค์ค„ ์ˆ˜ ์žˆ๋‹ค. ์ด๋Ÿฐ ํ†ต์‹ ์„ ๋‹จ๋ฐฉํ–ฅ ํ†ต์‹ ์ด๋ผ ํ•œ๋‹ค.
๋งŒ์•ฝ HTTP๋กœ ์‹ค์‹œ๊ฐ„ ๋Œ“๊ธ€์•Œ๋ฆผ์„ ๊ตฌํ˜„ํ•ด์•ผ ํ•œ๋‹ค๋ฉด ๊ต‰์žฅํžˆ ์งง์€ ์ฃผ๊ธฐ๋กœ ๊ณ„์†ํ•ด์„œ ํด๋ผ์ด์–ธํŠธ๊ฐ€ ์ž์‹ ์˜ ์ƒํƒœ๋ฅผ ์„œ๋ฒ„๋กœ ์š”์ฒญํ•ด์•ผ ํ•  ๊ฒƒ์ด๋‹ค.

์ด๋Ÿฐ ๋ถ€๋ถ„์„ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด ์†Œ์ผ“ํ†ต์‹ ์„ ์ œ๊ณตํ•œ๋‹ค.
์†Œ์ผ“ํ†ต์‹ ์˜ ํ•ต์‹ฌ์€ ์–‘๋ฐฉํ–ฅ ํ†ต์‹ ์ด๋‹ค. ํด๋ผ์ด์–ธํŠธ์˜ ์š”์ฒญ์ด ์—†์–ด๋„ ์„œ๋ฒ„๋Š” ํด๋ผ์ด์–ธํŠธ์—๊ฒŒ ์‘๋‹ต์„ ๋ณด๋‚ผ ์ˆ˜ ์žˆ๋‹ค. ์„œ๋ฒ„๋Š” ํด๋ผ์ด์–ธํŠธ์™€ ์–‘๋ฐฉํ–ฅ์œผ๋กœ ์—ฐ๊ฒฐ์„ ๋งบ๊ณ  ํŠน์ • ์ด๋ฒคํŠธ๊ฐ€ ์žˆ์„ ๋•Œ ์ด ์—ฐ๊ฒฐ์„ ์ด์šฉํ•ด์„œ ์„œ๋ฒ„๋Š” ํด๋ผ์ด์–ธํŠธ์—๊ฒŒ ์‘๋‹ต์„ ๋‚ด๋ ค์ค„ ์ˆ˜ ์žˆ๋‹ค.

์—ฌ๊ธฐ์„œ ํŠน์ • ์ด๋ฒคํŠธ๊ฐ€ ๋Œ“๊ธ€๋‹ฌ๊ธฐ๊ฐ€ ๋˜๋Š” ๊ฒƒ์ด๋‹ค.

๐Ÿ“Œ ์„œ๋ฒ„์ธก ์ฒ˜๋ฆฌ emit

Flask๋Š” ์†Œ์ผ“ํ†ต์‹ ์„ ์œ„ํ•œ ๋ชจ๋“ˆ์„ ์ œ๊ณตํ•œ๋‹ค.

pip install flask_socketio

๋‹ค์Œ์€ ์ด Application์—์„œ ์†Œ์ผ“ํ†ต์‹ ์„ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•œ ์„ค์ •์ด๋‹ค.

app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret'
socketio = SocketIO(app)

if __name__ == '__main__':
    # app.run('0.0.0.0', port=5000, debug=True)
    socketio.run(app, debug=True)

๋‹ค์Œ์œผ๋กœ ์„œ๋ฒ„์ธก์—์„œ ๋Œ“๊ธ€์ด ๋‹ฌ๋ ธ์„ ๋•Œ ํ•ด๋‹น ๊ธ€์„ ์ž‘์„ฑํ•œ ํด๋ผ์ด์–ธํŠธ์—๊ฒŒ ์‘๋‹ต์„ ๋ณด๋‚ด์•ผ ํ•œ๋‹ค.

@app.route('/comment', methods=['POST'])
def add_comment():
    comment = request.form['comment']
    memo_id = int(request.form['memo_id'])

    doc = {
        'comment': comment,
        'memo_id': memo_id
    }

    db.comments.insert_one(doc)

    find_memo = db.memos.find_one({'memo_id': memo_id}, {'_id': False})
    socketio.emit(find_memo['writer_id'], "ok")

    return jsonify({"result": "success", "msg": "๋Œ“๊ธ€๋‹ฌ๊ธฐ ์™„๋ฃŒ"})

์ค‘์š”ํ•œ ๊ฑด socketio.emit() ์ด ๋ถ€๋ถ„์ด๋‹ค.
์†Œ์ผ“์„ ํ†ตํ•ด memo ์ž‘์„ฑ์ž์˜ id๋ฅผ ํ‚ค ๊ฐ’์œผ๋กœ ์‘๋‹ต์„ ๋ณด๋‚ด๊ณ  ์žˆ๋‹ค.

๐Ÿ“Œ ํด๋ผ์ด์–ธํŠธ์ธก ์ฒ˜๋ฆฌ on

๋‹ค์Œ์€ ํด๋ผ์ด์–ธํŠธ ์ธก ์ฒ˜๋ฆฌ์ด๋‹ค.
๊ตฌํ˜„ํ•ด์•ผ ํ•  ์‚ฌํ•ญ์€ ํฌ๊ฒŒ 2๊ฐœ ์ด๋‹ค.

  • ๋กœ๊ทธ์ธ ๋œ ์‚ฌ์šฉ์ž์˜ ๊ฒฝ์šฐ ํŽ˜์ด์ง€ ๋กœ๋“œ์‹œ ์ž์‹ ์ด ๊ฐ–๊ณ  ์žˆ๋Š” ํ† ํฐ์„ ์„œ๋ฒ„๋กœ ๋ณด๋‚ด๊ณ  id๊ฐ’์„ ์‘๋‹ต๋ฐ›๋Š”๋‹ค.
  • ์„œ๋ฒ„์™€ ์†Œ์ผ“์„ ์—ฐ๊ฒฐํ•˜๊ณ  ์„œ๋ฒ„๋กœ๋ถ€ํ„ฐ ๋ฐ›์€ ์ž์‹ ์˜ id๋ฅผ ์†Œ์ผ“์— ๋ฐ”์ธ๋”ฉ ์‹œํ‚จ๋‹ค.

๋‹จ์ˆœํ•˜๊ฒŒ ์ƒ๊ฐํ•˜๋ฉด ์„œ๋ฒ„์—์„œ emit๋กœ ๋ณด๋‚ธ ๊ฐ’์„ ํด๋ผ์ด์–ธํŠธ์—์„œ on์œผ๋กœ ๋ฐ›๋Š”๋‹ค ๋ผ๊ณ  ์ดํ•ดํ•˜๋ฉด ๋  ๊ฒƒ ๊ฐ™๋‹ค.

function connectSocket(id) {
    console.log('connect socket: ', id)
    var socket = io.connect('http://localhost:5000');
    socket.on(id, function () {
        alert("์ž‘์„ฑํ•˜์‹  ๊ธ€์— ๋Œ“๊ธ€์ด ๋‹ฌ๋ ธ์–ด์š”!!");
    })
}

์†Œ์ผ“์— ๋Œ€ํ•œ ์ •ํ™•ํ•œ ์ดํ•ด๊ฐ€ ๋” ํ•„์š”ํ•  ๊ฒƒ ๊ฐ™๋‹ค.

profile
์ข€ ๋” ์ฒœ์ฒœํžˆ ๊นŒ๋จน๊ธฐ ์œ„ํ•ด ๊ธฐ๋กํ•ฉ๋‹ˆ๋‹ค. ๐Ÿง

0๊ฐœ์˜ ๋Œ“๊ธ€