SpringBoot + webSocket + stomp +thymeleaf 推流

一、引入依赖

<!-- websocket推流-->

    <dependency>

      <groupId>org.springframework.boot</groupId>

      <artifactId>spring-boot-starter-websocket</artifactId>

    </dependency>

   

<!--thymeleaf模板-->

<dependency>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-thymeleaf</artifactId>

</dependency>

  

   

二、后端配置

1、新建一个 WebSocketStompConfig 类来实现 WebSocketMessageBrokerConfigurer

//交给SpringBoot管理

@Configuration

//注解开启使用STOMP协议来传输基于代理(message broker)的消息

@EnableWebSocketMessageBroker

@Order(1)

public class WebSocketStompConfig implements WebSocketMessageBrokerConfigurer {

   

    /**

     * 注册stomp的端点(endpoint),并映射指定的url

     */

    @Override

    public void registerStompEndpoints(StompEndpointRegistry registry) {

        /* 允许使用socketJs方式访问,访问点为webSocketServer,允许跨域

         在网页上我们就可以通过这个链接

         http://localhost:8080/webSocket/server

         来和服务器的WebSocket连接*/

   

        //注册一个STOMP的endpoint,并指定使用SockJS协议

        registry.addEndpoint("/websocket/server").setAllowedOrigins("*").withSockJS();

    }

   

    /**

     * 配置信息代理

     */

    @Override

    public void configureMessageBroker(MessageBrokerRegistry registry) {

        // 订阅Broker名称

        //两个域上可以向客户端发消息

        registry.enableSimpleBroker("/queue", "/topic", "/user");

          

        // 全局使用的消息前缀(客户端订阅路径上会体现出来)

        //客户端向服务端发送时的主题上面需要加"/app"作为前缀

//        registry.setApplicationDestinationPrefixes("/app");

        // 点对点使用的订阅前缀(客户端订阅路径上会体现出来),不设置的话,默认也是/user/

//        registry.setUserDestinationPrefix("/user");

    }

   

三、后端向前端推流

1、创建Controller控制层

@Slf4j

@Controller

@Api(tags = "webSocket推流")

public class WebSocketRest{

   

    //依赖messageTemplate发送模板

    @Autowired

    private SimpMessagingTemplate messagingTemplate ;

   

    /*

    * 跳转webSocket测试页面

    * */

    @GetMapping("webPage")

    @ApiOperation(value = "webPage 页面跳转")

    public String webPage(){

        log.info("forward:web");

        return "webscoket";

    }

}

   

2、创建service服务层 (订阅后)

@Service

public class WebSocketService {

    @Resource

    private SimpMessagingTemplate messagingTemplate ;

   

    /*

    * 每隔1s向 "/topic/hello" 中 推送信息

    * */

    @Scheduled(fixedDelay = 1000)

    public String sendTest01(){

        messagingTemplate.convertAndSend("/topic/hello",new ServerMessage("hello webSocket !!! >>> hello ")) ;

        return "message" ;

    }

}

   

3、编写前端页面

<!DOCTYPE html>

   

<html xmlns:th="http://www.thymeleaf.org">

   

<head>

   

    <meta charset="UTF-8" />

   

    <title>Spring Boot+WebSocket+广播式(点对点)</title>

   

    

   

</head>

   

<body onload="disconnect()">

   

<noscript>

   

<h2 style="color: #ff0000">貌似你的浏览器不支持websocket</h2>

   

</noscript>

   

<div>

   

    <div>

   

        <button id="hello" onclick="hello();">hello连接</button>

   

        <button id="disconnect" disabled="disabled" onclick="disconnect();">断开连接</button>

   

    </div>

   

</div>

   

<script th:src="@{https://cdn.bootcdn.net/ajax/libs/sockjs-client/1.5.0/sockjs.min.js}"></script>

   

<script th:src="@{https://cdn.bootcdn.net/ajax/libs/stomp.js/2.3.3/stomp.min.js}"></script>

   

<script th:src="@{https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js}"></script>

   

<script type="text/javascript">

   

    var stompClient = null;

   

    

   

    function hello() {

   

        //若前后端分离,url要写全,若在一个项目内,只写/websocket/server就行

   

        var url = "http://ip:8080/websocket/server"

   

        var socket = new SockJS(url); //链接SockJS 的endpoint 名称为后台声明的"/websocket/server"

   

        stompClient = Stomp.over(socket);//使用stomp子协议的WebSocket 客户端

   

        stompClient.connect({}, function(frame) {//链接Web Socket的服务端。

   

             console.log('Connected: ' + frame);

   

            //广播式发送,订阅地址不需要加唯一标识;点对点发送,可自定义唯一标识

   

            var subUrl= '/topic/hello';

   

            stompClient.subscribe(subUrl, function(respnose){ //订阅/topic/getResponse 目标发送的消息。这个是在控制器的@SendTo中定义的。

   

                showResponse(JSON.parse(respnose.body).name);

   

            });

   

        });

   

    }

   

    

   

    //断开连接

   

    function disconnect() {

   

        if (stompClient != null) {

   

            stompClient.disconnect();

   

        }

   

        setConnected(false);

   

        console.log("Disconnected");

   

    }

   

    

   

   </script>

   

</body>

   

</html>

   

4、效果

SpringBoot + webSocket + stomp +thymeleaf 推流

   

五、前端向后端推送消息

   

1、创建Controller控制层

@Slf4j

@Controller

@Api(tags = "webSocket推流")

public class WebSocketRest{

   

    //依赖messageTemplate发送模板

    @Autowired

    private SimpMessagingTemplate messagingTemplate ;

   

    /*

    * 跳转webSocket测试页面

    * */

    @GetMapping("webPage")

    @ApiOperation(value = "webPage 页面跳转")

    public String webPage(){

        log.info("forward:web");

        return "webscoket";

    }

   

    /*

    *   接收到 客户端的消息

    * */

    @ResponseBody

    @MessageMapping(value = "/welcome")

    public void userChat(Message message) throws Exception {

        String url = "/topic/getResponse/"+message.getName();

        messagingTemplate.convertAndSend(url, "welcome!");

    }

}

   

2、编写前端页面

<!DOCTYPE html>

<html xmlns:th="http://www.thymeleaf.org">

<head>

    <meta charset="UTF-8" />

    <title>Spring Boot+WebSocket+广播式(点对点)</title>

   

</head>

<body onload="disconnect()">

<noscript><h2 style="color: #ff0000">貌似你的浏览器不支持websocket</h2></noscript>

<div>

    <div>

<!--        <button id="connect" onclick="connect();">connect连接</button>-->

        <button id="hello" onclick="hello();">hello连接</button>

        <button id="serverReturnMessage" onclick="serverReturnMessage();">serverReturnMessage连接</button>

        <button id="disconnect" disabled="disabled" onclick="disconnect();">断开连接</button>

   

    </div>

    <div id="conversationDiv">

        <label>输入你的信息</label><input type="text" id="name" />

        <button id="sendName" onclick="sendName();">发送</button>

        <p id="response"></p>

    </div>

</div>

<script th:src="@{https://cdn.bootcdn.net/ajax/libs/sockjs-client/1.5.0/sockjs.min.js}"></script>

<script th:src="@{https://cdn.bootcdn.net/ajax/libs/stomp.js/2.3.3/stomp.min.js}"></script>

<script th:src="@{https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js}"></script>

<script type="text/javascript">

    var stompClient = null;

   

    function setConnected(flag) {

        // document.getElementById('connect').disabled = flag;

        document.getElementById('disconnect').disabled = !flag;

        document.getElementById('conversationDiv').style.visibility = flag ? 'visible' : 'hidden';

    }

   

         

    function serverReturnMessage() {

        //若前后端分离,url要写全,若在一个项目内,只写/websocket/server就行

        var url = "http://ip:8080/websocket/server"

        var socket = new SockJS(url); //链接SockJS 的endpoint 名称为后台声明的"/websocket/server"

        stompClient = Stomp.over(socket);//使用stomp子协议的WebSocket 客户端

        stompClient.connect({}, function(frame) {//链接Web Socket的服务端。

            setConnected(true);

            console.log('Connected: ' + frame);

            //广播式发送,订阅地址不需要加唯一标识;点对点发送,可自定义唯一标识

            var subUrl= '/topic/serverReturnMessage';

            stompClient.subscribe(subUrl, function(respnose){ //订阅/topic/getResponse 目标发送的消息。这个是在控制器的@SendTo中定义的。

                showResponse(JSON.parse(respnose.body).name);

            });

        });

    }

   

    //断开连接

    function disconnect() {

        if (stompClient != null) {

            stompClient.disconnect();

        }

        setConnected(false);

        console.log("Disconnected");

    }

   

    function showResponse(message) {

        var response = $("#response");

        console.log(message);

    }

//向stompClient发送请求

    function sendName() {

        var name = $('#name').val();

        //通过stompClient.send 向/welcome 目标 发送消息,这个是在控制器的@messageMapping 中定义的。

        //在这里,可根据业务自定义json,甚至可以把订阅地址的唯一标识在此传入给后台解析

        var obj = JSON.stringify({'name': name, 'retailmId': '001'})

   

        stompClient.send("/sendTest", {}, obj);

    }

</script>

</body>

</html>

   

3、效果

SpringBoot + webSocket + stomp +thymeleaf 推流

六、点对点推流

1、修改WebSocketStompConfig配置文件。将标记行注释取消。

SpringBoot + webSocket + stomp +thymeleaf 推流

   

2、创建服务层

@Service

public class WebSocketService {

    @Resource

    private SimpMessagingTemplate messagingTemplate ;

   

   

    /*

     *点对点消息推送

     * */

    @Scheduled(fixedDelay = 1000)

    public void userChat() throws Exception {

        String url = "/user/nodeSendNode/";

        String username = "zhangsan";

        messagingTemplate.convertAndSendToUser(username, url ," 点 对 点  推送!");

    }

}

   

3、编写前端页面

<!DOCTYPE html>

<html xmlns:th="http://www.thymeleaf.org">

<head>

    <meta charset="UTF-8" />

    <title>Spring Boot+WebSocket+广播式(点对点)</title>

   

</head>

<body onl oad="disconnect()">

<noscript><h2 style="color: #ff0000">貌似你的浏览器不支持websocket</h2></noscript>

<div>

    <div>

        <button id="nodeSendNode" onclick="nodeSendNode();">nodeSendNode连接</button>

        <button id="disconnect" disabled="disabled" onclick="disconnect();">断开连接</button>

    </div>

</div>

<script th:src="@{https://cdn.bootcdn.net/ajax/libs/sockjs-client/1.5.0/sockjs.min.js}"></script>

<script th:src="@{https://cdn.bootcdn.net/ajax/libs/stomp.js/2.3.3/stomp.min.js}"></script>

<script th:src="@{https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js}"></script>

<!--<script th:src="@{sockjs.js}"></script>

<script th:src="@{stomp.js}"></script>

<script th:src="@{jquery.js}"></script>-->

<script type="text/javascript">

    var stompClient = null;

   

    function setConnected(flag) {

        // document.getElementById('connect').disabled = flag;

        document.getElementById('disconnect').disabled = !flag;

        document.getElementById('conversationDiv').style.visibility = flag ? 'visible' : 'hidden';

    }

   

    //点对点

    function nodeSendNode() {

        //配置用户名 用于接收但对点消息

        var username = 'zhangsan';

        //若前后端分离,url要写全,若在一个项目内,只写/websocket/server就行

        var url = "http://10.20.37.64:8080/websocket/server"

        var socket = new SockJS(url); //链接SockJS 的endpoint 名称为后台声明的"/websocket/server"

        stompClient = Stomp.over(socket);//使用stomp子协议的WebSocket 客户端

        stompClient.connect({}, function(frame) {//链接Web Socket的服务端。

            setConnected(true);

            console.log('Connected: ' + frame);

            //点对点发送,订阅地址不需要加唯一标识;点对点发送,可自定义唯一标识

            var subUrl= '/user/nodeSendNode/';

//订阅/topic/getResponse 目标发送的消息。这个是在控制器的@SendTo中定义的。

            stompClient.subscribe('/user/'+ username +subUrl, function(respnose){                

 console.log(respnose.body);

            });

        });

    }

   

    //断开连接

function disconnect() {

        if (stompClient != null) {

            stompClient.disconnect();

        }

        setConnected(false);

        console.log("Disconnected");

    }

   

    function showResponse(message) {

        var response = $("#response");

        console.log(message);

    }

   </script>

</body>

</html>

   

4、效果

SpringBoot + webSocket + stomp +thymeleaf 推流

上一篇:基于stomp的websocket


下一篇:PUPPET生产拾遗(2)