- 安裝模塊
安裝 @stomp/stompjs 和 sockjs-client
npm i @stomp/stompjs
npm i sockjs-client
- 引入模塊
安裝完這兩個模塊后,在js文件中引入這兩個模塊
import SockJS from 'sockjs-client';
import Stomp from '@stomp/stompjs';
- js代碼訂閱websocket推送
// websocket 推送消息
export function getWebsocketData(){
var stompClient = null;
// 下面的url是本地運(yùn)行的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，第一個參數(shù)是top名稱
// 第二個參數(shù)是一個回調(diào)函數(shù),表示訂閱成功后獲得的data
stompClient.subscribe('current-message', function (data) {
// 一般來說這個data是一個 Frame對象,需要JSON.parse(data)一下拿到數(shù)據(jù)
var msg=JSON.parse(data.body)
// 這樣才能拿到需要的數(shù)據(jù)格式,一個對象茁帽。 下面是一個例子
// {name:"Andy",age:30,"lastLogin":"2018-08-15 12:33:12","ipAddress":"45.123.12.4"}
// 然后對這個數(shù)據(jù)進(jìn)行處理,渲染到頁面就可以了。
})
}, function (res) {
console.log("error");
console.log(res);
});
stompClient.ws.onclose = function (res) {
console.log('Connection closed!');
console.log(res);
};
}
4.本地測試
如果本地有一個寫好的jar包姐直， 可以本地運(yùn)行測試。
topic
運(yùn)行jar包蒋畜，打開swagger頁面 声畏。
本例中，topic就填 current-message,
上面的 responseMessage里面就填寫
