Spring Boot WebSocket介绍(一)

最近在做一些WebSocket相关的内容,简要看了一些相关的知识,为避免自己忘记和遗漏一些内容,简单整理一下相关知识。本文作为WebSocket介绍的第一篇,比较简单,主要介绍如何在Spring Boot框架中使用自带的WebScoket功能。

完整的代码在这里,欢迎加星,fork。本文代码是在官方示例代码基础上稍加修改而成的。本人是后端,前端页面基本上时照猫画虎修改修改而成,仅供测试演示使用。

添加依赖

pom.xml文件在https://github.com/yqbjtu/websocketTutorials/blob/master/WebSocketBasic/pom.xml。
简要介绍,本示例程序使用Spring Boot 2.0.1.

核心依赖如下

        
            org.springframework.boot
            spring-boot-starter-web
        

        
            org.springframework.boot
            spring-boot-starter-websocket
        

附属依赖如下,本示例程序同时提供两个简单的前端页面,供演示使用,这两个前端页面用到如下内容,如果你是前后端分离的,有自己的前端完成socket连接、订阅、发送、接收。 就不需要引入如下这些包,直接使用你的前端就行。

        
            org.webjars
            webjars-locator-core
        
        
            org.webjars
            sockjs-client
            1.0.2
        
        
            org.webjars
            stomp-websocket
            2.3.3
        
        
            org.webjars
            bootstrap
            3.3.7
        
        
            org.webjars
            jquery
            3.1.0
        

主要代码

提供自己的WebSocketMessageBrokerConfigurer实现类

package com.yq.config;

import lombok.extern.slf4j.Slf4j;
import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;

@Configuration
@EnableWebSocketMessageBroker
@Slf4j
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/myEndPoint")         //开启/myEndPoint端点
                .setAllowedOrigins("*")         //允许跨域访问
                .withSockJS();                  //使用sockJS
    }

    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        registry.enableSimpleBroker("/myPrefixes");  //订阅topic的前缀,比订阅topic必须是这种格式// /myPrefixes/topic1/xxx
    }
}

简要说明:
a, endpoint 部分,如你的endPoint是xyz, 那么你连接的url格式就是var sockjs_url = 'http://{ip}:{port}/xyz';
b,跨域问题,如果没有配置好允许来自哪些前端的连接,当你连接websocket就会报跨域问题,最典型的的,如果你的前端域名是http://a.b.c:99, 那你允许的origins就必须包含来自a.b.c的域名且端口为99的连接
c,topic前缀,设置好topic的前缀后,你订阅topic的格式/myPrefixes/{youTopciPart01}/{youTopciPart012, 或者/myPrefixes/{yourTopic}

效果截图

index.html订阅了/myPrefixes/topic01/705117a0cf1a487e8df6902dd5ece030 topic,也会向topic发送内容(内容为json格式,只有一个字段"myfield1")。

myindex.html也订阅了/myPrefixes/topic01/705117a0cf1a487e8df6902dd5ece030 topic,也会向该topic发送内容(内容为json格式,格式为{"myfield1":"myindex.html中的输入1","message":"myindex.html中的输入2"})。

因此当myindex.html也向/myPrefixes/topic01/705117a0cf1a487e8df6902dd5ece030 发送消息时,index.html也会收到消息并显示,例如,会显示{"myfield1":"myindex.html中的输入1","message":"myindex.html中的输入2"}中的"myindex.html中的输入1" 部分

因此当index.html也向/myPrefixes/topic01/705117a0cf1a487e8df6902dd5ece030 发送消息时,myindex.html也会收到消息并显示,例如{"myfield1":"index.html中的输入"}.

wb01_TwoConn.png

其他

关于service和controller部分,主要是SimpMessagingTemplate以及@MessageMapping和@SendTo注解,为服务间调用提供接口,后面有空再介绍。

你可能感兴趣的:(Spring Boot WebSocket介绍(一))