Ajax 삭제 정답
📂 views
- listEmpAjaxForm2.jsp
remove -> delete Tag, ename은 쓰지 않지만 여러개를 쓸 수 있다는 예시
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="header.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
function getListDept() {
var str = "";
var str2 = "";
console.log("getListDept Run");
alert("getListDept Run...");
$.ajax(
{
url:"/sendVO3",
dataType:'json',
success:function(data){
var jsonStr = JSON.stringify(data);
alert("jsonStr->"+jsonStr);
$('#dept_list_str').append(jsonStr);
str += "<select name = 'dept'>"
$(data).each(
function(){
str2 = "<option value='"+this.deptno+"'> "+this.dname+"</option>";
str += str2;
}
)
str += "</select></p>"
$('#dept_list_combobox').append(str);
}
}
);
}
function getDeptDelete(vIndex) {
var selEmpno = $("#empno"+vIndex).val();
var selEname = $("#ename"+vIndex).val()
alert("getDeptDelete selEmpno->"+selEmpno);
alert("getDeptDelete selEname->"+selEname);
// Server --> /empnoDelete(EmpRestController)
// service : deleteEmp
// Parameter --> empno : selEmpno , ename : selEname
// 성공 --> 해당 라인 삭제
$.ajax(
{
url:"/empnoDelete",
data:{empno : selEmpno, ename : selEname},
dataType:'text',
success:function(data){
alert("data->"+data);
if(data == '1'){
alert("삭제 성공");
$('#emp'+vIndex).remove(); // Delete Tag
location.replace("listEmpAjaxForm2");
}
else{
alert("삭제실패");
}
}
}
);
}
</script>
</head>
<body>
<h2>회원 정보</h2>
<table>
<tr><th>번호</th><th>사번</th><th>이름</th><th>업무</th><th>부서</th><th>근무지</th></tr>
<c:forEach var="emp" items="${listEmp}" varStatus="status">
<tr id="emp${status.index}"><td>emp${status.index}</td>
<td>
<input type="hidden" id="deptno${status.index}" value="${emp.deptno}">
<input type="text" id="empno${status.index}" value="${emp.empno }">${emp.empno }
</td>
<td>
<input type="text" id="ename${status.index}" value="${emp.ename }">${empt.ename }
</td>
<td>${emp.job }</td><td>${emp.deptno }
<input type="button" id="btn_idCheck2" value="사원Row Delete" onclick="getDeptDelete(${status.index})">
</td>
<%-- <td>${empDept.loc }</td> --%>
</tr>
</c:forEach>
</table>
RestController LISTVO3: <input type="button" id="btn_Dept3" value="부서명 LIST" onclick="getListDept()"><p>
Dept_list: <div id="dept_list_str"></div>
Dept_list3:
<div id="dept_list_combobox">
</div>
</body>
</html>📂 [com.oracle.oBootMybatis01.controller]
- EmpRestController.java
@RequestMapping("/empnoDelete")
public int empnoDelete(int empno) {
log.info("empnoDelete Start...");
int result = 0;
result = es.deleteEmp(empno);
return result;
}💬채팅
WebSocket
[com.oracle.oBootMybatis01.configuration]
- WebSocketConfig.java
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;
// 누군가 URL / chating --> socketHandler 발동
@Override
public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
registry.addHandler(socketHandler, "/chating");
}
}[com.oracle.oBootMybatis01.handler]
- SocketHandler.java
package com.oracle.oBootMybatis01.handler;
import java.util.HashMap;
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;
import lombok.extern.slf4j.Slf4j;
// @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 : 사용하지 않는 코드 관련 경고 억제
// Socket Server Program
@Slf4j
@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;
// 메소드는 메시지를 수신하면 실행
@Override
protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
// super.handleTextMessage(session, message);
// 메시지 발송
String msg = message.getPayload();
log.info("handleTextMessage msg->{}",msg);
JSONObject jsonObj = jsonToObjectParser(msg);
// type을 Get하여 분기
String msgType = (String) jsonObj.get("type");
log.info("msgType->{}",msgType);
switch(msgType) {
case "message":
jsonUser = new JSONObject(sessionUserMap);
log.info("JSONUser : {}", jsonUser);
// 전송대상을 기준으로 분기
String yourName = (String) jsonObj.get("yourName");
log.info("yourName->{}", yourName);
break;
case "userSave":
// sessionUserMap에 sessionId와 userName 등록
String sessionId = (String) jsonObj.get("sessionId");
String userName = (String) jsonObj.get("userName");
String saveStatus = (String) jsonObj.get("saveStatus");
log.info("========================================");
log.info("userSave sessionId->{}",sessionId);
log.info("userSave userName->{}",userName);
log.info("userSave saveStatus->{}",saveStatus);
log.info("========================================");
break;
case "userDelete":
log.info("userDelete Start...");
break;
}
}
// 웹소켓 연결이 되면 동작
@SuppressWarnings("unchecked")
@Override
public void afterConnectionEstablished(WebSocketSession session) throws Exception {
log.info("afterConnectionEstablished Start...");
// 웹소캣 연결이 되면 동작
super.afterConnectionEstablished(session);
// 연결 소캣을 map에 등록
sessionMap.put(session.getId(), session);
JSONObject jsonObj = new JSONObject();
// 대상 : Client
jsonObj.put("type", "getId");
jsonObj.put("sessionId", session.getId());
// Socket Server가 Client에게 전송
session.sendMessage(new TextMessage(jsonObj.toJSONString()));
}
// 웹소켓이 종료되면 동작
@Override
public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
log.info("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 (ParseException e) {
log.info("ParseException->{}",e.getMessage());
}
return jsonObj;
}
}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() {
log.info("chat Start...");
ModelAndView mv = new ModelAndView();
mv.setViewName("chatView");
return mv;
}
}[com.oracle.oBootMybatis01.controller]
- SocketController.java
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() {
log.info("chat Start...");
ModelAndView mv = new ModelAndView();
mv.setViewName("chatView");
return mv;
}
}📂 views
- 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");
}
}
}
// 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));
}
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();
}
}
</script>
<body>
<h1>chat View</h1>
<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="yourMsg">
<table class="inputTable">
<tr>
<th>보낼 메시지</th>
<th><input id="chatting" placeholder="보내실 메시지를 입력하세요."></th>
<th><button onclick="send()" id="sendBtn">보내기</button></th>
</tr>
</table>
</div>
</div>
</body>
</html>📂 static
- index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>회원관리</h1>
<a href="/writeFormEmp">회원 가입</a><p>
<a href="/listEmp">회원 목록(기본 CRUD)</a><p>
<a href="/listEmpDept">직원부서조회(Join/Mail)</a><p>
<a href="/writeDeptIn">PL/SQL(부서입력)</a><p>
<a href="/writeDeptCursor">PL/SQL(부서조회 Cursor)</a><p>
<a href="/interCeptorForm">interCeptor(가로채기)</a><p>
<a href="/upLoadFormStart">Upload(이미지 올리기)</a><p>
<h1>JPA 회원관리</h1>
<a href="/memberJpa/new">회원 가입</a><p>
<a href="/members">회원 목록(기본 CRUD)</a><p>
<h1>Ajax</h1>
<a href="/ajaxForm">Ajax1</a><p>
<a href="/chat">Chating</a><p>
</body>
</html>💻여기까지 화면출력
메세지 보내기
😡뭔지하나도 모르겠다..
😡망한 코드임 참고하지마
[com.oracle.oBootMybatis01.handler]
- SocketHandler.java
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;
import lombok.extern.slf4j.Slf4j;
// @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 : 사용하지 않는 코드 관련 경고 억제
// Socket Server Program
@SuppressWarnings("unchecked")
@Slf4j
@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;
// 메소드는 메시지를 수신하면 실행
@Override
protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
// super.handleTextMessage(session, message);
// 메시지 발송
String msg = message.getPayload();
log.info("handleTextMessage msg->{}",msg);
JSONObject jsonObj = jsonToObjectParser(msg);
// type을 Get하여 분기
String msgType = (String) jsonObj.get("type");
log.info("msgType->{}",msgType);
switch(msgType) {
case "message":
jsonUser = new JSONObject(sessionUserMap);
log.info("JSONUser : {}", jsonUser);
// 전송대상을 기준으로 분기
String yourName = (String) jsonObj.get("yourName");
log.info("yourName->{}", yourName);
// 전체
if(yourName.equals("ALL")) {
for(String key : sessionMap.keySet()) {
WebSocketSession wss = sessionMap.get(key);
try {
log.info("message key->{}",key);
log.info("message wss->{}",wss);
wss.sendMessage(new TextMessage(jsonObj.toJSONString()));
} catch (Exception e) {
log.info("message 전체 Exception->{}", e.getMessage());
}
}
} else { // 개인 전송 대상자(yourName은 개인 sessionId)
// 상대방
log.info("개인 전송 대상자 상대방 sessionId-->{}", yourName);
WebSocketSession wss1 = sessionMap.get(yourName);
try {
wss1.sendMessage(new TextMessage(jsonObj.toJSONString()));
} catch (Exception e) {
log.info("message 개인 Exception->{}", e.getMessage());
}
// 나에게도 보내줘
String meName = (String) jsonObj.get("sessionId");
WebSocketSession wss2 = sessionMap.get(meName);
log.info("개인 전송 대상자 나->{}", meName);
try {
wss2.sendMessage(new TextMessage(jsonObj.toJSONString()));
} catch (Exception e) {
log.info("message 개인 전송 대상자 Exception->{}", e.getMessage());
}
}
break;
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);
log.info("========================================");
} else { // Delete
// 웹소켓 종료
sessionMap.remove(session.getId());
// sessionUserMap 종료
sessionUserMap.remove(session.getId());
}
log.info("========================================");
log.info("userSave sessionId->{}",sessionId);
log.info("userSave userName->{}",userName);
log.info("userSave saveStatus->{}",saveStatus);
log.info("========================================");
JSONArray arrayJsonUSer = new JSONArray();
log.info("== 1. type : userSave ==");
Iterator<String> mapIter = sessionUserMap.keySet().iterator();
log.info("== 2. sessionId : sessionUserMap.sessionId ==");
log.info("== 3. userName : sessionUserMap.userName ==");
while (mapIter.hasNext()) {
String key = mapIter.next();
String value = sessionUserMap.get(key);
log.info("key : Value --> {} : {}", key, value);
jsonUser = new JSONObject();
jsonUser.put("type", "userSave");
jsonUser.put("sessionId", key);
jsonUser.put("userName", value);
arrayJsonUSer.add(jsonUser);
}
log.info("====== session을 Get하여 User 내용 전송 ======");
log.info("arrayJsonUser: {}", arrayJsonUSer);
// 전체에 User등록을 하게 함
for(String key : sessionMap.keySet()) {
WebSocketSession wss = sessionMap.get(key);
try {
wss.sendMessage(new TextMessage(arrayJsonUSer.toJSONString()));
} catch (Exception e) {
log.info("userSave Exception->{}", e.getMessage());
}
}
break;
case "userDelete":
log.info("userDelete Start...");
break;
}
}
// 웹소켓 연결이 되면 동작
@SuppressWarnings("unchecked")
@Override
public void afterConnectionEstablished(WebSocketSession session) throws Exception {
log.info("afterConnectionEstablished Start...");
// 웹소캣 연결이 되면 동작
super.afterConnectionEstablished(session);
// 연결 소캣을 map에 등록
sessionMap.put(session.getId(), session);
JSONObject jsonObj = new JSONObject();
// 대상 : Client
jsonObj.put("type", "getId");
jsonObj.put("sessionId", session.getId());
// Socket Server가 Client에게 전송
session.sendMessage(new TextMessage(jsonObj.toJSONString()));
}
// 웹소켓이 종료되면 동작
@Override
public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
log.info("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 (ParseException e) {
log.info("ParseException->{}",e.getMessage());
}
return jsonObj;
}
}📂 views
- chatView.jsp
삼항연산자
(조건문) ? 참일때 : 거짓일때 이라는 문법 ( if - else )
<%@ 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>");
}
}else 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에 등록
if(jsonMsg.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));
}
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 : $("#chatting").val()
}
// 자바스크립트의 값을 JSON 문자열로 변환
ws.send(JSON.stringify(option));
$('#chatting').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"></div>
<div id="yourMsg">
<table class="inputTable">
<tr>
<th>메시지</th>
<th><input id="chatting" placeholder="보내실 메시지를 입력하세요."></th>
<th><button onclick="send()" id="sendBtn">보내기</button></th>
</tr>
</table>
</div>
</div>
</body>
</html>
