SockJS no Spring Boot
No Spring Boot, SockJSé uma solução de compatibilidade para implementação do WebSocket. Este artigo apresentará SockJSo princípio, o uso e o código de amostra do .
O que é SockJS
SockJSÉ um protocolo de comunicação entre o navegador e o servidor, que pode estabelecer um canal de comunicação bidirecional baseado em HTTP entre o navegador e o servidor. SockJSA função principal é fornecer uma solução de compatibilidade WebSocket, para que os navegadores que não suportam WebSocket também possam usar WebSocket.
SockJSUma camada de compatibilidade WebSocket é implementada, que pode estabelecer um canal de comunicação baseado em HTTP entre o navegador e o servidor e, em seguida, conduzir a comunicação bidirecional por meio desse canal. Quando o navegador não oferece suporte a WebSocket, SockJSele alternará automaticamente para polling ou long-polling para comunicação.
Princípio do SockJS
SockJSO princípio do WebSocket é realizar a comunicação bidirecional do WebSocket estabelecendo um canal de comunicação baseado em HTTP. Quando o navegador oferece suporte a WebSocket, SockJSele usará WebSocket diretamente para comunicação; quando o navegador não oferece suporte a WebSocket, SockJSele alternará automaticamente para polling ou long-polling para comunicação.
Ao usar SockJS, primeiro você precisa introduzir sockjs-client.jse no lado do cliente e no lado do servidor respectivamente sockjs-servere, em seguida, new SockJS(url)estabelecer uma SockJSconexão no lado do cliente por meio de .
A comunicação entre o cliente e o servidor é baseada em eventos, quando o cliente envia uma mensagem, o servidor aciona um onmessageevento e então envia a mensagem de volta para o cliente. Depois que o cliente receber a mensagem, ele acionará um onmessageevento e processará a mensagem recebida.
Como usar Sock JS
É muito simples de usar.No SockJSSpring Boot, você só precisa adicionar o seguinte conteúdo ao arquivo de configuração:
spring:
websocket:
enabled: true
broker:
relay-host: localhost
relay-port: 61613
user: guest
password: guest
relay-path: /stomp
A configuração acima indica que o WebSocket está ativado e as mensagens são enviadas para a porta localhostde 61613, guest/guesto nome de usuário e a senha de são usados para autenticação e /stompo caminho de é usado para transmissão de mensagens.
Em seguida, precisamos estabelecer uma conexão no cliente SockJSe implementar onmessageo método callback do evento. código mostra como abaixo:
var socket = new SockJS('/gs-guide-websocket');
stompClient = Stomp.over(socket);
stompClient.connect({
}, function(frame) {
stompClient.subscribe('/topic/greetings', function(greeting){
showGreeting(JSON.parse(greeting.body).content);
});
});
No código acima, new SockJS('/gs-guide-websocket')significa usar /gs-guide-websocketo caminho para estabelecer uma SockJSconexão. stompClient.connect({}, function(frame){...})Indica o método de retorno de chamada executado após a conexão ser bem-sucedida e stompClient.subscribe('/topic/greetings', function(greeting){...})indica o /topic/greetingsdestino da assinatura, e o método de retorno de chamada é acionado quando uma mensagem é publicada no destino.
Finalmente, precisamos implementar a função de enviar e receber mensagens no lado do servidor. código mostra como abaixo:
@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {
@Override
public void configureMessageBroker(MessageBrokerRegistry registry) {
registry.enableStompBrokerRelay("/topic")
.setRelayHost("localhost")
.setRelayPort(61613)
.setClientLogin("guest")
.setClientPasscode("guest")
.setSystemHeartbeatSendInterval(5000)
.setSystemHeartbeatReceiveInterval(4000);
registry.setApplicationDestinationPrefixes("/app");
}
@Override
public void registerStompEndpoints(StompEndpointRegistry registry) {
registry.addEndpoint("/gs-guide-websocket").withSockJS();
}
}
No código acima, @EnableWebSocketMessageBrokera anotação indica que o agente de mensagens WebSocket está ativado, configureMessageBrokero método é usado para configurar o agente de mensagens e registerStompEndpointso método é usado para registrar SockJSo endpoint.
Em seguida, precisamos implementar as funções de envio e recebimento de mensagens no controlador. código mostra como abaixo:
@Controller
public class GreetingController {
@MessageMapping("/hello")
@SendTo("/topic/greetings")
public Greeting greeting(HelloMessage message) throws Exception {
Thread.sleep(1000); // simulated delay
return new Greeting("Hello, " + HtmlUtils.htmlEscape(message.getName()) + "!");
}
}
No código acima, @MessageMapping("/hello")a anotação significa processar /helloa mensagem do destino e @SendTo("/topic/greetings")a anotação significa enviar o resultado do processamento ao /topic/greetingsdestino. greetingO método implementa a lógica de processamento da mensagem.
Código de amostra
Aqui está um código de exemplo completo, incluindo código de cliente e servidor:
Código do cliente
<!DOCTYPE html>
<html>
<head>
<title>Hello WebSocket</title>
<script src="/webjars/sockjs-client/1.1.2/dist/sockjs.min.js"></script>
<script src="/webjars/stomp-websocket/2.3.3/dist/stomp.min.js"></script>
<script src="/js/app.js"></script>
</head>
<body>
<div>
<label>What is your name?</label>
<input type="text" id="name" />
<button type="button" onclick="send()">Send</button>
</div>
<div id="greetings">
</div>
</body>
</html>
var socket = new SockJS('/gs-guide-websocket');
stompClient = Stomp.over(socket);
stompClient.connect({
}, function(frame) {
stompClient.subscribe('/topic/greetings', function(greeting){
showGreeting(JSON.parse(greeting.body).content);
});
});
function send() {
var name = document.getElementById('name').value;
stompClient.send("/app/hello", {
}, JSON.stringify({
'name': name }));
}
function showGreeting(message) {
var div = document.createElement('div');
div.appendChild(document.createTextNode(message));
document.getElementById('greetings').appendChild(div);
}
código do lado do servidor
@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {
@Override
public void configureMessageBroker(MessageBrokerRegistry registry) {
registry.enableStompBrokerRelay("/topic")
.setRelayHost("localhost")
.setRelayPort(61613)
.setClientLogin("guest")
.setClientPasscode("guest")
.setSystemHeartbeatSendInterval(5000)
.setSystemHeartbeatReceiveInterval(4000);
registry.setApplicationDestinationPrefixes("/app");
}
@Override
public void registerStompEndpoints(StompEndpointRegistry registry) {
registry.addEndpoint("/gs-guide-websocket").withSockJS();
}
}
@Controller
public class GreetingController {
@MessageMapping("/hello")
@SendTo("/topic/greetings")
public Greeting greeting(HelloMessage message) throws Exception {
Thread.sleep(1000); // simulated delay
return new Greeting("Hello, " + HtmlUtils.htmlEscape(message.getName()) + "!");
}
}
public class HelloMessage {
private String name;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
public class Greeting {
private String content;
public Greeting(String content) {
this.content = content;
}
public String getContent() {
return content;
}
}
O código acima implementa uma sala de bate-papo simples. O usuário insere seu nome na caixa de entrada e, em seguida, clica no botão enviar para enviar a mensagem ao servidor. O servidor processa a mensagem recebida e a envia de volta ao cliente. Quando vários usuários usam a sala de bate-papo ao mesmo tempo, cada usuário pode ver as mensagens enviadas por outros usuários.
Resumir
Este artigo apresenta os princípios do Spring Boot SockJS, incluindoSockJS