제이쿼리 not defined 오류

언어/JavaScript

제이쿼리 not defined 오류

우당탕카멜레온 2024. 3. 19. 11:41

웹소켓을 사용한 채팅 구현 중 제이쿼리 오류발생...

코드를 확인해보니 로드될때 함수호출이 정의되지 않았다고 한다..

1) 문제의 원인

1. jQuery 라이브러리가 로드되지 않았을 때

2. jQuery 충돌

두가지의 원인이 있을 수 있는데,

아마도 나는 자바스크립트 구문에 제이쿼리를 로드하지 않아서 생기는 오류로 판단된다...

2) 해결 코드

수정된 아래의 코드

너무나도 기본적인 실수....인것같다....이리저리 짜집기하면서 코드를 짜다보니 생기는 실수인듯하다

<head> 부분에 제이쿼리 라이브러리를 추가해주었다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>chat</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
    <div class="col-6">
        <label><b>채팅방</b></label>
    </div>
    <div>
        <div id="msgArea" class="col"></div>
        <div class="col-6">
            <div id="chatArea">

            </div>
            <div class="write">
                <input type="text" id="userID" placeholder="닉네임">
                <input type="text" id="msg" class="form-control">
                    <button class="btn btn-outline-secondary" type="button" id="button-send">전송</button>
            </div>
        </div>
    </div>

</div>
<script>

    $(document).ready(function() {
        // 버튼 클릭 시 send 함수 호출
        $("#button-send").on("click", function () {
            send();
        });


        const webSocket = new WebSocket("ws://localhost:8080/ws/chat");

        webSocket.onmessage = onmessage;
        webSocket.onopen = onOpen;
        webSocket.onclose = onClose;

    });

        function send(){
            let msg = document.getElementById("msg");
            let userID = document.getElementById("userID");

            console.log(userID.value + ":" + msg.value);

            let chat = document.getElementById("chatArea");

           chat.innerHTML += `<div>${userID.value}: ${msg.value}</div>`;
           webSocket.send()
           
        }




</script>
</body>
</html>