基于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>
码云
