后端代码:
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
public void registerStompEndpoints(StompEndpointRegistry registry) {
registry.addEndpoint("/daoshu/socket")
.setAllowedOrigins("*")//添加允许跨域访问
.withSockJS() ;
}
public void configureMessageBroker(MessageBrokerRegistry registry) {
registry.enableSimpleBroker("/daoshu/socket/send","/user/");//推送消息前缀
registry.setApplicationDestinationPrefixes("/daoshu/socket/req");//应用请求前缀
registry.setUserDestinationPrefix("/user");//推送用户前缀
}
@Override
public void addArgumentResolvers(List<HandlerMethodArgumentResolver> arg0) {
}
@Override
public void addReturnValueHandlers(List<HandlerMethodReturnValueHandler> arg0) {
}
@Override
public void configureClientInboundChannel(ChannelRegistration arg0) {
}
@Override
public void configureClientOutboundChannel(ChannelRegistration arg0) {
}
@Override
public boolean configureMessageConverters(List<MessageConverter> arg0) {
return false;
}
@Override
public void configureWebSocketTransport(WebSocketTransportRegistration arg0) {
}
}
public class WebSocketController {
@Resource
private SimpMessagingTemplate messagingTemplate;
private Timer timer;
private static int imgIndex = 0;
private final String[] imgList = { "0.png", "1.png", "2.png", "3.png", "4.png", "5.png", "6.png" };
@RequestMapping("/index")
public String index() {
return "index";
}
@MessageMapping("/message")
public ResponseMessage toUser(RequestMessage msg) {
timer = new Timer(true);
long delay = 0;
OrderTimeTask orderTimeTask = new OrderTimeTask(msg.getMessage());
timer.schedule(orderTimeTask, delay, 2000);// 设定指定的时间time,此处为5s
return new ResponseMessage("欢迎使用webScoket:" + msg.getMessage());
}
@ResponseBody
@RequestMapping("/cancel")
public ResponseMessage cancelTimer(HttpServletRequest request) {
if (null != timer) {
imgIndex = 0;
timer.cancel();
}
return new ResponseMessage("关闭成功");
}
class OrderTimeTask extends TimerTask {
private String message;
public OrderTimeTask(String message) {
this.message = message;
}
@Override
public void run() {
try {
String imgPath = imgList[imgIndex];
TextMessage textMessage;
if (imgIndex == 0) {
textMessage = new TextMessage(message);
} else {
textMessage = new TextMessage(imgPath);
}
messagingTemplate.convertAndSendToUser("gis", "/message", textMessage.getPayload());
imgIndex++;
if (imgIndex == imgList.length)
imgIndex = 0;
} catch (Exception e) {
e.printStackTrace();
}
}
}
}
前端代码:
<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<html>
<head>
<title>WebScoket广播式</title>
<script src="/sockjs.js"></script>
<script src="/stomp.js"></script>
<script src="/jquery.js"></script>
</head>
<body onload="disconnect()">
<button id="connect" onclick="connect()">连接</button>
<button id="disconnect" onclick="disconnect()" disabled="disabled">断开连接</button>
<br />
<div id="inputDiv">
输入名称:<input type="text" id="name" /><br />
<button id="sendName" onclick="sendName()">发送</button>
<br />
<p id="response"></p>
</div>
<script>
var stompClient = null;
//设置连接状态控制显示隐藏
function setConnected(connected) {
$("#connect").attr("disabled", connected);
$("#disconnect").attr("disabled", !connected);
if (!connected) {
$("#inputDiv").hide();
} else {
$("#inputDiv").show();
}
$("#reponse").html("");
}
//连接
function connect() {
var socket = new SockJS("http://127.0.0.1:9098/daoshu/socket");
stompClient = Stomp.over(socket);
stompClient.connect({}, function(frame) {
setConnected(true);
stompClient.subscribe('/user/gis/message', function(
response) {
showResponse(response.body);
})
})
}
//断开连接
function disconnect() {
if (stompClient != null) {
stompClient.disconnect();
$.getJSON("http://localhost:9098/cancel?jsonpCallback=?", {}, function(json) {
console.log("**************" + json);
});
}
setConnected(false);
console.log("disconnected!");
}
//发送名称到后台
function sendName() {
var name = $("#name").val();
stompClient.send("/daoshu/socket/req/message", {}, JSON.stringify({
'message' : name
}));
}
//显示socket返回消息内容
function showResponse(message) {
$("#response").html(message);
}
</script>
</body>
</html>