ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • 웹 채팅 만들기
      JAVA/웹 프로그래밍 - JSP 2020. 11. 25. 19:18

       

      Dynamic Web Project를 하나 만들자.

      Dynamic Web Project의 이름은 Chat이라고 하자.

      프로젝트를 만드는 자세한 방법과

      현재 프로젝트 외의 다른 프로젝트의 서버를 종료하고 현재의 프로젝트 서버만 실행하고 설정까지를 진행해보자.

      designatedroom87.tistory.com/321?category=903927

       

      아두이노의 데이터를 웹에 전송하기

      아두이노에서 데이터를 가져오는 내용은 아래의 내용에서 가지고 왔다. designatedroom87.tistory.com/316 아두이노와 자바의 시리얼 통신(아두이노에서 자바로 0과 1을 전송) 자바에서 시리얼 통신을 설

      designatedroom87.tistory.com

       

      src에 socket이라는 패키지를 하나 만들고 다음과 같이 자바 파일(서블릿)을 만든다.

      WSocket.java

      더보기 
      package socket;

import javax.websocket.OnClose;
import javax.websocket.OnError;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.server.ServerEndpoint;

@ServerEndpoint("/wsocket")
public class WSocket 
{
	//	onopen 이벤트가 호출 되면 실행되는 함수
	@OnOpen
	public void handleOpen()
	{
		System.out.println("클라이언트가 접속했습니다.");
	}
	//	onclose 이벤트가 호출 되면 실행되는 함수
	@OnClose
	public void handleClose()
	{
		System.out.println("클라이언트가 연결을 해제했습니다.");
	}
	//	onerror 이벤트가 호출 되면 실행되는 함수
	@OnError
	public void handleError(Throwable t)
	{
		t.printStackTrace();
	}
	//	onmessage 이벤트가 호출 되면 실행되는 함수
	@OnMessage
	public String handleMessage(String message)
	{
		//	서버가 받는다.
		System.out.println("클라이언트가 보내온 메시지 : ");
		System.out.println(message);
		
		return "메시지 수신 완료";
	}
}

       

      WebContent에 WebSocketTest.jsp 파일을 만든다.

      WebSocketTest.jsp

      더보기 
      <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>WebSocket Basic</title>
</head>

<body>
	<h1 id = "state"></h1>
	<!-- 버튼이 눌리면 웹 소켓을 통해서 전송하는데  sendmessage함수를 이용한다. -->
	<input id=send type=text><input type="button" value="전송" id="button" onclick=sendmessage()>
	<script>
		//	소켓 연결을 위해 websocket 객체를 만든다.	 서블릿의 형태로 접속을 한다.
		var websocket = new WebSocket("ws://localhost:9090/wsocket");
		
		//	아래는 웹 소켓에서 사용하는 4가지 이벤트들이다.
		websocket.onopen = function(message){
			document.getElementById("state").innerHTML = "소켓 시작"; 
		}
		websocket.onclose = function(message){}
		websocket.onerror = function(message){}
		//	onmessage는 외부에서 들어온 데이터를 받아서 처리를 하는 이벤트이다.
		websocket.onmessage = function(message){
			document.getElementById("state").innerHTML = message.data; 
		}
		
		function sendmessage()
		{
			//	메시지 박스에 있는 데이터를 전송한다.
			msg = document.getElementById("send").value;
			websocket.send(msg);
		}
	</script>
</body>
</html>

       

      WebSocketTest.jsp파일에서 Run as -> Run on Server를 선택해서 실행한다.

      처음에 실행하면 콘솔 창에 다음과 같은 문구가 뜬다.

      그리고 웹 페이지는 아래와 같다. 그리고 abc를 입력하고 전송 버튼을 눌러보자.

      그러면 콘솔 창에 다음과 같은 문구가 뜬다.

      그리고 웹 페이지는 다음과 같다.

       

       

      이번에는 src/socket 패키지의 WSocket.java 내용을 다음과 같이 변경해보자.

      WSocket.java 파일 내용

      더보기 
      package socket;

import java.util.Collections;
import java.util.Set;

import javax.websocket.OnClose;
import javax.websocket.OnError;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.RemoteEndpoint.Basic;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;

@ServerEndpoint("/wsocket")
public class WSocket 
{
	private static final Set<Session> sessions = Collections.synchronizedSet(
			new java.util.HashSet<Session>()
			);
	
	/*
	//	onopen 이벤트가 호출 되면 실행되는 함수
	@OnOpen
	public void handleOpen()
	{
		System.out.println("클라이언트가 접속했습니다.");
	}
	*/
	//	onopen 이벤트가 호출 되면 실행되는 함수
	@OnOpen
	public void handleOpen(Session session)
	{
		System.out.println("클라이언트가 접속했습니다.");
		System.out.println("session id : " +session.getId());
		sessions.add(session);
	}
	/*
	//	onclose 이벤트가 호출 되면 실행되는 함수
	@OnClose
	public void handleClose()
	{
		System.out.println("클라이언트가 연결을 해제했습니다.");
	}
	*/
	//	onclose 이벤트가 호출 되면 실행되는 함수
	@OnClose
	public void handleClose(Session session)
	{
		System.out.println(session.getId() + "클라이언트가 연결을 해제했습니다.");
		
		//	세션을 닫는다.
		sessions.remove(session);
	}
	
	//	onerror 이벤트가 호출 되면 실행되는 함수
	@OnError
	public void handleError(Throwable t)
	{
		t.printStackTrace();
	}
	/*
	//	onmessage 이벤트가 호출 되면 실행되는 함수
	@OnMessage
	public String handleMessage(String message)
	{
		//	서버가 받는다.
		System.out.println("클라이언트가 보내온 메시지 : ");
		System.out.println(message);
		
		return "메시지 수신 완료";
	}
	*/
	
	//	onmessage 이벤트가 호출 되면 실행되는 함수
	@OnMessage
	public void handleMessage(String message, Session session)
	{
		//	서버가 받는다.
		System.out.println("클라이언트가 보내온 메시지 : ");
		System.out.println(message);
		
		this.sendAll(session, message);
		
		try {
			final Basic basic = session.getBasicRemote();
			basic.sendText(message);
		}catch(Exception e) {}
	}
	
	public void sendAll(Session session, String message)
	{
		System.out.println(session.getId() + ":" +message);
		try {
			int i = 0;
			//	웹 소켓에 연결되어 있는 모든 아이디를 찾는다.	
			for (Session s : WSocket.sessions) 
			{
				System.out.println(++i);
				if (!s.getId().equals(session.getId()))
				{
					s.getBasicRemote().sendText(message);
				}
			}
		}catch(Exception e) {e.printStackTrace();}
	}
}

       

      그리고 WebSocketTest.jsp 파일을 실행하자.

      웹 페이지를 3개 정도 띄워 보자.

      이 세 웹 페이지 모두에 http://localhost:9090/WebSocketTest.jsp 이 주소를 적고 접속 하자. 

      세 웹 페이지들이 모두 하나의 그룹처럼 쓰여진 글들로 입력된다.

      아래와 같이 3개의 웹 페이지를 띄우자.

      위의 주소로 접속하면 콘솔 창에 다음과 같이 정보가 뜬다.

      열린 웹 페이지 중에 어느 하나에 아래와 같이 ert라고 적고 전송 버튼을 누르면

      모든 웹 페이지에 ert가 전송이 됨을 알 수 있다.

       

      'JAVA > 웹 프로그래밍 - JSP' 카테고리의 다른 글

      게시판 만들기 - 6. 게시판의 게시글에 답글 달기  (0) 2020.11.27
      게시판 만들기 - 5. DB에 저장한 게시글을 조회하고 읽기 가능하게 만들기  (0) 2020.11.26
      게시판 만들기 - 4. 게시판 글을 DB에 저장하기  (0) 2020.11.25
      게시판 만들기 - 3. 로그인 하고 세션 유지 & 로그인 상태에 따라 게시판 보기  (0) 2020.11.24
      게시판 만들기 - 2. 로그인 폼 만들기  (0) 2020.11.23

      관련글 관련글 더보기

      댓글

    Designed by Tistory.

    티스토리툴바