on
스프링 게시판기능 의존성
스프링 게시판기능 의존성
반응형
스프링 게시판기능 의존성
지난시간에 이어서 계속 진도를 나가보도록 할게요!
2)WebSocket 서버 클래스 생성
=>TextWebSocketHandler 클래스를 상속
=>기본 패키지 안에 생성
=>com.pk.db.util.ChatHandler
package com.pk.db; import java.io.IOException; import java.util.ArrayList; import java.util.List; 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; //Bean 생성을 자동으로 해주기 위한 어노테이션 @Component //웹 소켓 채팅 서버 클래스 public class ChatHandler extends TextWebSocketHandler { //접속한 유저 목록을 가질 List를 생성 private static List users = new ArrayList(); //클라이언트가 접속했을 때 호출될 메소드 //오버라이드 해주면 코드틀렸을시 에러가뜸(코드 고쳐주자) //매개변수로 대입된 데이터가 접속한 클라이언트 @Override public void afterConnectionEstablished(WebSocketSession session) { //List에 추가 users.add(session); } //클라이언트가 접속을 해제했을 때 호출될 메소드 //매개변수로 대입된 데이터가 접속을 해제한 클라이언트 @Override public void afterConnectionClosed( WebSocketSession session, CloseStatus status) { //List에서 제거 users.remove(session); } //메시지가 전송되었을 때 호출되는 메소드 @Override public void handleTextMessage( WebSocketSession session, TextMessage message) { System.out.println(message.getPayload() + "가 전송됨"); for(WebSocketSession ses : users) { try { ses.sendMessage(new TextMessage(message.getPayload())); } catch (IOException e) { e.printStackTrace(); } } } }
추가가 됩니다.
Great!!!
3)ChatHandler 클래스를 가지고
URL 과 매핑하는 코드를 servlet-context.xml 에 작성
=>servlet-context.xml 파일에 websocket 네임스페이스를 추가
4)home.jsp 파일에 채팅 페이지로 이동할 링크를 추가
WebSocket을 이용한 채팅 구현
5)HomeController 클래스에 위의 요청을 처리하는 메소드 작성
//chat 이라는 요청이 오면 chat 이라는 문자열을 가지고 ViewResolver 설정을 확인해서 //뷰 페이지를 결정 - WEB - INF/views/?.jsp @RequestMapping(value="/chat", method=RequestMethod.GET) public String chat(HttpServletRequest request, Model model) { //뷰이름을 리턴 return "chat"; }
6)view 디렉토리에 chat.jsp 파일을 만들고 작성
" + document.getElementById("chatmessagearea").innerHTML } //이벤트 처리 함수 var onOpen = function(){ appendMessage("채팅 서버 연결 완료."); } var onClose = function(){ appendMessage("채팅 서버 연결 종료."); wsocket.close(); } var onMessage = function(evt){ var data = evt.data; appendMessage(data); } //전송 버튼 눌렀을때 받는 함수 var send = function(){ //입력한 내용을 WebSocket 서버에게 전달하고 message 란은 클리어 var nickname = document.getElementById("nickname").value; var msg = document.getElementById("Message").value; wsocket.send(nickname + ":" + msg); document.getElementById("message").value = ' '; } //웹 소켓 연결함수 var connect = function(){ //http://localhost:9000/db/chat-ws - 자기 컴퓨터에서만 접속됨 //밑의 코드는 다른 사람들도 함께 접속 wsocket = new WebSocket("ws://211.183.6.60:9000/db/chat-ws") //이벤트 핸들러 연결 wsocket.addEventListener("open", onOpen); wsocket.addEventListener("message", onMessage); }; //message 입력란에서 키보드 이벤트가 발생하면 document.getElementById("message").addEventListener("keypress", function(e){ //enter (== 13) 을 누르면 send()를 호출 event = e || window.event; var keycode = (event.keyCode?event.keyCode:event.which); if(keycode == 13){ send() } event.stopPropagation(); }) //버튼들의 이벤트 처리 document.getElementById('sendbtn').addEventListener("click", function(e){ send(); }) document.getElementById('enterbtn').addEventListener("click", function(e){ connect(); }) document.getElementById('exitbtn').addEventListener("click", function(e){ onClose(); })
**로그인 기능 추가
1.데이터베이스(oracle-dbeaver)에 접속해서 로그인 처리 테이블을 생성하고 샘플 데이터를 입력
CREATE TABLE member(
num number(10),
USERid varchar2(100) UNIQUE,
userpw varchar2(100) NOT NULL,
nickname varchar2(100),
PRIMARY KEY (num)
);
INSERT INTO MEMBER values(1, 'root', '1234', '관리자');
INSERT INTO MEMBER values(2, 'ggangpae', '1234', '박문석');
INSERT INTO MEMBER values(3, 'jessica', '1234', '제시카');
COMMIT;
SELECT * FROM MEMBER;
2.테이블과 매핑할 DTO 클래스를 생성
=>com.pk.db.domain.Member
package com.pk.db.domain; public class Member { private int num; private String userid; private String userpw; private String nicakname; public int getNum() { return num; } public void setNum(int num) { this.num = num; } public String getUserid() { return userid; } public void setUserid(String userid) { this.userid = userid; } public String getUserpw() { return userpw; } public void setUserpw(String userpw) { this.userpw = userpw; } public String getNicakname() { return nicakname; } public void setNicakname(String nicakname) { this.nicakname = nicakname; } }
3.dao 패키지의 클래스와 데이터베이스 테이블을 매핑시키는 xml 파일을 생성
=>member.hbm.xml
4.Hibernate 설정 파일을 등록하는 코드를 root-context.xml 파일에 추가!
com/pk/db/dao/member.hbm.xml
5.Hibernate 사용을 위한 Dao 클래스를 만들고 로그인 관련 메소드 작성
=>dao/MemberDao
6.home.jsp 파일에 로그인과 로그아웃 링크를 생성
=>로그인에 성공하면 member 라는 속성에 회원정보를 저장할 것임
=>로그인 여부는 session의 member라는 속성에 데이터가 있으면 로그인 된 것이고
그렇지 않으면 로그인이 되지 않은 것으로 간주
로그인 ${member.nickname}님 로그아웃
7.login 요청이 GET 방식으로 오면 login 페이지로 포워딩 하도록 메소드를 HomeController에 작성
//로그인 페이지로 이동 @RequestMapping(value="/login", method=RequestMethod.GET) public String login(HttpServletRequest request, Model model) { //뷰이름을 리턴 return "login"; }
짜잔~
로그인 채팅 서버가 연결됩니다.
다른 아이피로 접속하여 2개의 창을 띄우고 채팅을 해서 가는지 확인해보셔도 됩니다~
(서로 채팅이 가능합니다)
8.MemberService 인터페이스를 만들고 로그인 처리 메소드 생성
public interface MemberService { //로그인 처리하는 메소드 public Member login(HttpServletRequest request); }
9.MemberService 인터페이스를 구현한 MemberServiceImpl 클래스를 만들고 로그인 처리 메소드 구현
package com.pk.db.service; import javax.servlet.http.HttpServletRequest; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import com.pk.db.dao.MemberDao; import com.pk.db.domain.Member; @Service public class MemberServiceImpl implements MemberService { @Autowired private MemberDao memberDao; @Override public Member login(HttpServletRequest request) { Member member = null; //파라미터 읽기 String userid = request.getParameter("userid"); String userpw = request.getParameter("userpw"); //userid에 해당하는 데이터 찾아오기 member = memberDao.login(member); //userid에 해당하는 데이터가 있다면 if(member != null) { if(member.getUserpw().equals(userpw)) { //비밀번호 정보를 지워버리기 //로그인 성공한 경우 session에 로그인 정보를 저장 member.setUserpw(null); request.getSession().setAttribute("member", member); }else { //로그인 실패 member = null; } } return member; } }
10.HomeController에서 login 요청이 POST 방식으로 오면 처리하는 메소드 생성
1)새로운 서비스를 주입받는 코드를 작성
@Autowired private MemberService memberService;
2)요청을 처리하는 메소드를 생성
@Autowired private MemberService memberService; @RequestMapping(value="/login", method=RequestMethod.POST) public String login(HttpServletRequest request, Model model, RedirectAttributes attrs) { //RedirectAttributes 는 redirect 할 때 1번만 사용하는 데이터를 //저장할 수 있는 Spring이 제공하는 클래스 //서비스의 메소드 호출 Member member = memberService.login(request); //로그인 처리도 redirect로 이동 if(member == null) { attrs.addFlashAttribute( "msg", "없는 아이디이거나 잘못된 비밀번호입니다."); return "redirect:login"; }else { //로그인 성공이면 메인 페이지로 이동 return "redirect:./"; } } }
11.login.jsp 파일에 로그인 실패 메시지를 출력할 영역을 생성
안에
${msg}
을 코딩해줍니다!
이번시간은 여기까지!
다음시간에는
로그아웃과 정렬하는법을 알아보겠습니다 고생하셨습니다~!
반응형
from http://bucheoneduc.tistory.com/33 by ccl(A) rewrite - 2021-12-27 14:02:44