java springboot websocket vue 实现发送信息

简介: java springboot websocket vue 实现发送信息

前言

此文章基于服务端对客户端发送消息教程

采用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协议也可以连接哦




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


相关文章
|
9天前
|
JavaScript NoSQL Java
接替此文【下篇-服务端+后台管理】优雅草蜻蜓z系统JAVA版暗影版为例-【蜻蜓z系列通用】-2025年全新项目整合搭建方式-这是独立吃透代码以后首次改变-独立PC版本vue版搭建教程-优雅草卓伊凡
接替此文【下篇-服务端+后台管理】优雅草蜻蜓z系统JAVA版暗影版为例-【蜻蜓z系列通用】-2025年全新项目整合搭建方式-这是独立吃透代码以后首次改变-独立PC版本vue版搭建教程-优雅草卓伊凡
155 96
接替此文【下篇-服务端+后台管理】优雅草蜻蜓z系统JAVA版暗影版为例-【蜻蜓z系列通用】-2025年全新项目整合搭建方式-这是独立吃透代码以后首次改变-独立PC版本vue版搭建教程-优雅草卓伊凡
|
5天前
|
JavaScript 安全 Java
智慧产科一体化管理平台源码,基于Java,Vue,ElementUI技术开发,二开快捷
智慧产科一体化管理平台覆盖从备孕到产后42天的全流程管理,构建科室协同、医患沟通及智能设备互联平台。通过移动端扫码建卡、自助报道、智能采集数据等手段优化就诊流程,提升孕妇就诊体验,并实现高危孕产妇五色管理和孕妇学校三位一体化管理,全面提升妇幼健康宣教质量。
33 12
|
1月前
|
Java 开发者 Spring
java springboot监听事件和处理事件
通过上述步骤,开发者可以在Spring Boot项目中轻松实现事件的发布和监听。事件机制不仅解耦了业务逻辑,还提高了系统的可维护性和扩展性。掌握这一技术,可以显著提升开发效率和代码质量。
93 33
|
27天前
|
JavaScript Java 测试技术
基于Java+SpringBoot+Vue实现的车辆充电桩系统设计与实现(系统源码+文档+部署讲解等)
面向大学生毕业选题、开题、任务书、程序设计开发、论文辅导提供一站式服务。主要服务:程序设计开发、代码修改、成品部署、支持定制、论文辅导,助力毕设!
60 6
|
1月前
|
Java 应用服务中间件 API
【潜意识Java】javaee中的SpringBoot在Java 开发中的应用与详细分析
本文介绍了 Spring Boot 的核心概念和使用场景,并通过一个实战项目演示了如何构建一个简单的 RESTful API。
41 5
|
1月前
|
前端开发 Java 数据库连接
Java后端开发-使用springboot进行Mybatis连接数据库步骤
本文介绍了使用Java和IDEA进行数据库操作的详细步骤,涵盖从数据库准备到测试类编写及运行的全过程。主要内容包括: 1. **数据库准备**:创建数据库和表。 2. **查询数据库**:验证数据库是否可用。 3. **IDEA代码配置**:构建实体类并配置数据库连接。 4. **测试类编写**:编写并运行测试类以确保一切正常。
58 2
|
1月前
|
Java 开发者 Spring
java springboot监听事件和处理事件
通过上述步骤,开发者可以在Spring Boot项目中轻松实现事件的发布和监听。事件机制不仅解耦了业务逻辑,还提高了系统的可维护性和扩展性。掌握这一技术,可以显著提升开发效率和代码质量。
78 13
|
1月前
|
监控 Java API
【潜意识Java】使用SpringBoot构建高效的RESTfulAPI
本文介绍了使用Spring Boot构建RESTful API的完整流程,涵盖从项目创建到API测试的各个步骤。
49 1
|
1月前
|
Java Spring
Java Spring Boot监听事件和处理事件
通过上述步骤,我们可以在Java Spring Boot应用中实现事件的发布和监听。事件驱动模型可以帮助我们实现组件间的松耦合,提升系统的可维护性和可扩展性。无论是处理业务逻辑还是系统事件,Spring Boot的事件机制都提供了强大的支持和灵活性。希望本文能为您的开发工作提供实用的指导和帮助。
107 15
|
1月前
|
监控 JavaScript 数据可视化
建筑施工一体化信息管理平台源码,支持微服务架构,采用Java、Spring Cloud、Vue等技术开发。
智慧工地云平台是专为建筑施工领域打造的一体化信息管理平台,利用大数据、云计算、物联网等技术,实现施工区域各系统数据汇总与可视化管理。平台涵盖人员、设备、物料、环境等关键因素的实时监控与数据分析,提供远程指挥、决策支持等功能,提升工作效率,促进产业信息化发展。系统由PC端、APP移动端及项目、监管、数据屏三大平台组成,支持微服务架构,采用Java、Spring Cloud、Vue等技术开发。