봄 부트 학습은 계속됩니다. 이전 두 블로그에서 Spring Boot 컨테이너를 사용하여 웹 프로젝트를 구축하는 방법과 프로젝트에 HTTPS 지원을 추가하는 방법을 소개했습니다. 이 두 기사를 바탕으로 Spring Boot에서 WebSocket을 사용하는 방법을 살펴 보겠습니다.
WebSocket이란 무엇입니까?
WebSocket은 브라우저와 서버간에 이중 비동기 통신 기능을 제공하므로 브라우저를 사용하여 서버로 메시지를 보낼 수 있으며 서버는 브라우저에 메시지를 보낼 수도 있습니다. 현재 주류 브라우저의 주류 버전은 WebSocket을 지원하지만 실제 개발에서 WebSocket을 사용하는 워크로드는 약간 커지고 브라우저 호환 문제가 증가합니다. 현재 WebSocket의 서브 프로토콜을 사용하여 기능을 신속하게 구현할 가능성이 높습니다. 좋아, 나는 여기 WebSocket에 대해별로 말하지 않을 것입니다. 주로 사용 방법을 살펴 봅니다.
프로젝트 생성
WebSocket을 사용하려면 먼저 프로젝트를 만들어야합니다. 이 프로젝트의 제작 방법은 이전 기사에서 말한 것과 동일합니다 (처음으로 Spring Boot Framework에 대해 배웁니다). 차이점은 종속성을 선택할 때 아래 그림과 같이 Thymeleaf 및 WebSocket 종속성을 선택한다는 것입니다.
WebSocket 구성
프로젝트가 성공적으로 생성 된 후 먼저 WebSocket을 구성하고 다음 클래스를 만듭니다.
@configuration @enableWebSocketMessageBrokerPublic Class WebSocketConfig를 확장합니다. } @override public void configuremessageBroker (MessageBrokerRegistry Registry) {registry.enablesimpleBroker ( "/topic"); }}이 카테고리에 대해 다음과 같은 점을 말할 것입니다.
1@enableWebSocketMessageBroker 주석은 스톰프 프로토콜이 프록시 기반 메시지를 전송할 수있게 함을 의미합니다. 중개인은 대리를 의미합니다.
2. RegisterStompendPoints 메소드는 스톰프 프로토콜을 등록하고 매핑 된 URL을 지정하는 노드를 나타냅니다.
3. StompendPoinTregistry.AdDendPoint ( "/endPointSang"). WishSockjs (); 이 코드 라인은 스톰프 프로토콜 노드를 등록하는 데 사용되며 Sockjs 프로토콜의 사용을 지정합니다.
4. ConfigureMessageBroker 메소드는 메시지 브로커를 구성하는 데 사용됩니다. 우리는 푸시 함수를 구현하기 때문에 여기의 메시지 중개인은 /주제입니다.
브라우저가 메시지를 보내기 위해 수신 클래스를 만듭니다.
브라우저에서 보낸 메시지는이 클래스를 사용하여 수신됩니다.
공개 클래스 requestMessage {개인 문자열 이름; 공개 문자열 getName () {return name; }}응답 메시지 클래스를 만듭니다
서버가 브라우저로 반환 한 메시지는이 클래스에서 운반됩니다.
공개 클래스 ResponseMessage {private String responseMessage; public responseMessage (String responseMessage) {this.ResponsEmessage = responseMessage; } public String getResponsEmessage () {return responseMessage; }}컨트롤러를 만듭니다
@ControllerPublic 클래스 wscontroller {@messagempapp ( "/welcome") @sendto ( "/topic/getResponse") public responsemessage says (requestMessage message) {system.out.println (message.getname ()); 새 ResponseMessage ( "환영", " + message.getName () +"! ")을 반환합니다. }}이 컨트롤러와 관련하여 우선 @controller 주석에 대해 많이 말할 필요가 없습니다. Say 메소드에 추가 된 @MessAgemapping 주석은 이전에 사용한 @requestmapping과 유사합니다. @Sendto 주석은 서버에 푸시 해야하는 메시지가 있으면 @Sendto의 경로에 구독 한 브라우저로 메시지가 전송됩니다.
스크립트를 추가하십시오
이 경우 3 개의 JS 스크립트 파일, 즉 Stomp 프로토콜의 클라이언트 스크립트 stomp.js, client script sock.js of sockjs 및 jQuery가 필요합니다. 이 3 개의 JS 파일은 SRC/Main/Resources/STATIC/JS 디렉토리에 복사됩니다. 좋아, 나는 친구들을 위해이 세 가지 JS 파일을 준비했다. 기사의 끝에서 직접 케이스를 다운로드 할 수 있습니다. 사례에 사례가 있거나이 세 JS 파일을 직접 다운로드 할 수 있습니다.
데모 페이지
이 HTML 페이지를 작성하기 전에 먼저 우리가 달성하려는 효과에 대해 이야기하고 싶습니다. 프로젝트가 시작되면 브라우저에서 메시지 전송 페이지에 액세스하고 해당 페이지에서 메시지를 보냅니다. 서버 가이 메시지를 수신하면 서버에 연결된 모든 브라우저로 메시지가 전송됩니다. 좋아, 우리는 다음 내용으로 SRC/Main/Resources/Templates 디렉토리에 새 WS.HTML 페이지를 만듭니다.
<html lang = "en"xmlns : th = "http://www.thymeleaf.org"> <head> <meta charset = "utf-8"/> <title> 방송 웹 소켓 </title> <script th : src = "@{js/bockjs.min.js}"> </script> </script> < Th : src = "@{js/stomp.js}"> </script> <script th : src = "@{js/jquery-3.1.js}"> </script> </head> <body onload = "disconnect ()"> <noscript> <h2 style = "색상 : #e80b0a; webSocket </h2> </noscript> <div> <div> <버튼 id = "Connect"onclick = "connect ();"connect (); "> connect </button> <button id ="distonnect "disabled ="disabled "onclick ="disconnect (); "> distonnect </div> <div id ="nampontDiv "> <input type ="input <input <input </div> <div id = "div id ="inforctionDiv "; <button id = "sendName"onclick = "sendName ();"> send </button> <p id = "response"> </p> </div> </div> <script type = "text/javaScript"> var stompclient = null; 함수 setConnected (Connected) {document.getElementById ( "Connect"). disabled = connected; document.getElementById ( "Disternect"). disabled =! Connected; document.getElementById ( "ConfertentDiv"). Style.visibility = Connected? 'Visible': 'hidden'; // $ ( "#connect"). disabled = connect; // $ ( "#disternect"). disabled =! connected; $ ( "#response"). html (); } function connect () {var socket = new sockjs ( '/endpointsang'); stompclient = stomp.over (소켓); stompclient.connect ({}, function (frame) {setConnected (true); console.log ( 'connected :' + frame); stompclient.subscribe ( '/topic/getResponse', function (response) {showResponse (json.parse (response.body) .RespOnSemessage);}); } function disternect () {if (stompclient! = null) {stompclient.disconnect (); } setConnected (false); Console.log ( 'Distronceded'); } function sendName () {var name = $ ( '#name'). val (); console.log ( 'name :' + name); stompclient.send ( "/환영", {}, json.stringify ({ 'name': name})); } 함수 showResponse (메시지) {$ ( "#response"). html (메시지); } </script> </body> </html>여기에는 코드가 조금 더 있지만 신중하게 분석하는 것은 매우 간단합니다. 우선, JS 파일에서 소개 한 부분에 대해서는 이야기하지 않습니다. 여기서 이해하지 못하면 Spring Boot를 사용하여 웹 프로젝트를 개발할 수 있습니다. 그런 다음 페이지에 두 개의 버튼이 있으며 하나는 연결이고 다른 하나는 연결이 끊어집니다. 두 버튼은 다른 클릭 이벤트에 해당합니다. 이 두 버튼 아래에는 입력 상자가 있으며,이 버튼은 우리가 보내려고하는 내용이며 보내기 버튼이 있습니다. 전송 버튼은 메시지를 보내기위한 클릭 이벤트에 해당합니다. 이것은 전체 페이지의 요소이며 매우 간단합니다. JS 논리 코드에 중점을 두겠습니다.
연결 버튼을 클릭하면 연결 메소드가 실행됩니다. var socket = new sockjs ( '/endpointsang'); 연결된 SOCKJS의 끝점 이름이 /endPointSang, stompclient = stomp.over (소켓)임을 의미합니다. Stomp를 사용하여 WebSocket 클라이언트를 작성하는 것을 의미합니다. 그런 다음 stompclient의 Connect 메소드를 호출하여 서버에 연결하십시오. 연결이 성공한 후에는 SetConnected 메소드를 호출하여 숨겨진 것을 숨기고 표시된 내용을 표시하십시오. 그런 다음 stompclient의 구독 메소드를 호출하여 /topic /getResponse가 보낸 메시지, 즉 컨트롤러의 Say 메소드에 추가 한 @SendTo 주석의 매개 변수를 구독합니다. stompclient의 보내기 메소드는 서버에 메시지를 보내는 것을 의미하고 나머지는 모두 정기적 인 JS 사용법입니다. 나는 그것을 반복하지 않을 것이다.
ViewController를 구성하십시오
다음은 ws.html에 대한 경로지도를 제공하는 것입니다.
@ConfigurationPublic Class WebMvcConfig는 WebMvcConfigurerAdapter {@override public void addViewControllers (viewControllerRegistry Registry) {registry.addViewController ( "/ws"). setViewName ( "/ws"); }}좋아,이 모든 일을 한 후에 우리는 프로젝트를 실행할 수 있습니다. 여러 브라우저를 동시에 열고 그 중 하나에 메시지를 보냅니다. 결과를 보자 :
상단 브라우저에서 메시지를 보내고 다른 브라우저는 메시지를받습니다.
자, 위는 Spring Boot 프레임 워크에서 WebSocket을 사용하여 메시지 푸시를 구현하는 전체 프로세스입니다.
이 사례의 주소를 다운로드하십시오 : 데모
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.