springboot webSocket SimpMessagingTemplate

基于http协议

后端：

setp:1、引入依赖：

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

setp:2、配置registry

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/websocket").setAllowedOrigins("*").withSockJS();
    }
    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        registry.enableSimpleBroker("/queue","/topic","/user");
        registry.setUserDestinationPrefix("/user");
    }
}

setp:3、接口

注入：SimpMessagingTemplate 调用convertAndSendToUser来推送消息

@Service
public class DisplayService {
    @Autowired
    private SimpMessagingTemplate simpMessagingTemplate;

    public void showWelcomeTo(String code, MsgEntity showWelcomeTo) {
        MsgEntity entity = new MsgEntity();
        BeanUtils.copyProperties(showWelcomeTo, entity);
        entity.setType(2);
        simpMessagingTemplate.convertAndSendToUser(code, "/queue/info", entity);
    }

    public void showAllMsg(String code) {
        MsgEntity entity = new MsgEntity();
        entity.setType(1);
        simpMessagingTemplate.convertAndSendToUser(code, "/queue/info", entity);
    }
}

前端

引入：sockjs-1.1.0.min.js (自行到网上下載)

.js

var start = null;
var socket = null;
var stompClient = null;
function reconnect() {
	let code= getLastRequestPath(window.location.href)
	console.log("Curent lane :"+code)

	var url = "/user/"+laneCode+"/queue/info";
	// 链接Socket
	socket = new SockJS(window.location.hostname + ':' + window.location.port+'/websocket');  //与后端配置得地址一致(配置registry)
	console.log('Connected:%o', socket);
	// 使用STOMP子协议的WebSocket客户端
	stompClient = Stomp.over(socket);
	// 链接WebSocket服务端
	stompClient.connect({}, function(frame) {
		// 車輛入口信息
		stompClient.subscribe(url,function(event) {
			var obj = JSON.parse(event.body);
            console.log("type="+obj.type)
			if (obj.type == "1"){
				showWelcome(obj)
			}
			if (obj.type == "2"){
				showEntryInfo(obj)
			}
			if (obj.type == "3"){
				showUseOctopusCard(obj)
			}
			if (obj.type == "4"){
                showExitInfo(obj)
			}

		});
		// 判斷重連
		if (stompClient.connected) {
			clearInterval(start);
			start = null;
			console.log("服務器已鏈接！");
		}
		console.log(stompClient.connected);
	});
	socket.onclose = function() {
		console.log("服務器關閉了鏈接，請刷新頁面！");
	};
}

function getLastRequestPath(url){
	//获取最后一个/的位置
	let site = url.lastIndexOf("\/");
	//截取最后一个/后的值
	return url.substring(site + 1, url.length);
}



$(function() {
	reconnect();
	window.addEventListener("offline", function(e) {
		console.log("offline");
		if (stompClient != null) {
			stompClient.disconnect();
		}
		socket.close();
		console.log("服務器鏈接已斷開，正在嘗試重新鏈接...");
		console.log(stompClient.connected);
	});

	window.addEventListener("online", function(e) {
		console.log("online");
		start = setInterval(reconnect, 3000);
	});
});

.html

	<script>
    var myVar;
    var time = 10;
    setInterval(timeInterval, 1000);
    function timeInterval() {
        // console.log(time)
        if (time == 0) {
            showWelcome();
            time = 10;
        } else {
            time--
        }
    }
    function showWelcome() {
        $('#welcomeTo').show()
        $('#entryInfo').hide()
    }
    function showEntryInfo(obj) {
        document.getElementById('car_plate').innerHTML = obj.carplate;
        document.getElementById('mode_of_access').innerHTML = obj.modeOfAccess;
        document.getElementById('entry_time').innerHTML = obj.entryTime;
        $('#welcomeTo').hide()
        $('#entryInfo').show()
        time = 10
    }
</script>

码云