본문 바로가기
Spring

2024_08_20_화~08_21_수

by 알케니브 2024. 8. 20.

오늘의 코딩순서

(폴더: oBootMybatis01)

(0820 일지)

9. Transaction Test ==> Transaction의 원자성

1. transaction Test 실패 케이스

  • EmpController.class + EmpService.interface + EmpServiceImpl.class
    + Member1Dao.Interface + Member1DaoImpl.class + member1.xml

2. transaction Test 성공 케이스

  • EmpServiceImpl.class + Member1Dao.Interface + Member1DaoImpl.class

(0821 일지)

10. Chating

  • WebSocketConfigure.class + SocketHandler.class + SocketController.class + chatView.jsp

오늘의 코딩 포인트

(0820 일지)

9. Transaction Test

1. transaction Test 실패 케이스

=> transaction 처리를 하지 않았기 때문에 오류가 생김

원래 transaction 처리를 하면 오류 발생시 한 개의 데이터에만 오류가 발생해도 DB입력이 안되어야 하지만,

transaction 처리를 하지 않아 오류가 생기면 어떤 데이터는 입력이 되고 어떤 데이터는 입력이 안됨

  • EmpController.class 
package com.oracle.oBootMybatis01.controller;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.springframework.mail.javamail.JavaMailSender;
import org.springframework.mail.javamail.MimeMessageHelper;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.validation.BindingResult;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import com.oracle.oBootMybatis01.model.Dept;
import com.oracle.oBootMybatis01.model.DeptVO;
import com.oracle.oBootMybatis01.model.Emp;
import com.oracle.oBootMybatis01.model.EmpDept;
import com.oracle.oBootMybatis01.model.Member1;
import com.oracle.oBootMybatis01.service.EmpService;
import com.oracle.oBootMybatis01.service.Paging;

import jakarta.mail.internet.MimeMessage;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.validation.Valid;
import lombok.RequiredArgsConstructor;
import lombok.extern.slf4j.Slf4j;

@Controller
@RequiredArgsConstructor
@Slf4j
public class EmpController {
	
	private final EmpService es;
	private final JavaMailSender mailSender;

  //---------------------------------- 
	// 9. Transaction Test
	@ResponseBody
	@RequestMapping(value = "transactionInsertUpdate")
	public String transactionInsertUpdate(Emp emp, Model model) {
		System.out.println("EmpController transactionInsertUpdate Start...");
		
		// member Insert 성공과 실패
		int returnMember = es.transactionInsertUpdate();
		System.out.println("EmpController transactionInsertUpdate returnMember->"+returnMember);
		
		String returnMemberString = String.valueOf(returnMember);
		
		return returnMemberString;
	
	}
	
}
  • EmpService.interface
package com.oracle.oBootMybatis01.service;

import java.util.HashMap;
import java.util.List;

import com.oracle.oBootMybatis01.model.Dept;
import com.oracle.oBootMybatis01.model.DeptVO;
import com.oracle.oBootMybatis01.model.Emp;
import com.oracle.oBootMybatis01.model.EmpDept;
import com.oracle.oBootMybatis01.model.Member1;

public interface EmpService {

	// 9. Transaction Test
	int 			transactionInsertUpdate();
}
  • EmpServiceImpl.class
package com.oracle.oBootMybatis01.service;

import java.util.HashMap;
import java.util.List;

import org.springframework.stereotype.Service;

import com.oracle.oBootMybatis01.dao.DeptDao;
import com.oracle.oBootMybatis01.dao.EmpDao;
import com.oracle.oBootMybatis01.dao.Member1Dao;
import com.oracle.oBootMybatis01.model.Dept;
import com.oracle.oBootMybatis01.model.DeptVO;
import com.oracle.oBootMybatis01.model.Emp;
import com.oracle.oBootMybatis01.model.EmpDept;
import com.oracle.oBootMybatis01.model.Member1;

import lombok.RequiredArgsConstructor;

@Service
@RequiredArgsConstructor
public class EmpServiceImpl implements EmpService {
	
	private final EmpDao ed;
	private final DeptDao dd;
	private final Member1Dao md;
		// 서로 다른 Interface(DAO)를 받은 것이기 때문에 두 개 이상 가능 

	// 9. Transaction Test
	@Override
	public int transactionInsertUpdate() {
		System.out.println("EmpServiceImpl transactionInsertUpdate Start...");
		
		return md.transactionInsertUpdate();	//transaction X
	}
	

}
  • Member1Dao.Interface
package com.oracle.oBootMybatis01.dao;

import java.util.List;

import com.oracle.oBootMybatis01.model.Member1;

public interface Member1Dao {

	// 9. Transaction Test
	int 			transactionInsertUpdate();
}
  • Member1DaoImpl.class
package com.oracle.oBootMybatis01.dao;

import java.util.List;

import org.apache.ibatis.session.SqlSession;
import org.springframework.stereotype.Repository;

import com.oracle.oBootMybatis01.model.Member1;

import lombok.RequiredArgsConstructor;

@Repository
@RequiredArgsConstructor
public class Member1DaoImpl  implements Member1Dao {
	//Mybatis 연동
	private final SqlSession session;

	// 9. Transaction Test
	@Override
	public int transactionInsertUpdate() {
		int result = 0;
		System.out.println("Member1DaoImpl transactionInsertUpdate Start...");
		
		Member1 member1 = new Member1();
		Member1 member2 = new Member1();
		
		try {
			// 두 개의 transaction Test 성공과 실패
			// 결론 ==> SqlSession은 하나 실행할 때마다 자동으로 Commit됨
			member1.setId("1005");
			member1.setPassword("2345");
			member1.setName("강유6");
			
			result = session.insert("insertMember1", member1);
			System.out.println("Member1DaoImpl transactionInsertUpdate member1 result->"+result);
			
            member2.setId("1006");
			member2.setPassword("3456");
			member2.setName("이순신7");
			
			result = session.insert("insertMember1", member2);
			System.out.println("Member1DaoImpl transactionInsertUpdate member2 result->"+result);
            
		} catch (Exception e) {
			System.out.println("Member1DaoImpl transactionInsertUpdate Exception->"+e.getMessage());
			result = -1;
		}
		
		return result;
	}

}
  • member1.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" 
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="com.oracle.oBootMybatis01.Member1Mapper">
	
	<insert id="insertMember1" parameterType="Member1">
		INSERT into Member(id, password, name)
		VALUES ( #{id},
				 #{password},
				 #{name , jdbcType=VARCHAR}
				)	
	</insert>

</mapper>

 

 

==> 값이 하나밖에 안들어감

 

 

 

 

 

 

2. transaction Test 성공 케이스

=> transaction 처리를 했기 때문에 하나의 데이터에 오류가 나도 다 입력이 안됨

  • EmpServiceImpl.class
package com.oracle.oBootMybatis01.service;

import java.util.HashMap;
import java.util.List;

import org.springframework.stereotype.Service;

import com.oracle.oBootMybatis01.dao.DeptDao;
import com.oracle.oBootMybatis01.dao.EmpDao;
import com.oracle.oBootMybatis01.dao.Member1Dao;
import com.oracle.oBootMybatis01.model.Dept;
import com.oracle.oBootMybatis01.model.DeptVO;
import com.oracle.oBootMybatis01.model.Emp;
import com.oracle.oBootMybatis01.model.EmpDept;
import com.oracle.oBootMybatis01.model.Member1;

import lombok.RequiredArgsConstructor;

@Service
@RequiredArgsConstructor
public class EmpServiceImpl implements EmpService {
	
	private final EmpDao ed;
	private final DeptDao dd;
	private final Member1Dao md;
		// 서로 다른 Interface(DAO)를 받은 것이기 때문에 두 개 이상 가능 

	// 9. Transaction Test
	@Override
	public int transactionInsertUpdate() {
		System.out.println("EmpServiceImpl transactionInsertUpdate Start...");
		
		// return md.transactionInsertUpdate();	//transaction X
		return md.transactionInsertUpdate3();	//transaction OK
	}
	

}
  • Member1Dao.Interface
package com.oracle.oBootMybatis01.dao;

import java.util.List;

import com.oracle.oBootMybatis01.model.Member1;

public interface Member1Dao {

	// 9. Transaction Test
	int 			transactionInsertUpdate();	// transaction False
	int 			transactionInsertUpdate3();	// transaction True
}
  • Member1DaoImpl.class
package com.oracle.oBootMybatis01.dao;

import java.util.List;

import org.apache.ibatis.session.SqlSession;
import org.springframework.stereotype.Repository;
import org.springframework.transaction.PlatformTransactionManager;
import org.springframework.transaction.TransactionStatus;
import org.springframework.transaction.support.DefaultTransactionDefinition;

import com.oracle.oBootMybatis01.model.Member1;

import jakarta.transaction.Transactional;
import lombok.RequiredArgsConstructor;

@Repository
@RequiredArgsConstructor
public class Member1DaoImpl  implements Member1Dao {
	
	private final PlatformTransactionManager transactionManager;
	
	//Mybatis 연동
	private final SqlSession session;

	// transaction True
	@Override
	public int transactionInsertUpdate3() {
		int result = 0;
		System.out.println("Member1DaoImpl transactionInsertUpdate3 Start...");
		
		Member1 member1 = new Member1();
		Member1 member2 = new Member1();
		
		TransactionStatus txStatus = 
						transactionManager.getTransaction(new DefaultTransactionDefinition());
		
		try {
			// transaction Test 성공 케이스
			// 결론 ==> SqlSession은 하나 실행할 때마다 자동으로 Commit됨
			// Transaction관리는 transactionManager의 getTransaction을가지고 상태따라 설정
			member1.setId("1007");
			member1.setPassword("2345");
			member1.setName("강유6");
			
			result = session.insert("insertMember1", member1);
			System.out.println("Member1DaoImpl transactionInsertUpdate3 member1 result->"+result);
			
			// member1과 member2의 Id를 같게 설정하면 오류가 남
			member2.setId("1008");
			member2.setPassword("3457");
			member2.setName("이순신7");
			
			result = session.insert("insertMember1", member2);
			System.out.println("Member1DaoImpl transactionInsertUpdate3 member2 result->"+result);
			transactionManager.commit(txStatus);
			
		} catch (Exception e) {
			transactionManager.rollback(txStatus);
			System.out.println("Member1DaoImpl transactionInsertUpdate3 Exception->"+e.getMessage());
			result = -1;
		}
		
		return result;
	}

}

 

(0821 일지)

10. Chating

  • WebSocketConfig.class
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 {

	@Autowired
	SocketHandler socketHandler;
	@Override 
											// registry소켓이 발생하면 등록될 장소
	public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
		// 누군가 URL / chating --> socketHandler 발동 -> 컨트롤러가 아니지만 소켓세계에서는 like 컨트롤러
		registry.addHandler(socketHandler, "/chating");
		
	}

}

 

  • SocketHandler.class
    Tip)
    • @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 : 사용하지 않는 코드 관련 경고 억제
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.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;

@Component
public class SocketHandler extends TextWebSocketHandler {
	
	// 웹소켓 세션을 담아둘 맵
	HashMap<String, WebSocketSession> sessionMap = new HashMap<>();
	
	// 웹소켓 세션 ID과 Member을 담아둘 맵
	HashMap<String, String> sessionUserMap = new HashMap<>();
	
	// 웹소켓 세션 ID과 Member을 담아둘 JSONObject
	JSONObject jsonUser = null;
	

	// 2. handleTextMessage 메소드는 메시지를 수신하면 실행
	@Override
		// handleTextMessage 자동완성하기
	protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
		// super.handleTextMessage(session, message);
		
		// Message 수신		//payload: 본문
		String msg = message.getPayload();
		System.out.println("SocketHandler handleTextMessage msg->"+msg);
		
		JSONObject jsonObj = jsonToObjectParser(msg);
		
		// type를 Get하여 분기 
		String msgType = (String) jsonObj.get("type");
		System.out.println("SocketHandler handleTextMessage msgType->"+msgType);
		
		
		switch (msgType) {
			// 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("handleTextMKessage userDelete Start...");
					System.out.println("handleTextMKessage 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();
					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을 더하여 User 내용 전송 =====");
				System.out.printf("arrayJsonUser: %s", arrayJsonUser);
				
				//전체에 User 등록을 하게 함
				for (String key : sessionMap.keySet()) {
						WebSocketSession wss = sessionMap.get(key);
						try {
							wss.sendMessage(new TextMessage(arrayJsonUser.toJSONString()));
						} catch (Exception e) {
							e.printStackTrace();
						}
				}
				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
		// afterConnectionEstablished 자동완성하기
	public void afterConnectionEstablished(WebSocketSession session) throws Exception {
		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. 웹소켓이 종료되면 동작
	@Override
		// afterConnectionClosed 자동완성하기
	public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
		System.out.println("SocketHandler afterConnectionClosed Start...");

		// 웹소켓 종료
		sessionMap.remove(session.getId());
		super.afterConnectionClosed(session, status);

	}
	
	// handleTextMessage 메소드에 JSON파일이 들어오면 파싱해주는 함수를 추가
	private static JSONObject jsonToObjectParser(String jsonStr) {
		JSONParser parser = new JSONParser();
		JSONObject jsonObj = null;
		
		try {
			jsonObj = (JSONObject) parser.parse(jsonStr);
			
		} catch (Exception e) {
			System.out.println("SocketHandler jsonToObjectParser Exception->"+e.getMessage());
		}
		return jsonObj;
	}
	
}

 

  • SocketController.class
package com.oracle.oBootMybatis01.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;

import lombok.extern.slf4j.Slf4j;

@Controller
@Slf4j
public class SocketController {
	
	@RequestMapping("/chat")
	public ModelAndView chat() {
		// ModelAndView: model과 view객체가 다 담겨있음
		System.out.println("SocketController chat Start...");
		
		ModelAndView mv = new ModelAndView();
		mv.setViewName("chatView");
		
		return mv;
	}

}
  • 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(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>

 

1. 창 하나를 열어 아이디를 입력하여 서버연결과 컨트롤러 실행을 하고나면, 새 창을 하나 더 열어 아이디 입력하기

 

2. 메시지 보내기

질문목록

 

수업교재

 

 

오늘의 숙제

'Spring' 카테고리의 다른 글

2024_08_21_수_SPRING 시험(클라우드 서버 백엔드 개발)  (0) 2024.08.21
2024_08_19_월~08_20_화  (0) 2024.08.19
2024_08_14_수  (0) 2024.08.14
2024_08_13_화  (0) 2024.08.13
2024_08_12_월  (0) 2024.08.12

관련글

티스토리툴바