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




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


相关文章
|
8天前
|
JavaScript NoSQL Java
接替此文【下篇-服务端+后台管理】优雅草蜻蜓z系统JAVA版暗影版为例-【蜻蜓z系列通用】-2025年全新项目整合搭建方式-这是独立吃透代码以后首次改变-独立PC版本vue版搭建教程-优雅草卓伊凡
接替此文【下篇-服务端+后台管理】优雅草蜻蜓z系统JAVA版暗影版为例-【蜻蜓z系列通用】-2025年全新项目整合搭建方式-这是独立吃透代码以后首次改变-独立PC版本vue版搭建教程-优雅草卓伊凡
152 96
接替此文【下篇-服务端+后台管理】优雅草蜻蜓z系统JAVA版暗影版为例-【蜻蜓z系列通用】-2025年全新项目整合搭建方式-这是独立吃透代码以后首次改变-独立PC版本vue版搭建教程-优雅草卓伊凡
|
4天前
|
JavaScript 安全 Java
智慧产科一体化管理平台源码,基于Java,Vue,ElementUI技术开发,二开快捷
智慧产科一体化管理平台覆盖从备孕到产后42天的全流程管理,构建科室协同、医患沟通及智能设备互联平台。通过移动端扫码建卡、自助报道、智能采集数据等手段优化就诊流程,提升孕妇就诊体验,并实现高危孕产妇五色管理和孕妇学校三位一体化管理,全面提升妇幼健康宣教质量。
33 12
|
26天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue实现的留守儿童爱心网站设计与实现(计算机毕设项目实战+源码+文档)
博主是一位全网粉丝超过100万的CSDN特邀作者、博客专家,专注于Java、Python、PHP等技术领域。提供SpringBoot、Vue、HTML、Uniapp、PHP、Python、NodeJS、爬虫、数据可视化等技术服务,涵盖免费选题、功能设计、开题报告、论文辅导、答辩PPT等。系统采用SpringBoot后端框架和Vue前端框架,确保高效开发与良好用户体验。所有代码由博主亲自开发,并提供全程录音录屏讲解服务,保障学习效果。欢迎点赞、收藏、关注、评论,获取更多精品案例源码。
61 10
|
26天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue实现的家政服务管理平台设计与实现(计算机毕设项目实战+源码+文档)
面向大学生毕业选题、开题、任务书、程序设计开发、论文辅导提供一站式服务。主要服务:程序设计开发、代码修改、成品部署、支持定制、论文辅导,助力毕设!
46 8
|
26天前
|
JavaScript 搜索推荐 Java
基于SpringBoot+Vue实现的家乡特色推荐系统设计与实现(源码+文档+部署)
面向大学生毕业选题、开题、任务书、程序设计开发、论文辅导提供一站式服务。主要服务:程序设计开发、代码修改、成品部署、支持定制、论文辅导,助力毕设!
57 8
|
26天前
|
JavaScript NoSQL Java
基于SpringBoot+Vue实现的大学生就业服务平台设计与实现(系统源码+文档+数据库+部署等)
面向大学生毕业选题、开题、任务书、程序设计开发、论文辅导提供一站式服务。主要服务:程序设计开发、代码修改、成品部署、支持定制、论文辅导,助力毕设!
67 6
|
26天前
|
JavaScript Java 测试技术
基于Java+SpringBoot+Vue实现的车辆充电桩系统设计与实现(系统源码+文档+部署讲解等)
面向大学生毕业选题、开题、任务书、程序设计开发、论文辅导提供一站式服务。主要服务:程序设计开发、代码修改、成品部署、支持定制、论文辅导,助力毕设!
57 6
|
26天前
|
JavaScript NoSQL Java
基于SpringBoot+Vue的班级综合测评管理系统设计与实现(系统源码+文档+数据库+部署等)
✌免费选题、功能需求设计、任务书、开题报告、中期检查、程序功能实现、论文辅导、论文降重、答辩PPT辅导、会议视频一对一讲解代码等✌
40 4
|
26天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue实现的高校食堂移动预约点餐系统设计与实现(源码+文档+部署)
面向大学生毕业选题、开题、任务书、程序设计开发、论文辅导提供一站式服务。主要服务:程序设计开发、代码修改、成品部署、支持定制、论文辅导,助力毕设!
70 3
|
26天前
|
JavaScript NoSQL Java
基于SpringBoot+Vue实现的大学生体质测试管理系统设计与实现(系统源码+文档+数据库+部署)
面向大学生毕业选题、开题、任务书、程序设计开发、论文辅导提供一站式服务。主要服务:程序设计开发、代码修改、成品部署、支持定制、论文辅导,助力毕设!
38 2