Spring Boot 프레임 워 크 에서 WebSocket 을 사용 하여 메시지 푸 시 를 실현 합 니 다.
8715 단어 springbootwebsocket
웹 소켓 이란 무엇 입 니까?
웹 소켓 은 브 라 우 저 와 서버 간 에 이중 비동기 통신 기능 을 제공 합 니 다.즉,우 리 는 브 라 우 저 를 이용 하여 서버 에 메 시 지 를 보 낼 수 있 고 서버 도 브 라 우 저 에 메 시 지 를 보 낼 수 있 습 니 다.현재 주류 브 라 우 저의 주류 버 전 은 웹 소켓 에 대한 지원 이 비교적 좋 은 편 이지 만 실제 개발 에서 웹 소켓 을 사용 하 는 작업량 이 약간 많 습 니 다.또한 브 라 우 저의 호 환 문 제 를 추 가 했 습 니 다.이 럴 때 저 희 는 웹 소켓 의 키 프로 토 콜 인 stomp 를 사용 하여 저희 의 기능 을 신속하게 실현 합 니 다.OK,웹 소켓 에 대해 서 는 더 이상 말 하지 않 겠 습 니 다.우 리 는 주로 어떻게 사용 하 는 지 에 달 려 있 습 니 다.
프로젝트 생 성
웹 소켓 을 사용 하려 면 먼저 Project 를 만들어 야 합 니 다.이 Project 의 생 성 방식 은 앞에서 말 한 것 과 같 습 니 다.다른 것 은 의존 을 선택 할 때 Thymeleaf 와 웹 소켓 의존 을 선택 하 는 것 입 니 다.다음 그림 과 같 습 니 다.
WebSocket 설정
Project 생 성 에 성공 한 후에 웹 소켓 을 설정 하고 다음 종 류 를 만 듭 니 다.
@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {
@Override
public void registerStompEndpoints(StompEndpointRegistry stompEndpointRegistry) {
stompEndpointRegistry.addEndpoint("/endpointSang").withSockJS();
}
@Override
public void configureMessageBroker(MessageBrokerRegistry registry) {
registry.enableSimpleBroker("/topic");
}
}
1@EnableWebSocketMessageBroker주 해 는 STOMP 프로 토 콜 을 사용 하여 프 록 시 기반 메 시 지 를 전송 하 는 것 을 표시 합 니 다.Broker 는 프 록 시 라 는 뜻 입 니 다.
2.registerStompEndpoints 방법 은 STOMP 프로 토 콜 을 등록 하 는 노드 를 표시 하고 매 핑 된 URL 을 지정 합 니 다.
3.stompEndpointRegistry.addEndpoint("/endpointSang").withSockJS();이 줄 코드 는 STOMP 프로 토 콜 노드 를 등록 하 는 동시에 SockJS 프로 토 콜 을 지정 합 니 다.
4.configureMessage Broker 방법 은 메시지 대 리 를 설정 하 는 데 사 용 됩 니 다.우 리 는 푸 시 기능 을 실현 하기 때문에 이곳 의 메시지 대 리 는/topic 입 니 다.
브 라 우 저 에서 메 시 지 를 보 내 는 수신 클래스 를 만 듭 니 다.
브 라 우 저가 보 낸 메 시 지 는 이 종류 로 받 습 니 다:
public class RequestMessage {
private String name;
public String getName() {
return name;
}
}
서버 가 브 라 우 저 에 게 되 돌아 오 는 메 시 지 는 이 종류 로 불 러 옵 니 다.
public class ResponseMessage {
private String responseMessage;
public ResponseMessage(String responseMessage) {
this.responseMessage = responseMessage;
}
public String getResponseMessage() {
return responseMessage;
}
}
@Controller
public class WsController {
@MessageMapping("/welcome")
@SendTo("/topic/getResponse")
public ResponseMessage say(RequestMessage message) {
System.out.println(message.getName());
return new ResponseMessage("welcome," + message.getName() + " !");
}
}스 크 립 트 추가
이 사례 는 STOMP 프로 토 콜 의 클 라 이언 트 스 크 립 트 stomp.js,SockJS 의 클 라 이언 트 스 크 립 트 sock.js 와 jQuery 세 개의 js 파일 이 필요 합 니 다.이 세 개의 js 파일 은 src/main/resources/static/js 디 렉 터 리 에 복사 되 었 습 니 다.OK,이 세 개의 js 파일 은 제 가 젊은이 들 을 위해 준 비 했 습 니 다.문 말 에 사례 를 직접 다운로드 할 수 있 습 니 다.사례 에 도 있 고 이 세 개의 js 파일 을 스스로 다운로드 할 수 있 습 니 다.
프레젠테이션 페이지
이 HTML 페이지 를 쓰기 전에 우리 가 실현 해 야 할 효과 가 어떤 지 먼저 말 하고 싶 습 니 다.내 Project 가 시 작 된 후에 브 라 우 저 에서 메 시 지 를 보 내 고 이 페이지 에 메 시 지 를 보 냅 니 다.서버 에서 이 메 시 지 를 받 은 후에 서버 에 연 결 된 모든 브 라 우 저 에 메 시 지 를 보 냅 니 다.OK,src/main/resources/templates 디 렉 터 리 에 ws.html 페이지 를 새로 만 듭 니 다.내용 은 다음 과 같 습 니 다.
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<title> WebSocket</title>
<script th:src="@{js/sockjs.min.js}"></script>
<script th:src="@{js/stomp.js}"></script>
<script th:src="@{js/jquery-3.1.1.js}"></script>
</head>
<body onload="disconnect()">
<noscript><h2 style="color: #e80b0a;">Sorry， WebSocket</h2></noscript>
<div>
<div>
<button id="connect" onclick="connect();"> </button>
<button id="disconnect" disabled="disabled" onclick="disconnect();"> </button>
</div>
<div id="conversationDiv">
<label> </label><input type="text" id="name"/>
<button id="sendName" onclick="sendName();"> </button>
<p id="response"></p>
</div>
</div>
<script type="text/javascript">
var stompClient = null;
function setConnected(connected) {
document.getElementById("connect").disabled = connected;
document.getElementById("disconnect").disabled = !connected;
document.getElementById("conversationDiv").style.visibility = connected ? 'visible' : 'hidden';
// $("#connect").disabled = connected;
// $("#disconnect").disabled = !connected;
$("#response").html();
}
function connect() {
var socket = new SockJS('/endpointSang');
stompClient = Stomp.over(socket);
stompClient.connect({}, function (frame) {
setConnected(true);
console.log('Connected:' + frame);
stompClient.subscribe('/topic/getResponse', function (response) {
showResponse(JSON.parse(response.body).responseMessage);
})
});
}
function disconnect() {
if (stompClient != null) {
stompClient.disconnect();
}
setConnected(false);
console.log('Disconnected');
}
function sendName() {
var name = $('#name').val();
console.log('name:' + name);
stompClient.send("/welcome", {}, JSON.stringify({'name': name}));
}
function showResponse(message) {
$("#response").html(message);
}
</script>
</body>
</html>
connect 방법 은 연결 단 추 를 눌 렀 을 때 실 행 됩 니 다.var socket=new SockJS('/endpointSang');연결 을 나타 내 는 SockJS 의 endpoint 이름 은/endpoint Sang,stompClient=Stomp.over(socket)입 니 다.STOMP 를 사용 하여 웹 소켓 클 라 이언 트 를 만 드 는 것 을 표시 합 니 다.그리고 stompClient 의 connect 방법 을 사용 하여 서버 를 연결 합 니 다.연결 이 성공 한 후에 setConnected 방법 을 사용 합 니 다.숨겨 진 숨겨 진 디 스 플레이 입 니 다.그리고 stompClient 에 있 는 subscribe 방법 을 호출 하여/topic/getResponse 에서 보 낸 메 시 지 를 구독 합 니 다.즉,저희 가 Controller 에 있 는 say 방법 에 추 가 된@SendTo 주해 의 인자 입 니 다.stompClient 의 send 방법 은 서버 에 메 시 지 를 보 내 는 것 을 나타 내 고 다른 것 은 모두 일반적인 js 용법 이 므 로 나 는 더 이상 군말 하지 않 겠 다.
뷰 컨트롤 러 설정
다음은 뉴스.html 에 경로 맵 을 제공 하 는 것 입 니 다.
@Configuration
public class WebMvcConfig extends WebMvcConfigurerAdapter {
@Override
public void addViewControllers(ViewControllerRegistry registry) {
registry.addViewController("/ws").setViewName("/ws");
}
}
나 는 맨 위의 브 라 우 저 에서 메 시 지 를 보 냈 고,다른 두 브 라 우 저 는 모두 나의 메 시 지 를 받 을 수 있 었 다.
OK,이상 은 우리 가 Spring Boot 프레임 워 크 에서 WebSocket 을 사용 하여 메시지 전송 을 실현 하 는 전 과정 입 니 다.
본 사례 다운로드 주소:demo
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Kotlin Springboot -- 파트 14 사용 사례 REST로 전환하여 POST로 JSON으로 전환前回 前回 前回 記事 の は は で で で で で で を 使っ 使っ 使っ て て て て て リクエスト を を 受け取り 、 reqeustbody で 、 その リクエスト の ボディ ボディ を を 受け取り 、 関数 内部 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
