웹소켓을 사용한 채팅 구현 중 제이쿼리 오류발생...
코드를 확인해보니 로드될때 함수호출이 정의되지 않았다고 한다..
1) 문제의 원인
1. jQuery 라이브러리가 로드되지 않았을 때
2. jQuery 충돌
두가지의 원인이 있을 수 있는데,
아마도 나는 자바스크립트 구문에 제이쿼리를 로드하지 않아서 생기는 오류로 판단된다...
2) 해결 코드
수정된 아래의 코드
너무나도 기본적인 실수....인것같다....이리저리 짜집기하면서 코드를 짜다보니 생기는 실수인듯하다
<head> 부분에 제이쿼리 라이브러리를 추가해주었다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!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>
'언어 > JavaScript' 카테고리의 다른 글
| 자바스크립트 INPUT 사용 후 비우기 (0) | 2024.03.19 |
|---|---|
| 제이쿼리를 이용해서 Click하면 함수 호출 (0) | 2024.03.19 |