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
      });
    });

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/552925.html

標籤：其他

上一篇：【K哥爬蟲普法】你很會寫爬蟲嗎？10秒搶票、10秒入獄，了解一下？

下一篇：返回列表