1. 安装模块

安装 @stomp/stompjs 和 sockjs-client


npm i @stomp/stompjs
npm i sockjs-client

2. 引入模块

安装完这两个模块后,在js文件中引入这两个模块

import SockJS from 'sockjs-client';
import Stomp from '@stomp/stompjs';

3. js代码订阅websocket推送

//  websocket 推送消息
export function getWebsocketData(){
    var stompClient = null;
    // 下面的url是本地运行的jar包的websocket地址 
    var socket = new SockJS('http://localhost:8080/websocket');

    stompClient = Stomp.over(socket);
    stompClient.connect({}, function (frame) {
        //setConnected(true);
        console.log('Connected: ' + frame);

        // websocket订阅一个topic，第一个参数是top名称
       // 第二个参数是一个回调函数,表示订阅成功后获得的data
        stompClient.subscribe('current-message', function (data) {  
            // 一般来说这个data是一个 Frame对象,需要JSON.parse(data)一下拿到数据
                var msg=JSON.parse(data.body)
                // 这样才能拿到需要的数据格式,一个对象。  下面是一个例子
  //  {name:"Andy",age:30,"lastLogin":"2018-08-15 12:33:12","ipAddress":"45.123.12.4"}
                //  然后对这个数据进行处理,渲染到页面就可以了。
        })


    }, function (res) {
                    console.log("error");
                    console.log(res);
        });


    stompClient.ws.onclose = function (res) {
        console.log('Connection closed!');
        console.log(res);
    };
}

4.本地测试

如果本地有一个写好的jar包， 可以本地运行测试。

topic

运行jar包，打开swagger页面 。

本例中，topic就填 current-message,
上面的 responseMessage里面就填写

"name":"Andy","age":"30","lastLogin":"2019-08-15 12:33:12","ipAddress":"45.123.12.4"

注意！ responseMessage里面填写的字段的key和value都需要双引号