Day63 2024.08.21.수 #코딩일기

 

 

 

**Spring에서 정말 필수적인 것

 

 - 어제 채팅 이어서 (socket)

 

Spring Starter Project	oBootMybatis01
package	com.oracle.oBootMybatis01.configuration
class	WebSocketConfig

package com.oracle.oBootMybatis01.configuration;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.config.annotation.EnableWebSocket;
import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;

import com.oracle.oBootMybatis01.handler.SocketHandler;

@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {
	
	//소켓에서 서버역할 하는!!
	// socket 서버 -> controller랑 비슷한 역할을 하는!! (controller는 아니다!!!)
	@Autowired
	SocketHandler socketHandler;
	
	@Override
	public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
		// 누군가 URL '/chating' 치면 --> socketHandler 발동
		//socket 세상에서는 얘가  controller 같은 역할을 해준다.
		registry.addHandler(socketHandler, "/chating");

	}

}

Console

 

 

 

 

 

Spring Starter Project	oBootMybatis01
package	com.oracle.oBootMybatis01.handler
class	SocketHandler

package com.oracle.oBootMybatis01.handler;

import java.util.HashMap;
import java.util.Iterator;

import org.json.simple.JSONArray;
import org.json.simple.JSONObject;
import org.json.simple.parser.JSONParser;
import org.json.simple.parser.ParseException;
import org.springframework.stereotype.Component;
import org.springframework.web.socket.CloseStatus;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.TextWebSocketHandler;

//bean 으로 설정되어야 해서
@Component
public class SocketHandler extends TextWebSocketHandler {

	// 웹소켓 세션을 담아둘 맵 (연결될 session을 객체로 id별로 저장해두기 위한 것)
	HashMap<String, WebSocketSession> sessionMap = new HashMap<>();
	
	// 웹소켓 세션 ID과 Member을 담아둘 맵
	HashMap<String, String> sessionUserMap = new HashMap<>();
	
	// 웹소켓 세션 ID과 Member을 담아둘 JSONObject
	JSONObject jsonUser = null;

	
	// 2. handleTextMessage 메소드는 메시지를 수신하면 실행
	//메세지 보낼 때
	@Override
	protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
		//super.handleTextMessage(session, message);
		
		// Message 수신
		String msg = message.getPayload();
		System.out.println("SocketHandler handleTextMessage msg->"+msg);
		
		//string으로 받은 것을 json 형태로 파싱해주는 것!! (@RequestBody와 비슷한 역할)
		JSONObject jsonObj = jsonToObjectParser(msg);
		// type을 Get하여 분기 
		String msgType = (String) jsonObj.get("type");
		System.out.println("SocketHandler handleTextMessage  msgType->"+msgType);

		
		switch (msgType) {
		     // 전체 Message 
	        case "message":  
	        	jsonUser =  new JSONObject(sessionUserMap);
	            System.out.printf( "JSONUser: %s", jsonUser);
	    		// 전송대상을 기준으로  분기 
	    		String yourName = (String) jsonObj.get("yourName");
	    		System.out.println("SocketHandler handleTextMessage  yourName->"+yourName);
	    		
	    		// 전체
	    		if (yourName.equals("ALL")) {
			     	for(String key : sessionMap.keySet()) {
							WebSocketSession wss = sessionMap.get(key);
							try {
								System.out.println("message key->"+key);
								System.out.println("message wss->"+wss);
								wss.sendMessage(new TextMessage(jsonObj.toJSONString()));
							}catch(Exception e) {
								e.printStackTrace();
							}
					}
	    			
	    		} else {  
	    			// 개인 전송 대상자(yourName은 개인 sessionID)
	    			
	    			// 상대방
		    		System.out.println("개인 전송 대상자 상대방 sessionID-->"+yourName);
					WebSocketSession wss1 = sessionMap.get(yourName);
					try {
						wss1.sendMessage(new TextMessage(jsonObj.toJSONString()));
					}catch(Exception e) {
						e.printStackTrace();
					}
					
		    		// 나에게도 보내줘
		    		String meName = (String) jsonObj.get("sessionId");
		    		WebSocketSession wss2 = sessionMap.get(meName);
		    		System.out.println("개인 전송 대상자 나-->"+meName);
					try {
						wss2.sendMessage(new TextMessage(jsonObj.toJSONString()));
					} catch(Exception e) {
						e.printStackTrace();
					}
	    			
	    		}
	            break;	
		
	        // sessionUserMap에 User등록 
	        case "userSave":
	            // sessionUserMap에 sessionId와  userName 등록  
	     	    String sessionId   = (String) jsonObj.get("sessionId");
	     	    String userName    = (String) jsonObj.get("userName");
	     	    String saveStatus  = (String) jsonObj.get("saveStatus");
	     	    
	     	    //    신규   등록 
	     	    if (saveStatus.equals("Create")) {
		     	    sessionUserMap.put(sessionId, userName);
		     	    System.out.println("=================================================");
		     	    System.out.println("== sessionUserMap 저장내용 조회하여 arrayJsonUser에 ==");
		     	    System.out.println("==  각각의 JSONObject jsonUser로  변환            ==");
		     	    System.out.println("== 1. type : userSave                          ==");
		     	    System.out.println("== 2. sessionId : sessionUserMap.sessionId     ==");
		     	    System.out.println("== 3. userName  : sessionUserMap.userName      ==");
		     	    System.out.println("=================================================");
	     	    	
	     	    } else {   
	     	    	// Delete
		        	System.out.println("handleTextMessage userDelete start.. ");
		        	System.out.println("handleTextMessage userDelete session.getId()->"+session.getId());
		     		// 웹소켓 종료
		     		sessionMap.remove(session.getId());
		     		// sessionUserMap 종료
		     		sessionUserMap.remove(session.getId());
		           // break;
	     	    }
	     	    
	     	    JSONArray arrayJsonUser = new JSONArray();
	     	    System.out.println("== 1. type : userSave                         ==");
	     	    Iterator<String> mapIter = sessionUserMap.keySet().iterator();
	     	    System.out.println("== 2. sessionId : sessionUserMap.sessionId    ==");
	     	    System.out.println("== 3. userName  : sessionUserMap.userName     ==");
		     	while(mapIter.hasNext()){
	     	       String key = mapIter.next();
	     	       //우선 sessionMap에 넣어두고, 후에 json으로 보내준다.
	     	       String value = sessionUserMap.get( key );
	     	       System.out.println("Key : Value -->"+key+" : "+value);
		     	   jsonUser =  new JSONObject();
		     	   jsonUser.put("type", "userSave");
		     	   jsonUser.put("sessionId",key);
		     	   jsonUser.put("userName",value);
		     	   arrayJsonUser.add(jsonUser);
	     	    }
	     	    System.out.println("====== session을 Get하여 User 내용 전송 ========");
	            System.out.printf( "arrayJsonUser: %s", arrayJsonUser);
	           
	            // 전체에 User등록을 하게 함
		     	for(String key : sessionMap.keySet()) {
						WebSocketSession wss = sessionMap.get(key);
						try {
							// 2사람 이상일 때 combobox를 만들어주기 위해서
							wss.sendMessage(new TextMessage(arrayJsonUser.toJSONString()));
						}catch(Exception e) {
							e.printStackTrace();
						}
				}
		        break;
		        
	        case "userDelete":  
	        	System.out.println("handleTextMessage userDelete start.. ");
	        	System.out.println("handleTextMessage userDelete session.getId()->"+session.getId());
	     		// 웹소켓 종료
	     		sessionMap.remove(session.getId());
	     		// sessionUserMap 종료
	     		sessionUserMap.remove(session.getId());
	            break;
		}
		
	}

	//  @SuppressWarning
	//  이건 컴파일러가 일반적으로 경고하는 내용 중	"이건 하지마" 하고 제외시킬 때 쓰임
	//	따라서 어떤 경고를 제외시킬지 옵션
	//	1. all : 모든 경고를 억제
	//	2. cast : 캐스트 연산자 관련 경고 억제
	//	3. dep-ann : 사용하지 말아야 할 주석 관련 경고 억제
	//	4. deprecation : 사용하지 말아야 할 메소드 관련 경고 억제
	//	5. fallthrough : switch문에서의 break 누락 관련 경고 억제
	//	6. finally : 반환하지 않는 finally 블럭 관련 경고 억제
	//	7. null : null 분석 관련 경고 억제
	//	8. rawtypes : 제네릭을 사용하는 클래스 매개 변수가 불특정일 때의 경고 억제
	//	9. unchecked : 검증되지 않은 연산자 관련 경고 억제
	//	10. unused : 사용하지 않는 코드 관련 경고 억제

	@SuppressWarnings("unchecked")
	// 1. 웹소켓 연결이 되면 동작
	//연결할 때
	@Override
	public void afterConnectionEstablished(WebSocketSession session) throws Exception {
		// TODO Auto-generated method stub
		System.out.println("SocketHandler afterConnectionEstablished start...");
		// 웹소켓  연결이 되면 동작
		super.afterConnectionEstablished(session);
		// 연결 소겟을 MAP에 등록 
		sessionMap.put(session.getId(), session);

		JSONObject jsonObject = new JSONObject();
		// 대상 : Client
		jsonObject.put("type", "getId");
		jsonObject.put("sessionId", session.getId());
		System.out.println("SocketHandler afterConnectionEstablished jsonObject.toJSONString()->"
		                    +jsonObject.toJSONString());
		
		//  session Server 등록 -->  Socket Server가 Client에게 전송 
		session.sendMessage(new TextMessage(jsonObject.toJSONString()));

	}
	
	// 3.웹소켓이 종료되면 동작
	//연결을 끊을 때 쓰는 method
	@Override
	public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
		System.out.println("SocketHandler afterConnectionClosed start...");
		// 웹소켓 종료
		sessionMap.remove(session.getId());
		super.afterConnectionClosed(session, status);

	}
	
	//내부적으로 사용되는 parsing 하는 method
	// handleTextMessage 메소드 에 JSON파일이 들어오면 파싱해주는 함수를 추가
	private static JSONObject jsonToObjectParser(String jsonStr) {
		JSONParser parser = new JSONParser();
		JSONObject jsonObj = null;
		try {
			jsonObj = (JSONObject) parser.parse(jsonStr);
		} catch (ParseException e) {
			e.printStackTrace();
		}
		return jsonObj;
	}	

}

Console

 

 

 

 

 

 

Spring Starter Project	oBootMybatis01
folder	src/main/webapp/WEB-INF/views
JSP	chatView.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script  src="http://code.jquery.com/jquery-latest.min.js"></script>
	<style>
		*{
			margin:0;
			padding:0;
		}
		.container{
			width: 500px;
			margin: 0 auto;
			padding: 25px
		}
		.container h1{
			text-align: left;
			padding: 5px 5px 5px 15px;
			color: #FFBB00;
			border-left: 3px solid #FFBB00;
			margin-bottom: 20px;
		}
		.chating{
			background-color: #000;
			width: 500px;
			height: 500px;
			overflow: auto;
		}
		.chating .me{
			color: #F6F6F6;
			text-align: right;
		}
		.chating .others{
			color: #FFE400;
			text-align: left;
		}
		input{
			width: 330px;
			height: 25px;
		}
		#yourMsg{
			display: none;
		}
		#yourNameDel{
			display: none;
		}
	</style>
</head>
<script type="text/javascript">
    // web Socket
	var ws;

	function wsOpen(){
		console.log("wsOpen  location.host: " + location.host);
        var wsUri  = "ws://" + location.host + "${pageContext.request.contextPath}/chating";
        // WebSocket 프로토콜을 사용하여 통신하기 위해서는 WebSocket객체를 생성. 
        // 객체는 자동으로 서버로의 연결
 		ws = new WebSocket(wsUri);
		wsEvt();
 		
	}

    function  wsEvt() {
		console.log("wsEvt  start... ");
        alert("wsEvt  start...")    
        
        //소켓이 열리면 동작
		ws.onopen = function(data){
			console.log("wsEvt  소켓이 열리면 초기화 세팅하기..");
		}	
		//메시지를 받으면 동작
       ws.onmessage = function(data) {
			var msg = data.data;
			var memberSave = false;
			alert("ws.onmessage->"+msg)
			if(msg != null && msg.trim() != ''){
				memberSave = false;
				// JSON 오브젝트를 자바스크립트 오브젝트로 변환
			    var jsonMsg = JSON.parse(msg);
				// msg가 배열이고, 2개이상의 Count이면 , member 등록 대상 
                if (Array.isArray(jsonMsg)) {
                	if (Object.keys(jsonMsg).length > 1) {
                    	memberSave = true;
                       	alert("JSONArray jsonMsg Count->"+ Object.keys(jsonMsg).length);
                	}
                }			
			}
			
			// 파싱한 객체의 type값을 확인하여 getId값이면 초기 설정된 값이므로 채팅창에 값을 입력하는게 아니라
			// 추가한 태그 sessionId에 값을 세팅
			if(jsonMsg.type == "getId"){
				alert("jsonMsg.type->getId");
				var sid = jsonMsg.sessionId != null ? jsonMsg.sessionId : "";
				if(sid != ''){
					$("#sessionId").val(sid); 
					// session User 등록 수행
					sendUser('Create');
				}
				
				
			}else if(jsonMsg.type == "message"){
				alert("jsonMsg.type->message");
				// type이 message인 경우엔 채팅이 발생한 경우.
                // 상대방과 자신을 구분하기 위해 여기서 sessionId값을 사용
                // 최초 이름을 입력하고 연결되었을때, 발급받은 sessionId값을 비교하여 같다면 자기 자신이 발신한
                // 메시지이므로 오른쪽으로 정렬하는 클래스를 처리하고 메시지를 출력.     
                // 비교하여 같지 않다면 타인이 발신한 메시지이므로 왼쪽으로 정렬하는 클래스를 처리하고 메시지를 출력
				if(jsonMsg.sessionId == $("#sessionId").val()){
					$("#chating").append("<p class='me'>나 :" + jsonMsg.msg + "</p>");	
				}else{
					$("#chating").append("<p class='others'>" + jsonMsg.userName + " :" + jsonMsg.msg + "</p>");
				}
				
			}
			
			// Session에 변동이 일어 날때 
			if(memberSave == true){
					alert("userSave");
					$('#member_sub').remove();
					//  memberSave = true 면  -->	User 등록/삭제 일경우
					// div로 감싸주면 재정의시 삭제(Refresh)후 다시 생성 
					//var str = " <div id='member_sub' class='member_sub'> ";
					var str = " ";
					str  += " <select name='member' id='member_sub' class='member_sub'> ";
					str  += " <option value='ALL'>전체 </option> "; 
					$(jsonMsg).each(
						function(){
							var str2 = "";
				            // User를 선택하여 message전송 가능토록 member에 등록 
				            alert("내 sessionId->"+ $("#sessionId").val())
				            alert("this.sessionId->"+ this.sessionId)
							if(this.sessionId == $("#sessionId").val()){
								alert("내꺼임"+ $("#sessionId").val())
							} else {  // 타인 session일 경우 추가 등록 
								str2 += " <option value='"+this.sessionId + "'> "+this.userName  + "</option> "; 
								str  += str2 ;
							}
						}
					);
					str += " </select>"
					str += " </div><p>"
					$('#member').append(str);	
					memberSave = false;
					
			}else{
					console.warn("unknown type!");
			}
		}
	   	document.addEventListener("keypress", function(e){
			if(e.keyCode == 13){ //enter press
				send();
			}
		});		
	}
     
    // User 등록  Message 전송       saveStatus --> Create / Delete
    function sendUser(saveStatus) {
		var userOption ={
				type       : "userSave",
				sessionId  : $("#sessionId").val(),
				userName   : $("#userName").val(),
				saveStatus : saveStatus
			}
		alert("sendUser Start..")  	
		// 자바스크립트의 값을 JSON 문자열로 변환
		// Client --> Server (ws.send로 보내준다.)
		ws.send(JSON.stringify(userOption));

		//자기자신 창을 닫습니다.
		if(saveStatus == "Delete") {
			alert("sendUser saveStatus-->"+saveStatus);
			//window.open('','_self').close(); 
			 window.open(location.href, "_self", "");
			 window.close()
		}
}
    
    

    function chatName(){
    	alert("chatName Start..");
		var userName = $("#userName").val();
		console.log("chatName  userName: " + userName);
		if(userName == null || userName.trim() == ""){
			alert("사용자 이름을 입력해주세요.");
			$("#userName").focus();
		}else{
			wsOpen();
			$("#meName").append('나의이름:'+userName); 
			$("#yourName").hide();
			$("#yourMsg").show();
		//	$("#yourNameDel").show();
		}   	
    	
    }

	// 전체 Message 전송 
	function send() {
		var option ={
			type: "message",
			sessionId : $("#sessionId").val(),
			userName : $("#userName").val(),
			yourName : $("#member_sub").val(),
			msg : $("#sendMsg").val()
		}
		// 자바스크립트의 값을 JSON 문자열로 변환
		ws.send(JSON.stringify(option));
		$('#sendMsg').val("");
	}   
    

</script>
<body>
	<div id="container" class="container">
		<h1>채팅</h1>
		<input type="hidden" id="sessionId" value="">
		<div id="meName"></div>
		<div id="chating" class="chating">
		</div>
		<div id="member" class="member">
		</div>
		
		<div id="yourName">
			<table class="inputTable">
				<tr>
					<th>사용자명</th>
					<th><input type="text" name="userName" id="userName"></th>
					<th><button onclick="chatName()" id="startBtn">이름 등록</button></th>
				</tr>
			</table>
		</div>
		<div id="yourNameDel">
			<table class="deleteTable">
				<tr>
					<th>사용자명 삭제</th>
					<!-- <th><input type="text" name="userName" id="userName"></th> -->
					<th><button onclick="sendUser('Delete')" id="startBtn">이름 삭제</button></th>
				</tr>
			</table>
		</div>
		<div id="yourMsg">
			<table class="inputTable">
				<tr>
					<th>메시지</th>
					<th><input id="sendMsg" placeholder="보내실 메시지를 입력하세요."></th>
					<th><button onclick="send()" id="sendBtn">보내기</button></th>
				</tr>
			</table>
		</div>
	</div>
</body>
</html>

Console

 

 

 

---

Test1

객체지향프로그래밍

객체지향 프로그래밍(시험2) 선생님답안.txt

0.00MB

송혜선 _객체지향 프로그래밍.txt

0.01MB

 

 

Test2

Spring

Spring 프레임워크 선생님 답안.txt

0.01MB

송혜선 _SPRING.txt

0.00MB

 

 

 

---

채팅 socket 흐름

 

<1> WebSocketConfig

1. @Configuration 환경파일 설정 -> 실행시키면 가장 먼저 실행된다.

     SocketHandler는 new SocketHandler로 연결시키지 않고 Spring은 @Autowired로 다 해준다.

2. Socket Handler는 chating이라는 단어가 있으면, SocketHander가 서버로 작동한다는 의미

 

<2> SocketHandler

3. @Component가 있어야, 인식한다.

    여기서 TextWebSocketHandler를