Websocket 구현

안녕하세요! 고고뜌지입니다

오늘은 Websocket에 대해 리뷰를 남길려고 합니다!

---

WebSocket 이란?

   * 서버와 클라잉너트 간의 메시지 교환을 위한 통신 규약 

   * 양반향 통신 

 

웹환경에서 개발을 하였을때  rest Api 을 통한 request / response 하는 단방향 통신을 사용하여 보통 개발을 했지만 해당 프로젝트에서는 양반향 통신 기술을 요구하여 websocket에 대해 스터디를 하게 되었습니다 ㅠㅠ 엉엉 

 

FRONTEND

  * sock.js 사용

        -> 이유는 호환율이 높은것으로 보여 해당 라이브러리를 사용했습니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/sockjs-client/1.4.0/sockjs.min.js"></script>

[CDN] 

// 연결시도  var socket = new SockJS('/chating'); // 연결완료 socket.onopen = function (e){ }; // 메시지 왔을때  socket.onmessage = function (e){    } // 서버에 메시지 보내기  function sendMessage(){         socket.send("룰루랄랄"); }

[ javascript 코드 ]

 

해당과 같이 구현을 하면은 프론트에서는 연결완료! 

 

메시지 연결 확인 

  *  F12 [개발자 모드]  -> Network 

  * 아래의 그림과 같이 websocket 이라는 리스트가 나오고 

  * messages 탭에서 오고가는 메시지가 확인이 가능하다 / 빨간색은 내가 보낸고!

연결된 화면

BACKEND

   * 먼저 Websocket을 지원해주는 라이브러리를 추가!

<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> </dependency>

[ maven ]

 

   * 그다음에 WebSocketConfig.java 파일 추가 

   * path 와 handler 파일을 잘 넣어주고!

package com.example.websocket; import org.springframework.beans.factory.annotation.Autowired; 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; @Configuration @EnableWebSocket public class WebSocketConfig WebSocketConfigurer{   @Autowired   private WebSocketHandler webSocketHandler;   @Override   public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {     // WebSocketHandler를 추가     registry.addHandler(webSocketHandler, "/chating").withSockJS();   }; }

[ WebSocketConfig.java 코드 ] 

 

  * WebSocketHandler.JAVA 파일도 추가!

package com.example.websocket; import java.util.HashMap; import java.util.Iterator; import java.util.Map; import org.json.JSONObject; 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; @Component public class WebSocketHandler extends TextWebSocketHandler {   Map<WebSocketSession, String> user = new HashMap<WebSocketSession, String>();   /* 클라이언트로부터 메시지 수신시 동작 */    @Override   public void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {   }   /* 클라이언트가 소켓 연결시 동작 */   @Override   public void afterConnectionEstablished(WebSocketSession session) throws Exception {   }   /* 클라이언트가 소켓 종료시 동작 */   @Override   public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {     user.remove(session);   } }

[ WebSocketHandler.java 코드 ]

 

이렇게 하면은 완료!! 

 

작동되는 화면 

 

 

git 경로 

https://github.com/sara0608/websocket.git