springboot+vue+websockt+stomp+spring-security

Posted 2021-03-04 谁为含愁独不见，更教明月照流黄

直奔主题：

　　一般的web项目都是短连接，主动权是交给客户端手里，在客户端不发请求的情况下，服务端是没办法主动给客户端发送消息。但是有些情况下，我们需要长连接，比如常见到的聊天室。网上有很多的案例这里就不多说了!（）

java后端部分　　

首先，我们是需要导入maven节点

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

传统的玩法，需要一个配置类WebSocketConfiguration,他需要实现WebSocketMessageBrokerConfigurer。重写两个方法configureMessageBroker，registerStompEndpoints

package com.lhf.novel.config.socket;

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;

/**
 * WebSocketConfigufation实体类
 *
 * @author zy
 * @since 2020/3/20$
 */
@Configuration
@EnableWebSocketMessageBroker
//@Deprecated
public class WebSocketConfiguration implements WebSocketMessageBrokerConfigurer {

    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        registry.enableSimpleBroker("/topic");//注册一个队列，主要用来做消息区分的(在我看来)
    }

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/api").setAllowedOrigins("*").addInterceptors().withSockJS();//通俗易懂简单的来讲，addEndpoint("/api")就是客户端连接的时候url地址，后边的就不解释了。。。

} }

这样客户端就可以连接了。

现在添加一个测试，主动给客户端推送消息********

package com.lhf.novel.config.socket;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.messaging.simp.SimpMessagingTemplate;
import org.springframework.scheduling.annotation.Scheduled;
import org.springframework.stereotype.Component;

/**
 * MessageService实体类
 *
 * @author zy 
 * @since 2020/3/22
 */
@Component
public class MessageService {
    @Autowired
    private SimpMessagingTemplate messagingTemplate;

    @Scheduled(fixedDelay = 5000)//spring的计划任务，这里表示每五秒执行一次，需要在配置类或者启动类上加一个注解@EnableScheduling，这样才能生效

public void mes() { messagingTemplate.convertAndSend("/topic","125"); } }

这里SimpMessagingTemplate是内置的一个消息模板，这里使用他的convertAndSend（）方法，第一个参数是表示向那个通道发送、第二个参数是发送的内容这样客户端就可以连接了。

vue前端部分

首先需要导入两个依赖

npm install socket-client

npm install stompjs

 

import SockJS from \'sockjs-client\';
    import Stomp from \'stompjs\';

    export default {
        name: "Index",
        data() {
            return {
                socket: null,
                stompClient: null,
                name: \'admin\',
                mes: \'\',
                cmes: \'\',
            }
        },
        mounted() {
            this.init();
        },
        destroyed() {
            this.stompClient.destroyed();
        },
        methods: {
            init() {
                let _that = this;
　　　　　　　　　　//连接socket
                this.socket = new SockJS(\'http://localhost:8080/api\');
                let stompClient = Stomp.over(this.socket);
                stompClient.connect({
                    login: \'admin\',
                    passcode: \'123456\'
                }, function (frame) {
                    window.console.log(frame)
　　　　　　　　　　//订阅，这里订阅服务端注册过的topic
                    stompClient.subscribe(\'/topic\', function (message) {
                        window.console.warn(message);
                        _that.cmes = message.body
                        // window.console.log(JSON.parse(message.body));
                    });
                })
                this.stompClient = stompClient;
            },
            send() {
　　　　　　　　　　//这是发送消息
                this.stompClient.send("/mes", {}, "客户端发来消息")
            }
        },
    }

这样前端也差不多完成了

打开开发者模式  F12可以看到，每五秒服务端都会推送一条消息过来。

以上是服务端主动发送消息，聊天窗一定是点多点，或者点对多的模式的，那么就需要有用户的概念，这是就需要加上springsecurity了。

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

security配置部分省略。。。我的配置用有两个用户admin 和 root

这样需要一个controller

package com.lhf.novel.config.socket;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.messaging.handler.annotation.DestinationVariable;
import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.messaging.simp.SimpMessagingTemplate;
import org.springframework.web.bind.annotation.RestController;

import java.security.Principal;

/**
 * TestController实体类
 *
 * @author zy 
 * @since 2020/3/22
 */
@RestController
public class TestController {

    @Autowired
    private SimpMessagingTemplate messagingTemplate;


    @MessageMapping("/mes")
    //@SendTo("/topic")
    public void mes(Principal principal, String mess) {
        System.out.println("name:"+principal.getName());
        System.out.println("mes = " + mess);
        messagingTemplate.convertAndSendToUser("admin","/topic","我来了");
//        return principal.getName()+":发来致电";
    }
}

@MessageMapping和RequestMapping作用是一样的，设置请求路径

@SendTo是在有返回值的情况下返回通道

Principal是SpringSecurity的对象，里边包含用户的所有信息，当然是你自己的。

mess 是接受的消息，这里为了简单我是直接写了一个String类型的，你也可以分装一个对象，这样会好一些，毕竟点对点你得告诉服务器你要发送给谁，发送的内容。

SimpMessagingTemplate： 消息模板 上边用了 convertAndSend（）的方法，现在我们需要用到convertAndSendToUser（）看方法名字也能看出来，这个是发送给指定用户的，第一个参数是要发送的指定用户，第二个参数通道、第三个是发送的内容(不要被我迷惑了，第                       三个参数是个Object的)

 

<template>
    <div>
        {{ $store.state.realName }}:
        <el-input v-model="mes"/>
        {{ cmes }}
        <el-button @click="send">点击</el-button>
    </div>
</template>

<script>
    import SockJS from \'sockjs-client\';
    import Stomp from \'stompjs\';

    export default {
        name: "Index",
        data() {
            return {
                socket: null,
                stompClient: null,
                name: \'admin\',
                mes: \'\',
                cmes: \'\',
            }
        },
        mounted() {
            this.init();
        },
        destroyed() {
            // this.stompClient.destroyed();
        },
        methods: {
            init() {
                let _that = this;
                this.socket = new SockJS(\'http://localhost:8080/api\');
                let stompClient = Stomp.over(this.socket);
                stompClient.connect({
                    login: \'admin\',
                    passcode: \'123456\'
                }, function (frame) {
                    window.console.log(frame)
                    stompClient.subscribe(\'/user/topic\', function (message) {
                        window.console.warn(message);
                        _that.cmes = message.body
                        // window.console.log(JSON.parse(message.body));
                    });
                })
                this.stompClient = stompClient;
            },
            send() {
                this.stompClient.send("/mes", {}, "客户端发来消息")
            }
        },
    }
</script>

<style scoped>

</style>

上诉代码有一点不同就是客户端定订阅的多了一个spring提供的/user,也就是说现在需要订阅 /user/topic两个了

然后看效果图

 

 

 

 至此结束，文笔不好，欢迎吐槽    1490030544，备注+ 葬月