首页 > 其他分享 >SpringBoot实现WebSocket发送接收消息 + Vue实现SocketJs接收发送消息

SpringBoot实现WebSocket发送接收消息 + Vue实现SocketJs接收发送消息

时间:2023-05-19 17:36:20浏览次数:83  
标签:Vue log 前端 点对点 发送 let 消息 接收 String

SpringBoot实现WebSocket发送接收消息 + Vue实现SocketJs接收发送消息

参考:

1、https://www.mchweb.net/index.php/dev/887.html

2、https://itonline.blog.csdn.net/article/details/81221103?spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2~default~CTRLIST~default-1-81221103-blog-121078449.pc_relevant_aa&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2~default~CTRLIST~default-1-81221103-blog-121078449.pc_relevant_aa&utm_relevant_index=1

3、https://blog.csdn.net/yingxiake/article/details/51224569

使用场景

广播模式 :使用场景:给所有连接了这个通道的客户端发送消息。

  • convertAndSend()
  • @SendTo

点对点模式 :使用场景:单独给当前用户发送消息。

  • 下面两种方式,都默认加了一个前缀:/user

  • convertAndSendToUser()

  • @SendToUser

一、后端SpringBoot + WebSocket基础配置

1、导包

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

2、配置config

  • 细节:必须配置跨域。低版本的SpringBoot(2.1.5.RELEASE 就不行)不行,需要使用高版本。低版本的解决方案还未找到。
  • 跨域配置使用:.setAllowedOriginPatterns("*")。。不能使用:.setAllowedOrigins("*")
package com.cc.ws.config;

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;

/**
 * <p>@EnableWebSocketMessageBroker 的作用</p>
 * <li>注解开启使用STOMP协议来传输基于代理(message broker)的消息,</li>
 * <li>这时控制器支持使用 @MessageMapping,就像使用 @RequestMapping一样</li>
 * @author cc
 *
 */
@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {

    /** <p>启动简单Broker</p>
     * <p>表示客户端订阅地址的前缀信息,也就是客户端接收服务端消息的地址的前缀信息</p>
     * <p>代理的名字:都是自定义的</p>
     *
     * /user     点对点(默认也是/user,可以自定义,但是必须和setUserDestinationPrefix中的设置一致)
     * /topic1   广播模式1
     * /topic2   广播模式2
     *
     * /mass     广播模式:群发
     */
    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        registry.enableSimpleBroker(
                "/user", "/topic1", "/topic2", "/mass"
        );
        // 点对点使用的订阅前缀(客户端订阅路径上会体现出来),不设置的话,默认也是 /user/
        // 注意,这里必须和上面设置的Broker:/user 一致(两个都可以自定义,但必须一致)。否则连接不上
        registry.setUserDestinationPrefix("/user/");
        // 指服务端接收地址的前缀,意思就是说客户端给服务端发消息的地址的前缀
//        registry.setApplicationDestinationPrefixes("/socket");
    }

    /**
     * 这个方法的作用是添加一个服务端点,来接收客户端的连接。
     * registry.addEndpoint("/socket")表示添加了一个/socket端点,客户端(前端)就可以通过这个端点来进行连接。
     * withSockJS()的作用是开启SockJS支持。
     * @param registry registry
     */
    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        // 注册一个STOMP的endpoint端点,并指定使用SockJS协议
        // 前端使用这个地址连接后端 WebSocket接口
        registry.addEndpoint("/broadcast", "/point")
                // 允许所有源跨域。还可以指定ip配置:http://ip:*
                // 低版本的SpringBoot(2.1.5.RELEASE 就不行)不行
                .setAllowedOriginPatterns("*")
                .withSockJS();
    }

}

3、启动类,配置定时器

  • @EnableScheduling
@SpringBootApplication
@EnableScheduling
public class WebSocketDemoApplication {
    public static void main(String[] args) {
        SpringApplication.run(WebSocketDemoApplication.class, args);
    }
}

二、前端基础配置

    let socket1 = new SockJS('http://服务器ip:服务器端口/broadcast');
   
    let stompClient1 = Stomp.over(socket1);//广播模式

    stompClient1.connect({}, (frame) => {
      stompClient1.subscribe('/topic1/', (message) => {
        console.log(message.body);
      });
    });

三、后端不接收,只发送

  • 使用spring Scheduled 定时发送消息

  • 直接使用:SimpMessagingTemplate 的 convertAndSend广播模式 和 convertAndSendToUser点对点模式

1、后端

  • 注意点对点发送:

convertAndSendToUser的默认前缀(/user)是在WebSocketConfig配置文件中配置的。

代码:

    @Resource
    private SimpMessagingTemplate simpMsgTemp;

    /** 广播推送消息1:会发送给所有连接了 topic1 这个通道的客户端。
     * topic1:在Broker中配置
     **/
    @Scheduled(cron = "0/1 * * * * ?")
    public void getSocket(){
        String msg = String.format("%s 的第 %s 个消息", "topic1", LocalDateTime.now().getSecond());
        log.info("{}",msg);
        simpMsgTemp.convertAndSend("/topic1/", msg);
    }

    /** 广播推送消息2:多指定一个uri。相当于另一条通道(推荐使用)
     * <li>自定义url后缀,还可以实现用户和用户单点发送。</li>
     * topic2:在Broker中配置
     * custom:是自定义的
     */
    @Scheduled(cron = "0/1 * * * * ?")
    public void getSocketUser(){
        String msg = String.format("topic2 的第 %s 个消息", LocalDateTime.now().getSecond());
        log.info("{}",msg);
        simpMsgTemp.convertAndSend("/topic2/custom" ,msg);
    }

    /**点对点发送 convertAndSendToUser(第一个参数:一般是用户id)
     *  -> 假如用户id是1。用用户id是1的在两个地方登陆了客户端(比如不同的浏览器登陆同一个用户),
     *  -> convertAndSendToUser会把消息发送到用户1登陆的两个客户端中
     * 发送到:/user/{userId}/cs 下。cs是自定义的,且必须自定义一个。
     */
    @Scheduled(cron = "0/1 * * * * ?")
    public void pointToPoint(){
        //这个用户id是后端获取的当前登陆的用户id
        String userId = "123";
        String msg = String.format("点对点:第 %s 个消息。用户id:%s", LocalDateTime.now().getSecond(), userId);
        log.info("{}",msg);
        //发送
        simpMsgTemp.convertAndSendToUser(userId,"/cs/" ,msg);
    }

2、前端

  • 注意点对点的接收方式,用户id需要取出前端存的用户id
    //这样才能同时接收后端来的三套不同通道的消息。
    // broadcast 和后端:registerStompEndpoints中的配置必须一致
    // point     和后端:registerStompEndpoints中的配置必须一致
    // broadcast、point 也可以只用一个,这里只是为了好区分。
    let socket1 = new SockJS('http://172.16.8.1:8099/broadcast');
    let socket2 = new SockJS('http://172.16.8.1:8099/broadcast');
    let socket3 = new SockJS('http://172.16.8.1:8099/point');
    // console.log("wb:" + socket)

    let stompClient1 = Stomp.over(socket1);
    let stompClient2 = Stomp.over(socket2);
    let stompClient3 = Stomp.over(socket3);

    // ----------------广播模式1--------------------
    stompClient1.connect({}, (frame) => {
      console.log('-----------frame1', frame)
      stompClient1.subscribe('/topic1/', (message) => {
        console.log(message.body);
        this.msg = message.body;
        // console.log(JSON.parse(message.body));
      });
    });

    // ----------------广播模式2--------------------
    stompClient2.connect({}, (frame) => {
      console.log('-----------frame2', frame)
      stompClient2.subscribe('/topic2/custom', (message) => {
        console.log(message.body);
        this.user = message.body;
        // console.log(JSON.parse(message.body));
      });
    });

    // ----------------点对点模式--------------------
    //前端获取的 userId
    let userId = '123';
    //连接WebSocket服务端
    stompClient3.connect({},(frame) => {
      console.log('Connected:' + frame);
      stompClient3.subscribe('/user/' + userId + '/cs/',
          (response) => {
            this.peer = response.body;
      });
    });

四、后端接收、接收后再发送

  • 也可以只接收消息,不发送。看业务需求。
  • 使用 @MessageMapping 接收前端发送过来的消息
  • 使用:@SendTo 广播模式、@SendToUser 点对点模式
  • 使用:SimpMessagingTemplate 的 convertAndSend广播模式 和 convertAndSendToUser 点对点模式

1、后端

    @Resource
    private SimpMessagingTemplate simpMsgTemp;

    /** <p>广播模式一、接收前端的消息,处理后给前端返回一个消息。</p>
     * <li>后端 把消息处理后 发送到 /mass/getResponse 路径下</li>
     * <ol>
     *     <li>@MessageMapping("/massRequest1") :作用:接收前端来的消息。类似于@RestController</li>
     *     <li>@SendTo("/mass/getResponse1"):作用跟convertAndSend类似,广播发给与该通道相连的客户端。SendTo 发送至 Broker 下的指定订阅路径 </li>
     *     <li>@SendToUser("/mass/getResponse1"):作用跟convertAndSendToUser类似,定点发送。SendTo 发送至 Broker 下的指定订阅路径 </li>
     *     <li>/mass 必须在配置文件配置</li>
     *     <li>/getResponse1 自定义的后缀</li>
     * </ol>
     */
    @MessageMapping("/massRequest1")
    @SendTo("/mass/getResponse1")
    public String mass1(String chatRoomRequest){
        //处理前端消息……
        log.info("前端消息:{}",chatRoomRequest);
        //返回消息
        return "@SendTo 广播一(单次) 后端处理完成!";
    }

    /** 广播模式二、接收前端的消息,可以多次给前端发消息
     * <li>/mass 必须在配置文件配置</li>
     * <li>/getResponse2 自定义的后缀</li>
     */
    @MessageMapping("/massRequest2")
    public void mass2(String chatRoomRequest){
        log.info("前端的消息:{}",chatRoomRequest);

        for (int i = 0; i < 5; i++) {
            String msg = "后端处理后的 广播二(多次):" + i;
            simpMsgTemp.convertAndSend("/mass/getResponse2", msg);
        }
        simpMsgTemp.convertAndSend("/mass/getResponse2",
                "后端处理后的 广播二(多次),后端处理完成!");
    }

    /** <p>点对点一、接收前端消息,只能返回一次消息(必须登陆系统才能使用。)</p>
     * <li>只有发送原始消息的客户端才会收到响应消息,而不是所有连接的客户端都会收到响应消息。</li>
     * <li>/alone/getResponse1:自定义的,不需要在配置文件配置。</li>
     *
     * <p>@SendToUser</p>
     * <li>默认该注解前缀为 /user</li>
     * <li>broadcast属性,表明是否广播。就是当有同一个用户登录多个session时,是否都能收到。取值true/false.</li>
     *
     * @param principal Principal :登陆用户的信息,需要使用spring s安全框架写入信息?
     */
    @MessageMapping("/aloneRequest1")
    @SendToUser("/alone/getResponse1")
    public String alone1(String chatRoomRequest){
        //处理前端消息……
        log.info("前端消息:{}",chatRoomRequest);
        //返回消息
        return "@SendToUser 点对点一(单次) 后端处理完成!";
    }

    /** 点对点二、接收前端消息,可以多次给前端发消息
     * <li>convertAndSendToUser —— 发送消息给指定用户id的</li>
     * <li>如果用户1在两个地方(A/B)登陆可以客户端,并且连接了该通道,其中一个如A给后端发消息,后端返回消息,A/B两个地方都会收到消息</li>
     * <ol>
     *     <li>@MessageMapping("/aloneRequest2") 接收前端指定用户消息,</li>
     *     <li>/alone/getResponse2 不用在配置文件中配置</li>
     *     <li>返回消息 发送到 user/{userId}/alone/getResponse2 下 (定点发送)</li>
     * </ol>
     */
    @MessageMapping("/aloneRequest2")
    public void alone2(String chatRoomRequest){
        //后端获取的当前登陆的用户的id(和前端一致)
        String userId = "456";
        log.info("前端的消息:{}",chatRoomRequest);

        for (int i = 0; i < 5; i++) {
            String msg = "后端处理后的 点对点二(多次):" + i;
            simpMsgTemp.convertAndSendToUser(userId,"/alone/getResponse2", msg);
        }
        simpMsgTemp.convertAndSendToUser(userId,"/alone/getResponse2",
                "后端处理后的 点对点二(多次),后端处理完成!");
    }

2、前端

  • 3点对点一 未实现。
    //连接SockJS的 broadcast
    let socket1 = new SockJS('http://172.16.8.7:8099/broadcast');
    let socket2 = new SockJS('http://172.16.8.7:8099/broadcast');
    let socket3 = new SockJS('http://172.16.8.7:8099/point');
    let socket4 = new SockJS('http://172.16.8.7:8099/point');
    //使用STMOP子协议的WebSocket客户端
    let stompClient1 = Stomp.over(socket1);
    let stompClient2 = Stomp.over(socket2);
    let stompClient3 = Stomp.over(socket3);
    let stompClient4 = Stomp.over(socket4);

    //1广播模式一
    stompClient1.connect({},(frame) => {
      console.log('广播模式一:' + frame);
      //1发送消息
      stompClient1.send("/massRequest1",{},"我是前端来 广播模式一 的消息!");

      //2接收消息
      stompClient1.subscribe('/mass/getResponse1',(response) => {
        this.broadcast1 = response.body
      });
    });

    //2广播模式二
    stompClient2.connect({},(frame) => {
      console.log('广播模式二:' + frame);
      //1发送消息
      stompClient2.send("/massRequest2",{},"我是前端来 广播模式二 的消息");

      //2接收消息
      stompClient2.subscribe('/mass/getResponse2',(response) => {
        this.broadcast2 = response.body
      });
    });

    //3点对点一 :必须登陆系统才能实现。要往:Principal设置用户登陆信息才行
    //1发送消息
    // stompClient3.send("/aloneRequest1",{},"我是前端来 点对点一 的消息");
    stompClient3.connect({},(frame) => {
      console.log('点对点一1:' + frame);
      stompClient3.send("/aloneRequest1",{},"我是前端来 点对点一 的消息");
      //2接收消息
      stompClient3.subscribe('/user/alone/getResponse1' ,(response) => {
        console.log('-------response.body', response.body)
        this.point1 = response.body
      });
    });

    //4点对点二:必须获取现在登陆了的用户id,且必须和后端一致才行。
    stompClient4.connect({},(frame) => {
      console.log('点对点二:' + frame);
      //1发送消息
      stompClient4.send("/aloneRequest2",{},"我是前端来 点对点二 的消息");

      //2接收消息
      //前端获取的当前登陆的用户userId(和后端一致)
      let userId = '456';
      stompClient4.subscribe('/user/'+userId+'/alone/getResponse2',(response) => {
        this.point2 = response.body
      });
    });

标签:Vue,log,前端,点对点,发送,let,消息,接收,String
From: https://www.cnblogs.com/kakarotto-chen/p/17415808.html

相关文章

  • 美团前端vue面试题
    CompositionAPI与OptionsAPI有什么不同分析Vue3最重要更新之一就是CompositionAPI,它具有一些列优点,其中不少是针对OptionsAPI暴露的一些问题量身打造。是Vue3推荐的写法,因此掌握好CompositionAPI应用对掌握好Vue3至关重要WhatisCompositionAPI?(opensnewwindow)......
  • vue组件通信方式有哪些?
    vue组件通信方式一、props(父向子传值----自定义属性)/$emit(子向父传值-----自定义事件)父组件通过props的方式向子组件传递数据,而通过$emit子组件可以向父组件通信。1.父组件向子组件传值(props)下面通过一个例子说明父组件如何向子组件传递数据:在子组件article.vue中......
  • 滴滴前端必会vue面试题汇总
    watch原理watch本质上是为每个监听属性setter创建了一个watcher,当被监听的属性更新时,调用传入的回调函数。常见的配置选项有deep和immediate,对应原理如下deep:深度监听对象,为对象的每一个属性创建一个watcher,从而确保对象的每一个属性更新时都会触发传入的回调函数。主......
  • vue组件通信6种方式总结(常问知识点)
    前言在Vue组件库开发过程中,Vue组件之间的通信一直是一个重要的话题,虽然官方推出的Vuex状态管理方案可以很好的解决组件之间的通信问题,但是在组件库内部使用Vuex往往会比较重,本文将系统的罗列出几种不使用Vuex,比较实用的组件间的通信方式,供大家参考。组件之间通信的场景在......
  • vue什么时候进行虚拟dom对比
    1、vue什么时候进行虚拟dom对比Vue在更新组件时会先创建一个新的虚拟DOM树,然后与旧的虚拟DOM树进行对比,从而找出两个树之间的差异性,进而只对差异性进行更新操作。这个过程就是所谓的虚拟DOM对比。对比虚拟DOM的时机,主要是在组件更新操作中进行。当Vue检测到组件的某......
  • Vue 插槽slot 以及传递多个props
    <!--*@Descripttion:插槽slot*@version:*@Author:zhangfan*@email:[email protected]*@Date:2020-05-1409:08:01*@LastEditors:zhangfan*@LastEditTime:2020-06-2909:51:02--><template><divclass="topCon">......
  • Vue项目中使用mock
    概念:mock是一个模拟数据生成器,旨在帮助前端独立于后端进行开发,帮助编写单元测试。mock有如下功能:根据数据模板生成模板数据模拟ajax请求,生成请求数据基于html模板生成模拟数据安装mockjsnpminstallmockjs在src文件夹下新建mock文件夹5.在mock文件夹下新建index.js文件引入mock......
  • Vue中的动态组件
    1,定义:动态组件就是将几个组件放在一个挂载点下,这个挂载点就是标签,其需要绑定is属性,属性值为父组件中的变量,变量对应的值为要挂载的组件的组件名,然后根据父组件里某个变量来动态显示哪个,也可以都不显示,2,使用:<component>元素是vue里面的一个内置组件。在里面使用v-bind:is,可以实现......
  • Vue过滤器-filter
    1.局部定义过滤器<!--*@Descripttion:vue过滤器-filter*@version:*@Author:zhangfan*@email:[email protected]*@Date:2020-07-0309:10:28*@LastEditors:zhangfan*@LastEditTime:2020-07-1414:13:56--><template><divclass="......
  • Vue中的懒加载和按需加载
    1.懒加载懒加载也叫延迟加载,即在需要的时候进行加载,随用随载。vue项目打包的时候,如果项目比较庞大,那么将会打出一个很大的包,速度比较慢,这个时候可以考虑拆分,不要把所有的内容都打到一个包里面去。1.路由懒加载:我们平常使用router可能如下:importVuefrom'vue'importRouterfro......