webscokt使用记录

最新推荐文章于 2024-06-02 20:46:18 发布

CSDN__LiMing

最新推荐文章于 2024-06-02 20:46:18 发布

阅读量776

点赞数 1

文章标签：前端 websocket

本文链接：https://blog.csdn.net/CSDN__LiMing/article/details/121284447

版权

我理解的webscokt的作用就是在前后端建立长连接，然后在后端设置定时任务就可以实现在前端不发请求的情况下更新前端数据。

下面是我使用的方法，

后端（springBoot）：

    @Controller
    public class TestControllor {
    @Autowired
    private SimpMessagingTemplate template;

    @Scheduled(cron = "0/5 * * * * ? ")//定时任务 5秒钟一次
    public void testInfo(){
//convertAndSend方法，第一个参数是指定给要接收的用户，第二个参数是要发送的信息info是自己定义的对象
              template.convertAndSend("/getMessage/testInfo",JSONObject.toJSONString(info));
    }
    }

前端接收（ant封装的vue）：

<script>
    //导入的时候idea应该会自动导入如果没导入就自己导npm install sockjs-client   npm install stompjs
    import SockJS from "sockjs-client";
    import Stomp from "stompjs";
    var stompClient = null;
    export default {
        methods: {
            //与后端建立连接，定时接收数据
            initApplication(){
                //地址，创建sockjs对象
                var url = "http://localhost:8030/模块名/endpointOyzc";
                var socket = new SockJS(url);
                stompClient = Stomp.over(socket);//使用STMOP子协议的WebSocket客户端
                stompClient.connect({},function (frame) {
                    stompClient.subscribe('/getMessage/testInfo',function (response) {
                        //解析接收的数据
                        var body = eval('(' + response.body + ')');
                        //代码  逻辑
                    });
                })
            },
        }
    }

</script>