후다다닥
371
2017-11-22 20:38:02
0
2105

스프링 웹소켓(sockJS)로 1:1채팅방을 구현하려 하는데 잘안됩니다 도와주세요


1.javascript 부분

var sock = new SockJS("/echo");//echoHandler 호출해서 sock 변수에 저장 ,사용자끼리 채팅 가능하게 구현.
sock.onmessage = onMessage;
sock.onclose = onClose;

$(function(){
	$("#sendBtn").click(function(){
		console.log('send message...');
		sendMessage();
	});
});

function sendMessage(){
	
	sock.send($("#message").val());//text 인풋의 값을 send 함수로 보낸다.
}

function onMessage(evt){ //전송 버튼 누를시에 호출. evt는  채팅방에 저장되있는 상대방의 아이디와 텍스트를 저장해놓는다. handleTextMessage sess.sendMessage 호출됨.
						 //메세지 처리 방식.
	var data = evt.data;
	var sessionid = null;
	var message = null;
	
	
	var strArray = data.split('|');
	
	for(var i=0; i<strArray.length; i++){
		console.log('str['+i+']: ' + strArray[i]);
	}
	
	var currentuser_session =$('#sessionuserid').val();
	
	console.log('current session id : ' + currentuser_session);
	
	sessionid = strArray[0];
	message = strArray[1];
	
	if(sessionid == currentuser_session){
		
		var printHTML = "<div class='well'>";
		printHTML += "<div class = 'alert alert-info'>";
		printHTML += "<strong>["+sessionid+"] -> "  + message + "</strong>";
		printHTML += "</div>";
		printHTML += "</div>";
		
		$('#chatdata').append(printHTML);
	}
	else{
		var printHTML = "<div class='well'>";
		printHTML += "<div class='alert alert-warning'>";
		printHTML += "<strong>["+sessionid+"] -> " +message+"</strong>";
		printHTML += "</div>";
		printHTML += "</div>";
		$("#chatdata").append(printHTML);
	}
	console.log('chatting data : ' + data);
}
 
 
$(function(){
	$("#out").click(function(){
		console.log('exit room...');
		exitRoom();
	});
});

function exitRoom(){
	
	sock.onclose();//text 인풋의 값을 send 함수로 보낸다.
}

function onClose(evt){//아직 구현 안함.
	$('#data').append("연결 끊김");

}


2.컨트롤러 부분


@Autowired
	private SessionHandler s_handler;
	
	@RequestMapping(value = "/chatting",method=RequestMethod.POST)
	public ModelAndView chat(ModelAndView mv,@RequestParam String s_userid){
		
		mv.setViewName("chat/chattingview");
		UserDetail user = (UserDetail)SecurityContextHolder.getContext().getAuthentication().getPrincipal();
		
		mv.addObject("userid",user.getUsername());
		return mv;
	}
	
	@RequestMapping(value = "/loginuserlist",method=RequestMethod.GET)
	public ModelAndView loginuserlist(ModelAndView mv){
		
		mv.setViewName("chat/userchoiceview");
		
		List<SessionInformation> result = s_handler.getAllSessions();
		String [] userList = new String[result.size()];
		
		for(int i=0; i<result.size();i++){
		UserDetail user = (UserDetail) result.get(i).getPrincipal();
		userList[i]=user.getUsername();
		}
		
		
		mv.addObject("userList", userList);
		return mv;
	}


3.jsp (유저 선택하는 화면)


<body>
<h1>사용자를 선택해 주세요</h1>

<c:url value="/chatting" var="chattingPage"></c:url>
<form action="${chattingPage }" method="post">
<input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}" />
<c:forEach items="${userList }" var="list">
<input type="radio" name="s_userid" id="s_userid" value="${list }">${list }<br/>
</c:forEach>

<input type="submit" value="채팅하기">

</form>

</body>


4.jsp(채팅 화면 보여주는 화면).



	<h1>Chatting Page (id: ${userid})</h1>
	<div>
		<input type="button" id="chattinglistbtn" value="채팅 참여자 리스트">
	</div>
	<input type="hidden" id="sessionuserid" value="${userid }">
    <input type="text" id="message"/>
    <input type="button" id="sendBtn" value="전송"/>
    <div id="chatdata"></div>
    <br/>
    <input type="button" id="out" value="채팅방 나가기"/>


5. echo 핸들러



private List<WebSocketSession> sessionList = new ArrayList<WebSocketSession>();

	@Override
	public void afterConnectionEstablished(WebSocketSession session) throws Exception {
		// TODO Auto-generated method stub
		super.afterConnectionEstablished(session);
		sessionList.add(session);
		System.out.println("채팅방 입장자 : " + session.getPrincipal().getName());

	}
	
	@Override
	public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
		// TODO Auto-generated method stub
		super.afterConnectionClosed(session, status);
		sessionList.remove(session);
		
			}

	@Override
	public void handleMessage(WebSocketSession session, WebSocketMessage<?> message) throws Exception {
		// TODO Auto-generated method stub
		super.handleMessage(session, message);
	}

	@Override
	protected void handlePongMessage(WebSocketSession session, PongMessage message) throws Exception {
		// TODO Auto-generated method stub
		super.handlePongMessage(session, message);
	}

	@Override
	protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
		// TODO Auto-generated method stub
		super.handleTextMessage(session, message);
		for(WebSocketSession sess : sessionList){
			
			sess.sendMessage(new TextMessage(session.getPrincipal().getName()+"|"+message.getPayload()));
		}
		
	}

	@Override
	public void handleTransportError(WebSocketSession session, Throwable exception) throws Exception {
		// TODO Auto-generated method stub
		super.handleTransportError(session, exception);
	}

	@Override
	public boolean supportsPartialMessages() {
		// TODO Auto-generated method stub
		return super.supportsPartialMessages();
	}


현재 다수의 사용자가 들어와서 채팅하는 형태로는 구현되어 있는 상태입니다.

근데 제가 구현하고 싶은 부분은 다음까페에서 로그인한 사용자 목록이 있으면 특정 사용자를 클릭해서 채팅을 1:1로 하는 방식으로 하고 싶은데 지식이 짧다보니 어떻게 해야할지 감이 안잡혀서 이렇게 질문을 드립니다. 먼저 전체 소스는 시큐리티를 적용한 코드이고 코드 3번에서 보시다싶이 특정 사용자를 선택해서 컨트롤러에게 넘겨주는 부분이 존재하고 1번 자바스크립트와 4번 jsp 파일은 한곳에 있어서 5번 echo핸들러에 의해 sockJS를 생성하고 채팅을 가능하게 해줍니다. 정리 하자면 제가 3번 소스코드를 활용하여 특정 사용자를 선택해서 채팅하기 버튼을 클릭할 시에 그 사람과의 1:1 채팅과 선택당한 (물론 로그인한 사람들만 선택목록에 띄워주는 형태로 구현했습니다) 사람은 그 1:1채팅 제안에 대해 수락 및 거절을 하여 1:1형태로 채팅방이 만들어져 채팅이 이루어지는 형태로 만들고 싶은데 어떻게하면 좋을까요?

0
  • 답변 0

  • 로그인을 하시면 답변을 등록할 수 있습니다.