java springboot websocket vue 实现发送信息

清疚 2023-10-04 17:53 40阅读 0赞

#### SpringBoot VUE WebSocket ####

*  前言
 *  maven依赖
 *  配置类
 *  服务端发送消息
 *  VUE 依赖
 *  VUE代码
 *  关于前端连接websocket ，后台使用网关如何解决问题
 *  五一专属|向所有热爱分享的“技术劳动者”致敬\#

## 前言 ##

> 此文章基于服务端对客户端发送消息教程  
> 采用springboot websocket进行聊天  
> 只需一个配置类就可以完成  
> 本文采用点对点进行发送消息

## maven依赖 ##

<dependency>
    	<groupId>org.springframework.boot</groupId>
    	<artifactId>spring-boot-starter-websocket</artifactId>
    	<version>2.4.3</version>
    </dependency>

## 配置类 ##

/**
     * @author wuzhenyong
     * <p>
     * WebSocket配置类
     */
    @Slf4j
    @Configuration
    @RequiredArgsConstructor
    @EnableWebSocketMessageBroker
    public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
        
    
    	private final ResourceServerTokenServices tokenService;
    	/**
    	 * 注册socket端点
    	 * @author wuzhenyong
    	 */
    	@Override
    	public void registerStompEndpoints(StompEndpointRegistry registry) {
        
    		// 定义websocket端点，ws采用socketjs协议
    		// setAllowedOriginPatterns解决跨域问题
    		registry.addEndpoint("/ws").setAllowedOriginPatterns("*").withSockJS();
    		registry.addEndpoint("/ws-test").setAllowedOriginPatterns("*");
    	}
    
    	/**
    	 * 客户端建立连接调用此方法
    	 * 主要作用校验用户令牌信息，如果无效token则不能建立连接
    	 * @author wuzhenyong
    	 */
    	@Override
    	public void configureClientInboundChannel(ChannelRegistration registration) {
        
    		registration.interceptors(new ChannelInterceptor() {
        
    			@Override
    			public Message<?> preSend(Message<?> message, MessageChannel channel) {
        
    				StompHeaderAccessor accessor = MessageHeaderAccessor.getAccessor(message, StompHeaderAccessor.class);
    				if (null == accessor) {
        
    					return null;
    				}
    				// 判断是否首次连接请求
    				if (!StompCommand.CONNECT.equals(accessor.getCommand())) {
        
    					// 不是首次连接，已经成功登陆
    					return message;
    				}
    				// 处理租户
    				String tenant = accessor.getFirstNativeHeader(CommonConstants.TENANT_ID);
    				if (CharSequenceUtil.isNotBlank(tenant)) {
        
    					TenantContextHolder.setTenantId(Integer.parseInt(tenant));
    				} else {
        
    					TenantContextHolder.setTenantId(CommonConstants.TENANT_ID_1);
    				}
    				// 验证令牌信息
    				String token = accessor.getFirstNativeHeader("Authorization");
    				log.info("webSocket token is {}", token);
    				if (null == token || token.length() <= 0) {
        
    					return null;
    				}
    				/**
    				 * 以下是自定义用户令牌校验
    				 */
    				OAuth2Authentication auth2Authentication = tokenService.loadAuthentication(token.split(" ")[1]);
    				if (ObjectUtil.isNotNull(auth2Authentication)) {
        
    					SecurityContextHolder.getContext().setAuthentication(auth2Authentication);
    					accessor.setUser(auth2Authentication::getName);
    					return message;
    				}
    				return null;
    			}
    		});
    	}
    
    }

## 服务端发送消息 ##

// 注入，SimpMessagingTemplate 类来让开发者更加灵活地发送消息
    @Autowired
    private SimpMessagingTemplate simpMessagingTemplate;
    
    // 发送消息代码
    simpMessagingTemplate.convertAndSend("/test/2/1", content);
    // 说明：convertAndSend(自定义通道，发送内容)
    // 常用于：/发送消息前缀/用户ID/消息类型

## VUE 依赖 ##

// package.json文件 dependencies 属性下添加，然后执行npm install
    "sockjs-client": "1.0.0",
    "stomp-websocket": "2.3.4-next",

## VUE代码 ##

// 初始化
    initWebSocket() {
        
          this.connection()
          const self = this
          // 断开重连机制,尝试发送消息,捕获异常发生时重连
          this.timer = setInterval(() => {
        
            try {
        
              self.stompClient.send('test')
            } catch (err) {
        
              console.log('断线了: ' + err)
              self.connection()
            }
          }, 5000)
        },
    // 连接
    connection() {
        
    	  // 传入header信息
    	  const token = store.getters.access_token
    	  const TENANT_ID = getStore({
        name: 'tenantId'}) ? getStore({
        name: 'tenantId'}) : '1'
    	  const headers = {
        
    	    'TENANT-ID': TENANT_ID,
    	    'Authorization': 'Bearer ' + token
    	  }
    	  // 建立连接对象 最后面的ws是我们定义的socketjs协议端点
    	  this.socket = new SockJS('ws://127.0.0.1:8080/ws')// 连接服务端提供的通信接口，连接以后才可以订阅广播消息和个人消息
    	  // 获取STOMP子协议的客户端对象
    	  this.stompClient = Stomp.over(this.socket)
    	  this.stompClient.debug = null
    	  // 向服务器发起websocket连接
    	  this.stompClient.connect(headers, () => {
        
    	    // 订阅通道 /test/2/1 是与服务器发送消息的通道 定义好的哦
    	    let target = `/test/2/1`
    	    this.stompClient.subscribe(target, (msg) => {
         // 订阅服务端提供的某个topic;
    	      this.$notify({
        
    	        title: '提醒',
    	        type: 'warning',
    	        dangerouslyUseHTMLString: true,
    	        message: msg.body + '任务，请及时处理',
    	        offset: 60
    	      })
    	    })
    	  }, (err) => {
        
    	    console.log(err)
    	  })
    },
    // 关闭连接
    disconnect() {
        
    	  if (this.stompClient != null) {
        
    	    this.stompClient.disconnect()
    	    console.log('Disconnected')
    	  }
    }

以上发送消息的功能就完成啦，对于此聊天方式，服务端就一个配置类就可以进行聊天了哦。

## 关于前端连接websocket ，后台使用网关如何解决问题 ##

> 在网关配置ws协议，然后前端进行连接的时候直接填写网关配置信息+/ws（/ws就是服务端创建的端点），也就是http协议也可以连接哦

## 五一专属|向所有热爱分享的“技术劳动者”致敬\# ##