Skip to content
This repository has been archived by the owner on Aug 13, 2022. It is now read-only.

Commit

Permalink
#30 웹소켓을 이용한 1:1 채팅 구현
Browse files Browse the repository at this point in the history
- 채팅 jsp 처리를 위한 servlet추가
- ModelAndView 사용 및 chat.jsp 추가
- spring.mvc.view 설정
  • Loading branch information
junshock5 committed Aug 24, 2020
1 parent f455586 commit 5fabb1d
Show file tree
Hide file tree
Showing 5 changed files with 138 additions and 23 deletions.
17 changes: 8 additions & 9 deletions pom.xml
Original file line number Diff line number Diff line change
Expand Up @@ -128,15 +128,14 @@
</dependency>

<!-- View JSP -->
<!-- <dependency>-->
<!-- <groupId>javax.servlet</groupId>-->
<!-- <artifactId>jstl</artifactId>-->
<!-- </dependency>-->
<!-- <dependency>-->
<!-- <groupId>org.apache.tomcat.embed</groupId>-->
<!-- <artifactId>tomcat-embed-jasper</artifactId>-->
<!-- <scope>provided</scope>-->
<!-- </dependency>-->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>jstl</artifactId>
</dependency>
<dependency>
<groupId>org.apache.tomcat.embed</groupId>
<artifactId>tomcat-embed-jasper</artifactId>
</dependency>

</dependencies>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ public class WebSocketConfig implements WebSocketConfigurer {

@Override
public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
registry.addHandler(socketHandler, "/chatting");
registry.addHandler(socketHandler, "/chating");
}

@Bean
Expand Down
18 changes: 6 additions & 12 deletions src/main/java/com/market/server/controller/ChattingController.java
Original file line number Diff line number Diff line change
@@ -1,22 +1,16 @@
package com.market.server.controller;
import io.swagger.annotations.Api;
import org.json.simple.JSONObject;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.ModelAndView;

@Api(tags = {"6. chatting"})
@RestController
public class ChattingController {

@RequestMapping("/chatting")
public JSONObject chat(JSONObject jsonStr) {
return jsonStr;
@RequestMapping("/chat")
public ModelAndView chat() {
ModelAndView mv = new ModelAndView();
mv.setViewName("chat");
return mv;
}

// @RequestMapping("/chat")
// public ModelAndView chat() {
// ModelAndView mv = new ModelAndView();
// mv.setViewName("chat");
// return mv;
// }
}
6 changes: 5 additions & 1 deletion src/main/resources/application.properties
Original file line number Diff line number Diff line change
Expand Up @@ -18,4 +18,8 @@ spring.data.redis.repositories.enabled=false
expire.defaultTime=36288000

# tomcat
server.port=8888
server.port=9000

#JSP, HTML ModelAndView Path Setting
spring.mvc.view.prefix=/WEB-INF/jsp/
spring.mvc.view.suffix=.jsp
118 changes: 118 additions & 0 deletions src/main/webapp/WEB-INF/jsp/chat.jsp
Original file line number Diff line number Diff line change
@@ -0,0 +1,118 @@
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<meta charset="UTF-8">
<title>Chating</title>
<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 p{
color: #fff;
text-align: left;
}
input{
width: 330px;
height: 25px;
}
#yourMsg{
display: none;
}
</style>
</head>

<script type="text/javascript">
var ws;
function wsOpen(){
ws = new WebSocket("ws://" + location.host + "/chating");
wsEvt();
}
function wsEvt() {
ws.onopen = function(data){
//소켓이 열리면 초기화 세팅하기
}
ws.onmessage = function(data) {
var msg = data.data;
if(msg != null && msg.trim() != ''){
$("#chating").append("<p>" + msg + "</p>");
}
}
document.addEventListener("keypress", function(e){
if(e.keyCode == 13){ //enter press
send();
}
});
}
function chatName(){
var userName = $("#userName").val();
if(userName == null || userName.trim() == ""){
alert("사용자 이름을 입력해주세요.");
$("#userName").focus();
}else{
wsOpen();
$("#yourName").hide();
$("#yourMsg").show();
}
}
function send() {
var uN = $("#userName").val();
var msg = $("#chatting").val();
ws.send(uN+" : "+msg);
$('#chatting').val("");
}
</script>
<body>
<div id="container" class="container">
<h1>채팅</h1>
<div id="chating" class="chating">
</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>

0 comments on commit 5fabb1d

Please sign in to comment.