[websocket]스프링 웹소켓을 이용한 클라이언트 서버 양방향 통신, url을 통해 websocket서버로 보내기, url을 통한 실시간 소켓알람

1. websocket 넣기

websocket을 pom.xml dependency에 등록해준다

<!-- web socket -->
<dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-websocket</artifactId>
    <version>${spring.maven.artifact.version}</version>
</dependency>

버전은 스프링 버전에 맞춰줬다. 

그게 아니면 스프링 버전에 맞게 4.3.15 이런식으로 써줘도 된다

 

 

 

 

 

변수를 쓰기 위해서는 properties에서 등록해놓고 쓰면 된다.

가끔 바뀔 수도 있으니 이렇게 한 번에 바꿀 수 있도록 설정해놓는 것이 좋다

<properties>
    <spring.maven.artifact.version>4.3.25.RELEASE</spring.maven.artifact.version>
    <egovframework.rte.version>3.10.0</egovframework.rte.version>
</properties>

 

 

 

 

2. WebConfig등록

import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.config.annotation.EnableWebSocket;
import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;

import servlet.controller.main.Websocket;


@Configuration
@EnableWebSocket
public class WebConfig implements WebSocketConfigurer {

    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(new Websocket(), "/ws");
    }
}

websocketconfigurer을 implement한 webconfig 설정을 해준다

Websocket()은 새롭게 생성해줘야하며 엔드포인트를 작성해주면 된다

spring websocket을 사용한 것이 아니라 javaEE를 통한 소켓통신이므로 이 부분은 필요가 없다

 

3. Websocket설정

package servlet.controller.main;
import java.io.IOException;
import java.util.Collections;
import java.util.HashSet;
import java.util.Set;

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

import org.springframework.stereotype.Component;
import org.springframework.web.socket.handler.TextWebSocketHandler;
@ServerEndpoint("/ws")
@Component
public class Websocket extends TextWebSocketHandler {

   // 연결된 모든 세션을 저장하는 Set
    private static Set<Session> sessions = Collections.synchronizedSet(new HashSet<>());
	
	@OnOpen
	public void handleOpen(Session session) {
		System.out.println("client is now connected...");
		//session 추가
		sessions.add(session);
	}
	@OnMessage
	public void receiveMessage(String message, Session session) throws IOException {
		if(message != null) {
			System.out.println("Message : " + message);
			String sendMessage = "서버에서 보냅니다";
			System.out.println("sendMessage: " + sendMessage);
			System.out.println(sessions);
			for (Session s : sessions) {
				s.getBasicRemote().sendText(sendMessage);
			}
		}
	}
	
    @OnClose
    public void onClose(Session session) {
        // 연결이 종료된 세션을 Set에서 제거
        sessions.remove(session);
    }

}

• 중요한것은 server endpoint를 넣어줘야한다 (이거 때문에 좀 헤맴..ㅎㅎ)
• 플랫폼이 켜져있는 모든 세션에 대해 메시지를 날릴 것이기 때문에 socket에 접속하면 session도 추가해준다
• 나는 url parameter를 통해 가져오기 때문에 websocket server를 항상 연결해놔야됐다
  그래서 message 가 null이 아닌 경우에만 message를 받로록 해놨다
• session모두에게 보내기 위해서 for문으로 돌려준다
• websocket을 쓴다면 handleTextMessage를 override해서 사용하면 되는데 나는 설정에서 좀 꼬였기 때문에 receiveMessage를 사용하겠다

 

 

 

4. javascript에서 websocket 이벤트 설정

let socket = new WebSocket("ws://localhost:8080/ws");
	// URL 파라미터 가져오기
	var urlParams = new URLSearchParams(window.location.search);
	var idAlert = urlParams.get('idAlert'); // URL에 ?idAlert=123 형태로 전달된 값을 가져옵니다.

	// socket open event 
	socket.onopen = function(event) {
		console.log("websocket server is open now.");

		// idAlert있을 때 server로 통신
		if(idAlert){
			socket.send(idAlert);
		}
	};
	// server -> client로 올 때 event 처리
	socket.onmessage = function(event) {
		console.log("websocket server message received:", event.data);
		var text = event.data;
		if(text) {
			$('article.floating-msg-layer').fadeIn();
		}
	};
	// socket close event
	socket.onclose = function(event) {
		console.log("websocket server is closed now.");
	};

	// socket error event
	socket.onerror = function(event) {
		console.error("websocket server error observed:", event);
	};

나는 url parameter를 가져오고 싶었기 때문에 일단 socket을 연결해놓고

url parameter가 있을 경우에만 socket.send를 통해 값을 보내줬다

그 이후에는 onmessage를 통해 message를 받는데 여기서 원하는 코드를 실행시켜주면된다

 

 

url로 보낸 param을 받아서 팝업창을 띄워줄 수 있고 

세션을 받기 때문에 모든 브라우저에서 실시간으로 알람이 뜨는 것을 확인할 수 있음