Maison > interface Web > Tutoriel H5 > le corps du texte

Introduction détaillée à Spring WebSocket

零下一度
Libérer: 2017-07-03 15:18:28
original
1826 Les gens l'ont consulté

Scénario

Websocket est l'une des nouvelles fonctionnalités de Html5. Le but est d'établir une méthode de communication full-duplex entre le navigateur et le serveur pour résoudre la consommation excessive de ressources provoquée par la requête http. -response. En même temps, il fournit de nouvelles méthodes de mise en œuvre pour des applications de scénarios spéciaux, telles que le chat, les transactions boursières, les jeux et d'autres secteurs qui nécessitent des performances élevées en temps réel.

Contexte

Seule une communication unidirectionnelle peut être réalisée via http dans le navigateur Comet peut simuler une communication bidirectionnelle dans une certaine mesure, mais elle est moins efficace. et nécessite un serveur. Il existe un bon support ; socket et xmlsocket en flash peuvent réaliser une véritable communication bidirectionnelle, ces deux fonctions peuvent être utilisées en javascript. une fois dans le navigateur S'il est mis en œuvre, il remplacera les deux technologies ci-dessus et sera largement utilisé Face à cette situation, HTML5 définit le protocole WebSocket, qui permet de mieux économiser les ressources et la bande passante du serveur et d'assurer une communication en temps réel. À l'heure actuelle, tous les principaux navigateurs grand public prennent en charge websocket. Le navigateur IE nécessite IE10+

1 Dépendance POM

Dépendance POM, spring4.1.4.RELEASE, spring Please. ajoutez les dépendances principales par vous-même. Voici les fichiers jar liés à Websocket

<dependency>
    <groupId>javax.websocket</groupId>
    <artifactId>javax.websocket-api</artifactId>
    <version>1.0</version>
    <scope>provided</scope>
</dependency>
<dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-websocket</artifactId>
    <version>4.1.4.RELEASE</version>
</dependency>
Copier après la connexion

2. L'entrée WebSocket

@Configuration
@EnableWebMvc
@EnableWebSocket
public class WebSocketConfig extends WebMvcConfigurerAdapter implements WebSocketConfigurer {
    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        //允许连接的域,只能以http或https开头
        String[] allowsOrigins = {"http://www.xxx.com"};
        
       //WebIM WebSocket通道
        registry.addHandler(chatWebSocketHandler(),"/           webSocketIMServer").setAllowedOrigins(allowsOrigins).addInterceptors(myInterceptor());
        registry.addHandler(chatWebSocketHandler(), "/sockjs/w          ebSocketIMServer").setAllowedOrigins(allowsOrigins).addInterceptors(myInterceptor()).withSockJS();
    }
    @Bean
    public ChatWebSocketHandler chatWebSocketHandler() {
        return new ChatWebSocketHandler();
    }
    @Bean
    public WebSocketHandshakeInterceptor myInterceptor(){
        return new WebSocketHandshakeInterceptor();
    }
}
Copier après la connexion
  1. implémente l'interface WebSocketConfigurer et remplace la méthode registerWebSocketHandlers. Il s'agit d'une méthode d'implémentation de base qui configure les entrées Websocket, les domaines d'accès autorisés, les gestionnaires enregistrés, la prise en charge de SockJs et les intercepteurs.

  2. registry.addHandler fonction d'enregistrement et de routage, lorsque le client initie une connexion websocket, le /path est transmis au gestionnaire correspondant pour traitement sans implémenter de logique métier spécifique, qui peut être comprise comme centre de collecte et de distribution des tâches.

  3. setAllowedOrigins(String[] domains) permet au nom de domaine ou à l'adresse IP spécifié (y compris le numéro de port) d'établir une longue connexion. Si seul votre propre nom de domaine est autorisé à être accessible, vous. peut facilement le définir ici. Si le signe "*" est utilisé sans limite de durée, si un nom de domaine est précisé, il doit commencer par http ou https.

  4. addInterceptors, comme son nom l'indique, consiste à ajouter des intercepteurs au gestionnaire. Nous pouvons ajouter notre propre code logique avant et après l'appel du gestionnaire.

  5. spring websocket prend également en charge le protocole STOMP, je le partagerai la prochaine fois.

3. Implémentation de l'intercepteur

public class WebSocketHandshakeInterceptor implements HandshakeInterceptor {

    @Override
    public boolean beforeHandshake(ServerHttpRequest request, ServerHttpResponse response, WebSocketHandler wsHandler, Map<String, Object
                > attributes) throws Exception {
        if (request instanceof ServletServerHttpRequest) {
            attributes.put("username",userName);
        }
        return true;
    }

    @Override
    public void afterHandshake(ServerHttpRequest request, ServerHttpResponse response, WebSocketHandler wsHandler, Exception exception) {

    }
}
Copier après la connexion

beforeHandshake, méthode de traitement avant d'appeler le gestionnaire. Couramment utilisé pour enregistrer les informations utilisateur, lier WebSocketSession et obtenir WebSocketSession pour envoyer des messages en fonction des informations utilisateur dans le gestionnaire.

4. Classe de traitement du gestionnaire

public class ChatWebSocketHandler extends TextWebSocketHandler{
    
    private final static List<WebSocketSession> sessions = Collections.synchronizedList(new ArrayList<WebSocketSession>());
    //接收文本消息,并发送出去
    @Override
    protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
        chatTextMessageHandler(message.getPayload());
        super.handleTextMessage(session, message);
    }
    //连接建立后处理
    @SuppressWarnings("unchecked")
    @Override
    public void afterConnectionEstablished(WebSocketSession session) throws Exception {
        logger.debug("connect to the websocket chat success......");
        sessions.add(session);
        //处理离线消息
    }
    //抛出异常时处理
    @Override
    public void handleTransportError(WebSocketSession session, Throwable exception) throws Exception {
        if(session.isOpen()){
            session.close();
        }
        logger.debug("websocket chat connection closed......");
        sessions.remove(session);
    }
    //连接关闭后处理
    @Override
    public void afterConnectionClosed(WebSocketSession session, CloseStatus closeStatus) throws Exception {
        logger.debug("websocket chat connection closed......");
        sessions.remove(session);
    }

    @Override
    public boolean supportsPartialMessages() {
        return false;
    }
}
Copier après la connexion

5. Connexion client

var host = window.location.host;
var websocket;
if ('WebSocket' in window) {
    websocket = new ReconnectingWebSocket("ws://"
        + host + "/webSocketIMServer", null, {debug:true, maxReconnectAttempts:4});
} else if ('MozWebSocket' in window) {
    websocket = new MozWebSocket("ws://" + host
        + "/webSocketIMServer");
} else {
    websocket = new SockJS("http://" + host
            + "/sockjs/webSocketIMServer");
}
websocket.onopen = function(evnt) {
    console.log("websocket连接上");
};
websocket.onmessage = function(evnt) {
    messageHandler(evnt.data);
};
websocket.onerror = function(evnt) {
    console.log("websocket错误");
};
websocket.onclose = function(evnt) {
    console.log("websocket关闭");
}
Copier après la connexion

ReconnectingWebSocket.js est utilisé ici, ajoutant une extension au propre websocket du navigateur, tel que comme la reconnexion, le délai d'expiration de la connexion, l'intervalle de reconnexion échoué, le nombre maximum de tentatives de connexion, etc.
Page d'accueil du projet : ReconnectingWebSocket

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal