Node.js로 채팅 프로그램 만들기(채팅방 접속하기) #4

오젼·2022년 8월 21일
node.js
0

[Node.js로 채팅 프로그램 만들기]

목록 보기
4/7

강의 #4

채팅 서버로부터 메시지 수신하기

  • 클라이언트측에서 받은 데이터를 처리해주기
  • 서버에서 JSON.stringify로 보내줬기 때문에 클라이언트에선 JSON.parse로 받은 데이터를 파싱해줌
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script>
        let MY_USER_ID = ""; // 나의 고유값
        function connect() { // 웹소켓에 연결
            let websocket = new WebSocket("ws://localhost:8008");
            websocket.onmessage = function (e) { // 서버로부터 메시지가 올 때, 이 이벤트가 실행
                let message = JSON.parse(e.data);
                if (message.code == "my_user_id") { // user_id가 전송됨
                    MY_USER_ID = message.msg
                    alert("user_id 받음: " + MY_USER_ID);
                }
            }
        }
        connect();
    </script>
</head>

websocket.onmessage

채팅창 디자인하기

채팅창 접속하기

<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script>
        let MY_USER_ID = ""; // 나의 고유값
        function connect() { // 웹소켓에 연결
            let my_user_name = $.trim($("#myname").val());
            if (! my_user_name) {
                alert("접속자명을 입력해 주세요");
                $("#myname").focus();
                return false;
            }
            let websocket = new WebSocket("ws://localhost:8008");
            websocket.onmessage = function (e) { // 서버로부터 메시지가 올 때, 이 이벤트가 실행
                let message = JSON.parse(e.data);
                if (message.code == "my_user_id") { // user_id가 전송됨
                    MY_USER_ID = message.msg
                    sendMyNmae(my_user_name);
                    // alert("user_id 받음: " + MY_USER_ID);
                }
            }
            function sendMyNmae(user_name) {
                let data = {
                    "code": "connect_name",
                    "msg": user_name,
                    "user_id": MY_USER_ID
                };
                websocket.send(JSON.stringify(data));
            }
        }
    </script>
</head>
  • sendMyName 함수: 서버에서 user_id 전송해줬을 때와 비슷한 형식으로 user_name과 user_id 전송
profile
오젼
이전 포스트

Node.js로 채팅 프로그램 만들기(전체 클라이언트 제어) #3

다음 포스트

Node.js로 채팅 프로그램 만들기(채팅방 접속하기) #5

0개의 댓글

관련 채용 정보