websocket 실시간 알림.

개발/코딩 2020. 5. 13. 15:38

websocket : 사용자의 브라우저와 서버 사이의 인터렉티브 통신 세션을 설정할 수 있게 하는 기술.

 

## pom.xml 에 아래를 추가 한다 ##

<dependency>
  <groupId>org.springframework</groupId>
  <artifactId>spring-websocket</artifactId>
  <version>4.2.4.RELEASE</version>
</dependency>

 

## servlet-context.xml (전자정부프레임워크에선 egov-com-servlet.xml) ##

<bean id = "echoHandler" class="egovframework.plantation.web.websocket"/>

<websocket:handlers>

  <websocket:mapping handler="echoHandler" path="/websocket/echo.do" />

</websocket:handlers>

// localhost:8080/websocket/echo.do 를 호출하면 echoHandler를 가진 id 인 class 를 호출하게 된다

 

## websocket.java ##

package egoveframework.plantation.web;

import java.util,ArrayList;

import java.util.List;

import org.springframework.web.socket.CloseStatus;

import org.springframework.web.socket.CloseStatusTextMessage;

import org.springframework.web.socket.CloseStatusWebSocketSession;

import org.springframework.web.socket.handler.CloseStatusTextWebSocketHandler;

 

public class websocket extends TextWebSocketHandler{
  private List<WebSocketSession>sessionList = new ArrayList<WebSocketSession>();

 

  @Override

  public void afterConnectionEstablished(WebSocketSession session) throws Exception {

    sessionList.add(session); //접속되어 있는 유저들을 담는다

    System.out.println("연결됨 : " +session.getId());

  }

  // 클라이언트가 서버로 메시지를 전송했을 때 실행되는 메서드

  @Override

  protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {

    System.out.println("받음 : "+message);

    String senderId = session.getId();

    for(WebSfor (WebSocketSession sess : sessionList) {

      sess.sendMessage(new TextMessage(senderId +" : " + message.getPayload()));

    }

  }

  // 클라이언트와 연결을 끊었을 때 실행되는 메소드

  @Override

  public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {

    sessionList.remove(session);

    System.out.println("끊김 : "+ session.getId());

  }

}

 

## top.jsp (어느 페이지에 있던 알림을 받기 위해서 공통적으로 쓰이는 페이지) ##

<div id="socketAlert" class="alert alert-success" role="alert" style="display:none;"></div>

<script>

  var socket = null;  //전역 변수로 선언

  $(document).ready(function(){
    connectWS();
  });

  function connectWS(){

    var ws = new WebSocket("ws://localhost:8080/websocket/echo.do");

    socket = ws;

    ws.open = function(message){

     console.log(message);

    };

    ws.onmessage = function(event){

      $("#socketAlert").text(event.data);

      $("#socketAlert").css("display", "block");

    };

    ws.onclose = function(event){

      console.log("Server disConnect");

    };

    ws.onerror = function(event){

      console.log("Server Error");

    };

</script>

 

## 클라이언트 화면 ##

<input id="btnSend" value="Send" type="button"> 
<input type="text" id="msg" value="1212테스트test" class="form-control" />

 

<script>

  $(document).ready(function(){

    $("#btnSend").on("click", function(evt){

      evt.preventDefault();

      if(socket.readyState != 1) return;

      let msg = $("#msg").val();

      socket.send(msg); //소켓에 입력된 메시지를 보낸다

    )};

  });

</script>

 

 

== 더 간단한 방법 아래 참조==

https://nowonbun.tistory.com/285

 

[Java] Servlet에서 사용하는 웹 소켓 (WebSocket)

안녕하세요. 명월입니다. 이 글은 Java의 Servlet에서 사용하는 웹 소켓 (WebSocket) 에 대한 글입니다. 보통의 웹 환경은 브라우저(클라이언트)에서 웹 서버에 Html 문서를 요청하면, 웹 서버는 Html를 작

nowonbun.tistory.com

 

== 위 참조한걸 바탕으로 내 소스 적용 ==

jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
  <head>
    <c:import url="/layout/header.do"></c:import>
</head>
  <body>
    <form>
      <!-- 송신 메시지를 작성하는 텍스트 박스 -->
      <input id="textMessage" type="text" style="padding-top:100px;">
      <!-- 메시지 송신을 하는 버튼 -->
      <input onclick="sendMessage()" value="Send" type="button">
      <!-- WebSocket 접속 종료하는 버튼 -->
      <input onclick="disconnect()" value="Disconnect" type="button">
    </form>
    <br />
    <!-- 콘솔 메시지의 역할을 하는 로그 텍스트 에리어.(수신 메시지도 표시한다.) -->
    
    <script type="text/javascript">
  // 「WebSocketEx」는 프로젝트 명
  // 「websocket」는 호스트 명
  // WebSocket 오브젝트 생성 (자동으로 접속 시작한다. - onopen 함수 호출)
var webSocket = new WebSocket("ws://localhost:8080/WebSocketEx/websocket.do");
  // 콘솔 텍스트 에리어 오브젝트
  var messageTextArea = $(".messageTextArea").val();
  // WebSocket 서버와 접속이 되면 호출되는 함수
  webSocket.onopen = function(message) {
  $(".messageTextArea").val("Server connect...\n"); // 콘솔 텍스트에 메시지를 출력한다.
};
// WebSocket 서버와 접속이 끊기면 호출되는 함수
webSocket.onclose = function(message) {
$(".messageTextArea").val($(".messageTextArea").val()+"Server Disconnect...\n"); // 콘솔 텍스트에 메시지를 출력한다.
};
// WebSocket 서버와 통신 중에 에러가 발생하면 요청되는 함수
webSocket.onerror = function(message) {
$(".messageTextArea").val($(".messageTextArea").val()+"error...\n"); // 콘솔 텍스트에 메시지를 출력한다.
};
// WebSocket 서버로 부터 메시지가 오면 호출되는 함수
webSocket.onmessage = function(message) {
$(".messageTextArea").val($(".messageTextArea").val()+"Recieve From Server => "+message.data+"\n"); // 콘솔 텍스트에 메시지를 출력한다.
};
  // Send 버튼을 누르면 호출되는 함수
function sendMessage() {
var message = $("#textMessage").val(); // 송신 메시지를 작성하는 텍스트 박스 오브젝트를 취득한다.
$(".messageTextArea").val($(".messageTextArea").val()+"Send to Server => "+message+"\n"); // 콘솔 텍스트에 메시지를 출력한다.
webSocket.send(message); // WebSocket 서버에 메시지를 송신한다.
message.value = ""; // 송신 메시지를 작성하는 텍스트 박스를 초기화한다.
}
// Disconnect 버튼을 누르면 호출되는 함수
function disconnect() {
webSocket.close(); // WebSocket 접속 해제
}
</script>
</body>
</html>

java

package egovframework.main.service;

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

@ServerEndpoint("/WebSocketEx/websocket.do")
public class websocket {
// WebSocket으로 브라우저가 접속하면 요청되는 함수
@OnOpen
public void handleOpen() {
// 콘솔에 접속 로그를 출력한다.
System.out.println("client is now connected...");
}
// WebSocket으로 메시지가 오면 요청되는 함수
@OnMessage
public String handleMessage(String message) {
// 메시지 내용을 콘솔에 출력한다.
System.out.println("receive from client : " + message);
// 에코 메시지를 작성한다.
String replymessage = "echo " + message;
// 에코 메시지를 콘솔에 출력한다.
System.out.println("send to client : "+replymessage);
// 에코 메시지를 브라우저에 보낸다.
return replymessage;
}
// WebSocket과 브라우저가 접속이 끊기면 요청되는 함수
@OnClose
public void handleClose() {
// 콘솔에 접속 끊김 로그를 출력한다.
System.out.println("client is now disconnected...");
}
// WebSocket과 브라우저 간에 통신 에러가 발생하면 요청되는 함수.
@OnError
public void handleError(Throwable t) {
// 콘솔에 에러를 표시한다.
t.printStackTrace();
}

}

'개발 > 코딩' 카테고리의 다른 글

ajax, JSON 사용하기  (0) 2020.05.28
JSON 데이터 추출  (0) 2020.05.15
자바스크립트 문자열 치환  (0) 2020.04.24
java file resize (이미지 사이즈) 수정하기  (0) 2020.03.24
자바 다른 서버로 sftp 파일 전송  (0) 2020.03.23
,

티스토리툴바