고수님들 스프링 웹소켓으로 실시간 채팅 기능 구현 관련

고수님들 스프링 웹소켓으로 실시간 채팅 기능 구현 관련

QA

고수님들 스프링 웹소켓으로 실시간 채팅 기능 구현 관련

본문

안녕하세요. 스프링 mvc로 웹소켓 이용해서 실시간 채팅 구현하려고 합니다.

그런데 기존에 서블릿에서는 잘 되었는데 스프링으로 하니 기능이 안되어서요 ㅠㅠ

웹소켓 연결이 안되는 거 같아서 뭔가 저 주소만 바꿔주면 될거같은데

어떤식으로 주소를 써주어야하나요? 아니면 컨트롤러에서 메소드를 어떤식으로 생성해야하는지..

아시는 분이 계시다면 답변해주시면 정말 감사하겠습니다 ㅠㅠ

1614750665687.PNG

 

 

채팅관련 전체 코드입니다.

 

<div id="con_ri">

<!--/ 커뮤니티 전용 사이드 배너 -->

<div id="sub_menu">

<div id="consubmit2"></div>

</div>

<div class="sub-menu">

<div class="section tag-fav">

<div class="title">실시간 채팅</div>

<div id="board_favorite_tags" class="list board_fav_tags empty">

<div class="fav-empty">

상대방과 실시간 채팅으로 대화해보세요.<br>

 

<input type="hidden" id="sender" size="10" value="${ sessionScope.loginUser.nickname }">

<input type="hidden" id="receiver" size="10" value="${ qplist.pro_answerer }"><br>

<button id="start" style="float:right;"><img src="/hhw/resources/images/icon/ico_chat.jpg" width="30px">

채팅방 입장</button><br>

 

</div>

</div>

 

<!-- 채팅방 화면  -->

<div style="width: 300px; display: none;" id="chatbox">

<fieldset>

<div id="messageWindow"></div>

<br>    <input id="inputMessage" onkeyup="enterKey();">

 <input type="button" value="보내기" onclick="send();"> <input

type="button" value="나가기" id="endBtn">

</fieldset>

</div>

</div>

</div>

</div>

</div>

</div>

<!-- } 콘텐츠 끝 -->

 

 

<script type="text/javascript">

//상대방과 연결할 웹소켓 객체 준비

var webSocket = null;

//채팅창 앨리먼트 변수

var $textarea = $('#messageWindow');

//상대방에게 전송할 메세지 입력 앨리먼트 변수

var $inputMessage = $('#inputMessage');

 

/*

웹소켓 생성 후 사용될 메소드들

1. open() : 웹소켓 객체 생성시 실행됨.

서버와 연결해 주는 메소드임

2. send() : 서버에 메세지 전송하는 메소드임

3. message() : 서버에서 데이터를 받는 메소드임

4. error() : 서버에 데이터 전송 중 에러 발생시

자동 실행되는 메소드임

5. close() : 서버와 연결 끊을 때 사용하는 메소드임.

*/

 

function connection(){

/*

웹소켓 객체는 생성자를 통해 생성됨

객체 생성시에 서버와 자동 연결됨.

사용되는 프로토콜은 ws:// 임.

*/

webSocket = new WebSocket(

"ws://localhost:8888/" +

"<${ request.getContextPath() }>");

 

//웹소켓을 통해서 연결이 될 때 동작할 이벤트핸들러 작성

webSocket.onopen = function(event){

$textarea.html("<p class='chat_content'>"

+ $('#sender').val() + 

"님이 입장하셨습니다.</p><br>");

//웹소켓을 통해 채팅서버에 메세지 전송함

webSocket.send($('#sender').val() + 

"|님이 입장함.");

};

 

//서버로 부터 메세지를 받을 때 동작할 이벤트핸들러 작성

webSocket.onmessage = function(event){

onMessage(event);

};

 

//서버로 메세지 보낼 때 에러 발생 처리용 이벤트핸들러 작성

webSocket.onerror = function(event){

onError(event)

};

 

//서버와 연결을 닫을 때의 이벤트핸들러 작성

webSocket.onclose = function(event){

onClose(event);

};

}

 

//보내기 버튼 클릭시 실행되는 send() 함수 작성

function send(){

//메세지를 입력하지 않고 버튼 누른 경우

if($inputMessage.val() == "") {

alert("전송할 메세지를 입력하세요.");

}else{  //메세지가 입력된 경우

$textarea.html($textarea.html() + 

"<p class='chat_content'>나 : "

+ $inputMessage.val() + "</p><br>");

webSocket.send($('#sender').val() + "|"

+ $inputMessage.val());

$inputMessage.val('');  //기록된 메세지 삭제함

}

 

//화면이 위로 스크롤되게 처리함

$textarea.scrollTop($textarea.height());

}  //send()

 

//웹소켓 이벤트핸들러에 의해 실행되는 함수 작성

function onMessage(event){

//서버로 부터 데이터를 받았을 때 작동되는 함수임

var message = event.data.split("|");

//보낸사람 아이디

var receiverID = message[0];

//전송온 메세지

var content = message[1];

 

//전송온 메세지가 비었거나, 보낸사람이 내가 연결한

//사람이 아닐 경우 아무 내용도 실행하지 않는다.

if(content == "" || 

!receiverID.match($('#receiver').val())){

//비워 놓음

}else{

$textarea.html($textarea.html() +

"<p class='chat_content other-side'>"

+ receiverID + " : " + content 

+ "</p><br>");

//화면이 위로 스크롤되게 처리함

$textarea.scrollTop($textarea.height());

}

 

} //onMessage()

 

function onError(event){

alert(event.data);

}

 

function onClose(event){

alert(event);

}

 

//'채팅하기' 버튼 클릭시, 서버와 연결되고 

//채팅창이 나타나게 함

$('#start').on('click', function(){

//채팅창 영역 보이게 함

$('#chatbox').css("display", "block");

//클릭한 버튼은 안 보이게 함

$(this).css("display", "none");

//서버와 연결함

connection();

});

 

//'나가기' 버튼 클릭시 소켓닫기

//채팅창  안 보이게 함

$('#endBtn').on('click', function(){

//채팅창 안 보이게 함

$('#chatbox').css("display", "none");

//채팅하기 버튼은 다시 보이게 함

$('#start').css("display", "inline");

//서버로 종료 메세지 전송함

webSocket.send($('#sender').val() 

+ "님이 퇴장하였습니다.");

//소켓닫기

webSocket.close();

});

 

//전송할 메세지 입력하면서, 키보드 키에서 손뗄때마다

//실행되는 이벤트핸들러 함수

function enterKey(){

//누른 키가 엔터키(Enter) 이면 메세지 전송함

if(window.event.keyCode == 13){

send();

}

}

</script>

 

이 질문에 댓글 쓰기 :

답변을 작성하시기 전에 로그인 해주세요.
전체 9
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT