웹소켓
웹 소켓은 웹서버와 웹브라우저가 지속적으로 연결된 TCP 라인을 통해 실시간으로 데이터를 주고받을 수 있도록 하는 HTML의 새로운 사양이다. 따라서 Web Socket을 이용하면 양방향 통신이 가능하다. 이와 같은 특징으로 웹에서도 게시판 프로젝트에서 댓글 알림이나 실시간 채팅, 실시간 주식 차트와 같은 응용프로그램의 개발을 한층 효과적으로 구현할 수 있게 되었다.
- 금요일에 이어서 웹소켓을 좀 더 심플하게 수정해보도록 하겠다.
/ex13/src/main/webapp/WEB-INF/views/chat.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/sockjs-client/1.1.5/sockjs.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.1/handlebars.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="/resources/chat.css" />
<title>Chat Application</title>
<style>
div.header {
position: sticky;
top: 0;
background-color: blue;
}
</style>
</head>
<body>
<div class="chat_wrap">
<div class="header">
<h3>채팅방(${uid})</h3>
</div>
<div id="chat"></div>
<!-- 기존채팅저장출력 -->
<script id="temp" type="text/x-handlebars-template">
{{#each .}}
<div class="{{printLeftRight sender}}">
<div class="sender" style="display:{{printDone sender}}">
<img src="/display?file={{photo}}" style="width:50px; height:50px;" />
</div>
<div class="sender">{{sender}}</div>
<div class="message">
{{message}}
<a href="{{id}}" style="display:{{printNone sender}}">X</a>
</div>
<div class="date">{{regdate}}</div>
</div>
{{/each}}
</script>
<div class="input-div">
<textarea id="txtMessage" cols="30" rows="10"
placeholder="메시지를 입력한 후에 엔터키를 누르세요."></textarea>
</div>
</div>
</body>
<script>
// 메시지 입력시 내가 작성한건 오른쪽 타인이 작성한건 왼쪽으로 기입되는 방식 지정
var uid = "${uid}";
Handlebars.registerHelper("printLeftRight", function(sender) {
if (uid != sender) {
return "left";
} else {
return "right";
}
});
// 메시지 부분에 본인이 작성한 글을 삭제할 수 있게 a tag 활성화
Handlebars.registerHelper("printNone", function(sender) {
if (uid != sender) {
return "none";
}
});
// 본인 외에 유저의 사진만 보이도록 함
Handlebars.registerHelper("printDone", function(sender) {
if (uid == sender) {
return "none";
}
});
</script>
<script>
var uid = "${uid}"
getList();
// 채팅 삭제
$("#chat").on('click', '.message a', function(e) {
e.preventDefault();
var id = $(this).attr("href");
if (!confirm(id + "을(를) 삭제하시겠습니까?"))
return;
$.ajax({
type : 'post',
url : '/chat/delete',
data : {
id : id
},
success : function() {
alert("삭제되었습니다.");
sock.send("delete");
}
})
})
// 메시지 전송
$("#txtMessage").on("keypress", function(e) {
if (e.keyCode == 13 && !e.shiftKey) {
e.preventDefault();
var message = $("#txtMessage").val();
if (message == "") {
alert("메시지를 입력하세요.");
$("#txtMessage").focus();
return;
}
$("#txtMessage").val("");
// DB로 데이터 보내기
$.ajax({
type : 'post',
url : '/chat/insert',
data : {
sender : uid,
message : message
},
success : function(data) {
// 서버로 메시지 보내기
sock.send(uid + "|" + message);
// getList();
}
})
}
})
// 웹소캣 생성
var sock = new SockJS("http://localhost:8088/echo");
// 서버에서 메시지가 왔을때
sock.onmessage = onMessage;
// 서버로부터 메시지 받기
function onMessage(msg) {
getList();
}
// 채팅 데이터 받아오기
function getList() {
$.ajax({
type : 'get',
url : '/chat.json',
dataType : 'json',
success : function(data) {
var temp = Handlebars.compile($("#temp").html());
$("#chat").html(temp(data));
window.scrollTo(0, $('#chat').prop('scrollHeight'));
}
});
}
</script>
</html>
- 웹소켓을 이용해서 공지사항 push알림이 내 웹소켓에 접속되어 있는 사람들에게 알림이 뜨도록 해보겠다.
'ICIA 수업일지' 카테고리의 다른 글
| 2021.10.26 수업일지(Github, Git) (0) | 2021.10.26 |
|---|---|
| 2021.10.22 수업일지(Spring Framework, Web Socket) (3) | 2021.10.22 |
| 2021.10.21 수업일지(Spring Framework, KAKAO, NAVER API, Git 연습) (0) | 2021.10.21 |
| 2021.10.20 수업일지(Spring Framework, Github, Git, Jsoup, Selenium) (0) | 2021.10.20 |
| 2021.10.19 수업일지(Spring Framework, Interceptor, Google API) (0) | 2021.10.19 |
