🔥 TIL - Day 49

📌 댓글알림 기능 구현

이번 구현 테스트의 핵심 기능은 댓글알림 기능이였다.
자신의 글에 댓글이 달릴 때 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("작성하신 글에 댓글이 달렸어요!!");
    })
}

소켓에 대한 정확한 이해가 더 필요할 것 같다.