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

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

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

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

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

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

https://file.okky.kr/images/1614750665687.PNG" />

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

</div>

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

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

</div>

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

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

</fieldset>

</div>

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

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>

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

공유하기