Spring Boot Learning continua. Nos dois blogs anteriores, introduzimos como usar os contêineres de inicialização da primavera para criar um projeto da web e como adicionar suporte HTTPS ao nosso projeto. Com base nesses dois artigos, vamos dar uma olhada em como usar o WebSocket no Spring Boot hoje.
O que é webSocket
O WebSocket fornece função de comunicação assíncrona duplex entre o navegador e o servidor, o que significa que podemos usar o navegador para enviar mensagens para o servidor, e o servidor também pode enviar mensagens para o navegador. Atualmente, a versão convencional dos navegadores convencionais suporta WebSocket, mas a carga de trabalho do uso do Websocket no desenvolvimento real será um pouco maior e o problema de compatibilidade do navegador será aumentado. No momento, é mais provável que usem um subprotocolo do WebSocket para implementar rapidamente nossas funções. Ok, não vou dizer muito sobre o WebSocket aqui, analisamos principalmente como usá -lo.
Criação do projeto
O uso do WebSocket exige que criemos um projeto primeiro. O método de criação deste projeto é o mesmo que dissemos no artigo anterior (primeiro aprendi sobre a estrutura de inicialização da primavera). A diferença é que, ao escolher uma dependência, escolhemos as dependências Thymeleaf e WebSocket, conforme mostrado na figura abaixo:
Configurando o WebSocket
Depois que o projeto é criado com sucesso, configuramos primeiro o WebSocket e criamos a seguinte classe:
@Configuration @EnableWebSocketMessageBrokerPublic Classe WebSocketConfig Estende abstrumwebSocketMessageBrokerConfigurer {@Override public void RegisterStompendPoints (StomPendPoIntRegistry; } @Override public void ConfigureMessageBroker (MessageBrokerRegistry Registry) {Registry.enablesImpLeBroker ("/tópico"); }}Vou dizer os seguintes pontos sobre esta categoria:
1@EnableWebSocketMessageBroker Anotação significa que o protocolo Stomp está habilitado a transmitir mensagens baseadas em proxy. Broker significa proxy.
2. O método RegisterStompendPoints representa o nó que registra o protocolo Stomp e especifica o URL mapeado.
3.STOMPENDPOINTREGTISTRO.ADDENDPOND ("EndPointSang"). Withsockjs (); Essa linha de código é usada para registrar o nó do protocolo Stomp e também especifica o uso do protocolo SOCKJS.
4.ConfigureMessageBroker O método é usado para configurar o corretor de mensagens. Como implementamos a função push, o corretor de mensagens aqui é /tópico
Crie uma aula de recepção para o navegador enviar mensagens
As mensagens enviadas pelo navegador são recebidas usando esta classe:
classe pública RequestMessage {private String Name; public String getName () {Return Name; }}Crie uma classe de mensagem de resposta
A mensagem retornada pelo servidor ao navegador é transportada por esta classe:
classe pública Responsemessage {private String Responsemessage; public Responsemessage (String Responsemessage) {this.Responsemessage = Responsemessage; } public string getResponsemessage () {return Responsemessage; }}Criar um controlador
@ControllerPublic Classe WSController {@MessageMapping ("/Welcome") @sendto ("/tópico/getResponse") public Responsemessage diz (requestMessage message) {System.out.println (message.getName ()); Retornar novo Responsemessage ("Bem -vindo" + message.getName () + "!"); }}Em relação a esse controlador, antes de tudo, não há necessidade de dizer muito sobre a anotação @Controller. A anotação @MessageMapping adicionada ao método Say é semelhante ao @RequestMapping que usamos antes. A anotação @sendto significa que, quando o servidor tiver uma mensagem que precisa ser pressionada, uma mensagem será enviada para o navegador subscrito ao caminho em @sendto.
Adicione o script
Nesse caso, precisamos de três arquivos de script JS, a saber, o script do cliente Stomp.js do protocolo Stomp, o script do cliente Sock.js of Sockjs and jQuery. Esses três arquivos JS são copiados para o diretório SRC/Main/Resources/Static/JS. OK, eu preparei esses três arquivos JS para meus amigos. Você pode baixar o caso diretamente no final do artigo. Existem casos nos casos, ou você pode baixar esses três arquivos JS sozinho.
Página de demonstração
Antes de escrever esta página HTML, quero falar primeiro sobre qual é o efeito que estamos tentando alcançar. Depois que meu projeto é iniciado, acesse a página de envio de mensagens no navegador e envio uma mensagem nessa página. Quando o servidor recebe esta mensagem, uma mensagem é enviada a todos os navegadores conectados ao servidor. OK, criamos uma nova página ws.html no diretório SRC/Main/Recursos/Modelos, com o seguinte conteúdo:
<html lang = "pt" xmlns: th = "http://www.thymeleaf.org"> <head> <meta charset = "utf-8"/> <title> transmite websocket </title> <script th: src = "@{js/sockjs.minjs} th: src = "@{js/stomp.js}"> </script> <script th: src = "@{js/jQuery-3.1.1.js}"> </sCript> </head> <corpo onload = "desconnect ()"> <Noscript> <H2 Style = "" cor: #e80: WebSocket </h2> </noscript> <div> <div> <botão id = "Connect" onclick = "Connect ();"> CONNECT </button> <botão id = "desconect" desativado = "desativado" onclick = "Desconect ();"> Desconect </button> <//div "<div" = "conversiv"> <belt); <button id = "sendName" onclick = "sendName ();"> send </button> <p id = "resposta"> </p> </div> </div> <script type = "text/javascript"> var stompclient = null; função setConnected (conectada) {document.getElementById ("Connect"). Disabled = Connected; document.getElementById ("desconecte"). desativado =! conectado; document.getElementById ("conversionDiv"). style.visibility = conectado? 'visível': 'Hidden'; // $ ("#Connect"). desativado = conectado; // $ ("#desconectar"). desativado =! conectado; $ ("#resposta"). html (); } function Connect () {var soket = new Sockjs ('/endpointSang'); stompClient = stomp.over (soquete); stompClient.connect ({}, function (quadro) {setConnected (true); console.log ('conectado:' + frame); stompclient.subScribe ('/tópico/getResponse', function (resposta) {ShowResponse (json.Parse (resposta.body) .Responsemessage); } function desconect () {if (stompClient! = null) {stompclient.disconnect (); } setConnected (false); console.log ('desconectado'); } função sendName () {var name = $ ('#nome'). val (); console.log ('nome:' + nome); Stompclient.send ("/Welcome", {}, json.stringify ({'nome': nome})); } função showResponse (mensagem) {$ ("#resposta"). html (mensagem); } </script> </body> </html>Embora haja um pouco mais de código aqui, é muito simples analisá -lo com cuidado. Primeiro de tudo, não falarei sobre a parte introduzida pelo arquivo JS. Se você não entende aqui, pode se referir ao uso da Spring Boot para desenvolver um projeto da Web. Depois, há dois botões em nossa página, um é uma conexão e o outro é uma desconexão. Os dois botões correspondem a diferentes eventos de clique. Há uma caixa de entrada abaixo desses dois botões, que é o conteúdo que queremos enviar e, em seguida, há um botão Enviar. O botão Enviar corresponde a um evento de clique para enviar uma mensagem. Este é um elemento de toda a página, muito simples. Vamos nos concentrar no código lógico JS aqui.
O método de conexão é executado quando clico no botão de conexão. var soket = new sockjs ('/endpointSang'); significa que o nome do terminal das meias conectadas é /endpointSang, stompclient = stomp.over (soquete); significa que usar Stomp para criar um cliente da WebSocket. Em seguida, ligue para o método Connect no StompClient para conectar -se ao servidor. Depois que a conexão for bem -sucedida, chame o método setConnected, que oculta o oculto e exibe o exibido. Em seguida, chamando o método de inscrição no StompClient para assinar a mensagem enviada por /tópico /getResponse, ou seja, o parâmetro da anotação @sendto que adicionamos ao método Say no controlador. O método de envio no StompClient significa enviar uma mensagem ao servidor, e o restante são todos os usos regulares do JS. Não vou repetir.
Configure o ViewController
Em seguida, é fornecer mapas de caminho para Ws.html:
@ConfigurationPublic Class webmvcConfig estende o webmvcconfigurerAdapter {@Override public void AddViewControllers (ViewControllerRegistry Registry) {Registry.addviewController ("/ws"). SetViewName ("/ws"); }}OK, depois de fazer tudo isso, podemos executar o projeto. Abro vários navegadores ao mesmo tempo e envio uma mensagem para um deles. Vamos ver os resultados:
Enviei mensagens no navegador superior e os dois outros navegadores recebem mensagens minhas.
OK, o acima é o processo inteiro de usar o WebSocket para implementar a mensagem Push na estrutura de inicialização da primavera.
Download Endereço deste caso: demonstração
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.