[Spring / WebSocket] Java Websocket을 이용한 1:1 채팅방, 단체 채팅방 만들기 - 1 [Handler / Controller / JavaScript / url 셋팅]

리트리버J

·

2020. 12. 5. 00:24

728x90

1. WebSocketHandler

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
package com.fp.neezit.chat.controller;
 
import java.util.ArrayList;
import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;
 
import org.springframework.beans.factory.InitializingBean;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
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 com.fasterxml.jackson.databind.ObjectMapper;
import com.fp.neezit.chat.model.service.ChatService;
import com.fp.neezit.chat.model.vo.ChatMessage;
import com.fp.neezit.chat.model.vo.ChatRoom;
 
@Controller
public class WebSocketHandler extends TextWebSocketHandler implements InitializingBean {
    
    @Autowired
    ChatService cService;
    
    private final ObjectMapper objectMapper = new ObjectMapper();
    
    // 채팅방 목록 <방 번호, ArrayList<session> >이 들어간다.
    private Map<String, ArrayList<WebSocketSession>> RoomList = new ConcurrentHashMap<String, ArrayList<WebSocketSession>>();
    // session, 방 번호가 들어간다.
    private Map<WebSocketSession, String> sessionList = new ConcurrentHashMap<WebSocketSession, String>();
    
    private static int i;
    /**
     * websocket 연결 성공 시
     */
    @Override
    public void afterConnectionEstablished(WebSocketSession session) throws Exception {
        i++;
        System.out.println(session.getId() + " 연결 성공 => 총 접속 인원 : " + i + "명");
    }
 
    /**
     * websocket 연결 종료 시
     */
    @Override
    public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
        i--;
        System.out.println(session.getId() + " 연결 종료 => 총 접속 인원 : " + i + "명");
        // sessionList에 session이 있다면
        if(sessionList.get(session) != null) {
            // 해당 session의 방 번호를 가져와서, 방을 찾고, 그 방의 ArrayList<session>에서 해당 session을 지운다.
            RoomList.get(sessionList.get(session)).remove(session);
            sessionList.remove(session);
        }
    }
 
    @Override
    protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
 
        // 전달받은 메세지
        String msg = message.getPayload();
        
        // Json객체 → Java객체
        // 출력값 : [roomId=123, messageId=null, message=asd, name=천동민, email=cheon@gmail.com, unReadCount=0]
        ChatMessage chatMessage = objectMapper.readValue(msg,ChatMessage.class);
        
        // 받은 메세지에 담긴 roomId로 해당 채팅방을 찾아온다.
        ChatRoom chatRoom = cService.selectChatRoom(chatMessage.getRoomId());
        
        // 채팅 세션 목록에 채팅방이 존재하지 않고, 처음 들어왔고, DB에서의 채팅방이 있을 때
        // 채팅방 생성
        if(RoomList.get(chatRoom.getRoomId()) == null && chatMessage.getMessage().equals("ENTER-CHAT"&& chatRoom != null) {
            
            // 채팅방에 들어갈 session들
            ArrayList<WebSocketSession> sessionTwo = new ArrayList<>();
            // session 추가
            sessionTwo.add(session);
            // sessionList에 추가
            sessionList.put(session, chatRoom.getRoomId());
            // RoomList에 추가
            RoomList.put(chatRoom.getRoomId(), sessionTwo);
            // 확인용
            System.out.println("채팅방 생성");
        }
        
        // 채팅방이 존재 할 때
        else if(RoomList.get(chatRoom.getRoomId()) != null && chatMessage.getMessage().equals("ENTER-CHAT"&& chatRoom != null) {
            
            // RoomList에서 해당 방번호를 가진 방이 있는지 확인.
            RoomList.get(chatRoom.getRoomId()).add(session);
            // sessionList에 추가
            sessionList.put(session, chatRoom.getRoomId());
            // 확인용
            System.out.println("생성된 채팅방으로 입장");
        }
        
        // 채팅 메세지 입력 시
        else if(RoomList.get(chatRoom.getRoomId()) != null && !chatMessage.getMessage().equals("ENTER-CHAT"&& chatRoom != null) {
            
            // 메세지에 이름, 이메일, 내용을 담는다.
            TextMessage textMessage = new TextMessage(chatMessage.getName() + "," + chatMessage.getEmail() + "," + chatMessage.getMessage());
            
            // 현재 session 수
            int sessionCount = 0;
 
            // 해당 채팅방의 session에 뿌려준다.
            for(WebSocketSession sess : RoomList.get(chatRoom.getRoomId())) {
                sess.sendMessage(textMessage);
                sessionCount++;
            }
            
            // 동적쿼리에서 사용할 sessionCount 저장
            // sessionCount == 2 일 때는 unReadCount = 0,
            // sessionCount == 1 일 때는 unReadCount = 1
            chatMessage.setSessionCount(sessionCount);
            
            // DB에 저장한다.
            int a = cService.insertMessage(chatMessage);
            
            if(a == 1) {
                System.out.println("메세지 전송 및 DB 저장 성공");
            }else {
                System.out.println("메세지 전송 실패!!! & DB 저장 실패!!");
            }
        }
    }
    
    @Override
    public void afterPropertiesSet() throws Exception {}
}
cs

2. ChatController

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
package com.fp.neezit.chat.controller;
 
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
 
import javax.servlet.http.HttpServletResponse;
 
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
 
import com.fp.neezit.chat.model.service.ChatService;
import com.fp.neezit.chat.model.vo.ChatMessage;
import com.fp.neezit.chat.model.vo.ChatRoom;
import com.fp.neezit.chat.model.vo.ChatSession;
import com.fp.neezit.product.model.service.ProductService;
import com.fp.neezit.user.model.vo.UserMaster;
import com.google.gson.Gson;
import com.google.gson.GsonBuilder;
import com.google.gson.JsonIOException;
 
@Controller
public class ChatController {
    
    @Autowired
    ChatService cService;
    
    @Autowired
    ProductService pService;
    
    @Autowired
    private ChatSession cSession;
    
    /**
     * 해당 채팅방의 채팅 메세지 불러오기
     * @param roomId
     * @param model
     * @param response
     * @throws JsonIOException
     * @throws IOException
     */
    @RequestMapping(value="{roomId}.do")
    public void messageList(@PathVariable String roomId, String userEmail, Model model, HttpServletResponse response) throws JsonIOException, IOException {
        
        List<ChatMessage> mList = cService.messageList(roomId);
        response.setContentType("application/json; charset=utf-8");
 
        // 안읽은 메세지의 숫자 0으로 바뀌기
        ChatMessage message = new ChatMessage();
        message.setEmail(userEmail);
        message.setRoomId(roomId);
        cService.updateCount(message);
        
        Gson gson = new GsonBuilder().setDateFormat("yyyy-MM-dd").create();
        gson.toJson(mList,response.getWriter());
    }
    
    /**
     * 채팅 방이 없을 때 생성
     * @param room
     * @param userEmail
     * @param masterNickname
     * @return
     */
    @ResponseBody
    @RequestMapping("createChat.do")
    public String createChat(ChatRoom room, String userName, String userEmail, String masterNickname){
        
        UserMaster m = pService.getProductDetail(masterNickname);
        
        room.setUserEmail(userEmail);
        room.setUserName(userName);
        room.setMasterEmail(m.getEmail());
        room.setMasterName(m.getmNickname());
        room.setMasterPic(m.getmProPicRe());
 
        ChatRoom exist  = cService.searchChatRoom(room);
        
        // DB에 방이 없을 때
        if(exist == null) {
            System.out.println("방이 없다!!");
            int result = cService.createChat(room);
            if(result == 1) {
                System.out.println("방 만들었다!!");
                return "new";
            }else {
                return "fail";
            }
        }
        // DB에 방이 있을 때
        else{
            System.out.println("방이 있다!!");
            return "exist";
        }
    }
    
    /**
     * 채팅 방 목록 불러오기
     * @param room
     * @param userEmail
     * @param response
     * @throws JsonIOException
     * @throws IOException
     */
    @RequestMapping("chatRoomList.do")
    public void createChat(ChatRoom room, ChatMessage message, String userEmail, HttpServletResponse response) throws JsonIOException, IOException{
        List<ChatRoom> cList = cService.chatRoomList(userEmail);
        
        for(int i = 0; i < cList.size(); i++) {
            message.setRoomId(cList.get(i).getRoomId());
            message.setEmail(userEmail);
            int count = cService.selectUnReadCount(message);
            cList.get(i).setUnReadCount(count);
        }
        
        response.setContentType("application/json; charset=utf-8");
 
        Gson gson = new GsonBuilder().setDateFormat("yyyy-MM-dd").create();
        gson.toJson(cList,response.getWriter());
    }
    
    @RequestMapping("chatSession.do")
    public void chatSession( HttpServletResponse response) throws JsonIOException, IOException{
        
        ArrayList<String> chatSessionList = cSession.getLoginUser();
        
        response.setContentType("application/json; charset=utf-8");
 
        Gson gson = new GsonBuilder().setDateFormat("yyyy-MM-dd").create();
        gson.toJson(chatSessionList,response.getWriter());
    }
    
}
 
cs

3. JavaScript

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- Noto-Sans 폰트-->
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap" rel="stylesheet">
<!-- JUA 폰트-->
<link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="resources/css/talk.css">
<audio id='audio_play' src='resources/pop.mp3'></audio>
<script type="text/javascript"> 
function play() { 
    var audio = document.getElementById('audio_play'); 
    if (audio.paused) { 
        audio.play(); 
    }else
        audio.pause(); 
        audio.currentTime = 0 
    } 
</script>
</head>
<body>
    <!-- 채팅 아이콘 -->
    <div class="chatIcon font_jua">
        <img src="resources/img/chat-icon.png" class="iconImg">
    </div>
    <!-- 채팅 리스트 / 채팅 방 OPEN / CLOSE -->
    <script>
         $(document).on("click"".chatIcon"function(){                // 채팅 Icon 클릭 시,
            if($('.chatContainer').hasClass("display-none")){           // if ) 채팅방이 열려있지 않을 때,
                $('.chatListContainer').toggleClass('display-none');    // 리스트를 연다.
            }else{                                                      // else ) 채팅방이 열려있다면,
                $('.chatContainer').toggleClass('display-none');        // 채팅방을 닫는다.
                websocket.close();
            }
             
             if(!$('.chatListContainer').hasClass('display-none')){         // 채팅 리스트가 닫혀 있을 때
                getRoomList();                                            // 채팅 방 목록을 불러온다.
             }
         });
         
         $(document).on("click""img.close"function(){                // X 버튼 클릭 시,
             $('.chatContainer').toggleClass('display-none');           // 채팅방을 닫는다.
             websocket.close();                                            // socket 연결 종료
         });
         
         $(document).on("click""img.down"function(){                 // - 버튼 클릭 시,
             $('.chatContainer').toggleClass('display-none');           // 채팅방을 닫고,
             $('.chatListContainer').toggleClass('display-none');       // 리스트를 연다.
             websocket.close();                                            // socket 연결 종료
         });
    </script>
    <!-- 채팅 창 -->
    <div class="chatContainer display-none">
        <div class="chatTop">
            <div class="floatLeft" id="loginOn">
                <img class="profile_img" id="setPic"><!-- src 사진 경로 동적 생성 -->
            </div>
            <div class="name_container font_noto" id="setName"><!-- 이름 동적 생성 --></div>
            <div class="floatRight">
                <img src="resources/img/chat-close.png" class="btnImg close">
            </div>
            <div class="floatRight">
                <img src="resources/img/chat-minus.png" class="btnImg down">
            </div>
        </div>
        <div class="chatMiddle">
            <ul>
                <!-- 동적 생성 -->
            </ul>
        </div>
        <div class="chatBottom">
            <textarea placeholder="메세지를 입력해 주세요."></textarea>
        </div>
    </div>
    
    <!-- format -->
    <div class="chatMiddle format">
        <ul>
            <li>
                <div class="sender">
                    <span></span>
                </div>
                <div class="message">
                    <span></span>
                </div>
            </li>
        </ul>
    </div>
 
    <!-- 채팅 리스트 -->
    <div class="chatListContainer font_jua display-none">
        <div class="chatTop">
            <div style="padding: 10px; margin-left: 4px;">니즈톡 리스트</div>
        </div>
        <div class="chatList">
            <!-- 동적 생성 -->
        </div>
    </div>
    
    <!-- 채팅 목록 관련 -->
    <script>
        // 총 읽지 않은 갯수
        let countAll = 0;
        
        function getRoomList(){
            // 채팅 방 목록 가져오기
             $.ajax({
                url:"chatRoomList.do",
                data:{
                    userEmail:"${loginUser.email}"
                },
                dataType:"json",
                async:false// async : false를 줌으로써 비동기를 동기로 처리 할 수 있다.
                success:function(data){
                    
                    // 현재 로그인 된 User들
                    let loginList = "";
                      
                    // 로그인 된 User들을 가져온다.
                    $.ajax({
                        url:"chatSession.do",
                        data:{
                        },
                        async:false,
                        dataType:"json",
                        success:function(data){
                            for(var i = 0; i < data.length; i++){
                                loginList += data[i];
                            }
                        }
                    });
                      
                     $chatWrap = $(".chatList");
                    $chatWrap.html("");
                    
                    var $div;     // 1단계
                    var $img;     // 2단계
                    var $divs;     // 2단계
                    var $span;    // 2단계
                    
                    if(data.length > 0){
                        // 읽지 않은 메세지 초기화
                        countAll = 0;
                        
                        // 태그 동적 추가
                        for(var i in data){
                        
                            // 자신이 구매자 입장일 때
                            if(data[i].userEmail == "${loginUser.email}"){
                                // 현재 판매자가 로그인 상태 일 때
                                if(loginList.indexOf(data[i].masterEmail) != -1){
                                    $div = $("<div class='chatList_box enterRoomList' onclick='enterRoom(this);'>").attr("id",data[i].roomId).attr("email",data[i].masterEmail);
                                }
                                // 현재 판매자가 로그아웃 상태 일 때
                                else{
                                    $div = $("<div class='chatList_box2 enterRoomList' onclick='enterRoom(this);'>").attr("id",data[i].roomId).attr("email",data[i].masterEmail);
                                }
                                $img = $("<img class='profile_img'>").attr("src""resources/masterImg/" + data[i].masterPic);
                                $divs = $("<div class='userNameId'>").text(data[i].masterName);
                            }
                            // 자신이 판매자 입장일 때
                            else{                        
                                // 현재 구매자가 로그인 상태 일 때
                                if(loginList.indexOf(data[i].userEmail) != -1){
                                    $div = $("<div class='chatList_box enterRoomList' onclick='enterRoom(this);'>").attr("id",data[i].roomId).attr("email",data[i].userEmail);
                                }
                                // 현재 구매자가 로그아웃 상태 일 때
                                else{
                                    $div = $("<div class='chatList_box2 enterRoomList' onclick='enterRoom(this);'>").attr("id",data[i].roomId).attr("email",data[i].userEmail);
                                }                                
                                $img = $("<img class='profile_img'>").attr("src""resources/img/" + data[i].userPic);
                                $divs = $("<div class='userNameId'>").text(data[i].userName);
                            }
                            
                            // 읽지 않은 메세지가 0이 아닐 때
                            if(data[i].unReadCount != 0){
                                $span = $("<span class='notRead'>").text(data[i].unReadCount);
                            }else{
                                $span = $("<span>");
                            }
                            
                            $div.append($img);
                            $div.append($divs);
                            $div.append($span);
                            
                            $chatWrap.append($div);
                            
                            // String을 int로 바꿔주고 더해준다.
                            countAll += parseInt(data[i].unReadCount);
                        }
                    }
                }
            });
        }
        
        // 화면 로딩 된 후
        $(window).on('load'function(){
            
            // 2초에 한번씩 채팅 목록 불러오기(실시간 알림 전용)
            setInterval(function(){
                // 방 목록 불러오기
                getRoomList();
                
                // 읽지 않은 메세지 총 갯수가 0개가 아니면
                if(countAll != 0){
                    // 채팅 icon 깜빡거리기
                    $('.chatIcon').addClass('iconBlink');
                    play();
                }else{
                    // 깜빡거림 없애기
                    $('.chatIcon').removeClass('iconBlink');
                }
            },2000);
        });
    </script>
    
    <!-- 채팅 방 관련 -->
    <script>
        let roomId;
        // enter 키 이벤트
        $(document).on('keydown''div.chatBottom textarea'function(e){
             if(e.keyCode == 13 && !e.shiftKey) {
                 e.preventDefault(); // 엔터키가 입력되는 것을 막아준다.
                 const message = $(this).val();  // 현재 입력된 메세지를 담는다.
                   
                 let search3 = $('div.chatBottom textarea').val();
                  
                 if(search3.replace(/\s|  /gi, "").length == 0){
                       return false;
                       $('div.chatBottom textarea').focus();
                    }
                 
                 sendMessage(message);
                 // textarea 비우기
                 clearTextarea();
             }
        });
 
        // 채팅 방 클릭 시 방번호 배정 후 웹소켓 연결
        function enterRoom(obj){
            // 현재 html에 추가되었던 동적 태그 전부 지우기
            $('div.chatMiddle:not(.format) ul').html("");
            // obj(this)로 들어온 태그에서 id에 담긴 방번호 추출
            roomId = obj.getAttribute("id");
             // 해당 채팅 방의 메세지 목록 불러오기
              $.ajax({
                url:roomId + ".do",
                data:{
                    userEmail:"${loginUser.email}"
                },
                async:false,
                dataType:"json",
                success:function(data){
                    for(var i = 0; i < data.length; i++){
                        // 채팅 목록 동적 추가
                        CheckLR(data[i]);
                    }
                }
            });
             // 웹소켓 연결
             connect();
             console.log("enterRoom");
        }
        
        // 채팅 방 열어주기
        $(document).on("click"".enterRoomList",function(){
             $(".chatContainer").toggleClass("display-none");
             $(this).parent().parent().toggleClass("display-none");
             // 이름 추가
             $("#setName").html($(this).children('div').html());
             // 사진 추가
             $("#setPic").attr("src",$(this).children('img').attr('src'));
             // 스크롤바 아래 고정
            $('div.chatMiddle').scrollTop($('div.chatMiddle').prop('scrollHeight'));
             // 로그인 상태 일 때 
             if($(this).hasClass('chatList_box')){
                 // 점 표시
                $('#loginOn').addClass('profile_img_Container');
             }
             // 로그아웃 상태 일 때
             else{
                 // 점 빼기
                 $('#loginOn').removeClass('profile_img_Container');
             }
        });
        
        // 웹소켓
         let websocket;
     
         //입장 버튼을 눌렀을 때 호출되는 함수
         function connect() {
             // 웹소켓 주소
             var wsUri = "ws://${pageContext.request.serverName}:${pageContext.request.serverPort}${pageContext.request.contextPath}/websocket/echo.do";
             // 소켓 객체 생성
             websocket = new WebSocket(wsUri);
             //웹 소켓에 이벤트가 발생했을 때 호출될 함수 등록
             websocket.onopen = onOpen;
             websocket.onmessage = onMessage;
         }
         
         //웹 소켓에 연결되었을 때 호출될 함수
         function onOpen() {
             // ENTER-CHAT 이라는 메세지를 보내어, Java Map에 session 추가
             const data = {
                    "roomId" : roomId,
                    "name" : "${ loginUser.name }",
                    "email" : "${ loginUser.email }",
                 "message" : "ENTER-CHAT"
            };
            let jsonData = JSON.stringify(data);
             websocket.send(jsonData);
         }
         
        // * 1 메시지 전송
        function sendMessage(message){
            
            const data = {
                "roomId" : roomId,
                "name" : "${ loginUser.name }",
                "email" : "${ loginUser.email }",
                "message"   : message 
            };
              
            CheckLR(data);
             
            let jsonData = JSON.stringify(data);
             
             websocket.send(jsonData);
         }
        
         // * 2 메세지 수신
         function onMessage(evt) {
             
            let receive = evt.data.split(",");
             
            const data = {
                    "name" : receive[0],
                    "email" : receive[1],
                 "message" : receive[2]
            };
             
             if(data.email != "${ loginUser.email }"){
                CheckLR(data);
             }
        }
         
        // * 2-1 추가 된 것이 내가 보낸 것인지, 상대방이 보낸 것인지 확인하기
        function CheckLR(data) {
            // email이 loginSession의 email과 다르면 왼쪽, 같으면 오른쪽
            const LR = (data.email != "${ loginUser.email }") ? "left" : "right";
             // 메세지 추가
            appendMessageTag(LR, data.email, data.message, data.name);
        }
         
        // * 3 메세지 태그 append
        function appendMessageTag(LR_className, email, message, name) {
             
            const chatLi = createMessageTag(LR_className, email, message, name);
         
            $('div.chatMiddle:not(.format) ul').append(chatLi);
         
            // 스크롤바 아래 고정
            $('div.chatMiddle').scrollTop($('div.chatMiddle').prop('scrollHeight'));
        }
         
        // * 4 메세지 태그 생성
        function createMessageTag(LR_className, email, message, name) {
         
             // 형식 가져오기
             let chatLi = $('div.chatMiddle.format ul li').clone();
         
             chatLi.addClass(LR_className);              // left : right 클래스 추가
             // find() : chatLi의 하위 요소 찾기
             chatLi.find('.sender span').text(name);      // 이름 추가
             chatLi.find('.message span').text(message); // 메세지 추가
         
             return chatLi;
        };
         
        // * 5 - 채팅창 비우기
        function clearTextarea() {
             $('div.chatBottom textarea').val('');
             return false;
        };
    </script>
</body>
</html>
cs

4. Servlet-context.xml

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<?xml version="1.0" encoding="UTF-8"?>
<beans:beans xmlns="http://www.springframework.org/schema/mvc"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns:beans="http://www.springframework.org/schema/beans"
    xmlns:context="http://www.springframework.org/schema/context"
    xmlns:websocket="http://www.springframework.org/schema/websocket"
    xsi:schemaLocation="http://www.springframework.org/schema/websocket http://www.springframework.org/schema/websocket/spring-websocket-4.3.xsd
        http://www.springframework.org/schema/mvc https://www.springframework.org/schema/mvc/spring-mvc.xsd
        http://www.springframework.org/schema/beans https://www.springframework.org/schema/beans/spring-beans.xsd
        http://www.springframework.org/schema/context https://www.springframework.org/schema/context/spring-context.xsd">
 
    <!-- DispatcherServlet Context: defines this servlet's request-processing infrastructure -->
    
    <!-- Enables the Spring MVC @Controller programming model -->
    <annotation-driven />
 
    <!-- Handles HTTP GET requests for /resources/** by efficiently serving up static resources in the ${webappRoot}/resources directory -->
    <resources mapping="/resources/**" location="/resources/" />
 
    <!-- Resolves views selected for rendering by @Controllers to .jsp resources in the /WEB-INF/views directory -->
    <beans:bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <beans:property name="prefix" value="/WEB-INF/views/" />
        <beans:property name="suffix" value=".jsp" />
    </beans:bean>
    
    <context:component-scan base-package="com.fp.neezit" />
    
    <!-- 웹 소켓 핸들러 -->
    <websocket:handlers>
        <websocket:mapping path="/websocket/echo.do" handler="myHandler"/>
    </websocket:handlers>
 
    <beans:bean id="myHandler" class="com.fp.neezit.chat.controller.WebSocketHandler"/>
    
    
    
</beans:beans>
 
cs
728x90