配置pom
<!-- /spring-boot-starter-websocket -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
配置WebSocketConfig
package com.pp.config;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.config.annotation.EnableWebSocket;
import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;
@EnableWebSocket
@Configuration
public class WebSocketConfig implements WebSocketConfigurer{
@Override
public void registerWebSocketHandlers(WebSocketHandlerRegistry arg0) {
arg0.addHandler(new MyHandler(), "/serverpush");
}
}
MyHandler
package com.pp.config;
import java.util.concurrent.CopyOnWriteArraySet;
import org.springframework.web.socket.CloseStatus;
import org.springframework.web.socket.PongMessage;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.TextWebSocketHandler;
public class MyHandler extends TextWebSocketHandler {
CopyOnWriteArraySet<WebSocketSession> clients = new CopyOnWriteArraySet<WebSocketSession>();
@Override
public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
System.out.println("断开连接,客户端id="+session.getId());
clients.remove(session);
}
@Override
public void afterConnectionEstablished(WebSocketSession session) throws Exception {
System.out.println("建立连接,客户端id="+session.getId());
clients.add(session);
}
@Override
public void handleMessage(WebSocketSession session, WebSocketMessage<?> message) throws Exception {
// TODO Auto-generated method stub
super.handleMessage(session, message);
}
@Override
protected void handlePongMessage(WebSocketSession session, PongMessage message) throws Exception {
}
@Override
protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
System.out.println("后端接收msg="+message.getPayload());
for (WebSocketSession w:clients) {
w.sendMessage(message);
System.out.println("后端推送了msg");
}
}
@Override
public void handleTransportError(WebSocketSession session, Throwable exception) throws Exception {
System.out.println("用户已下线");
clients.remove(session);
}
@Override
public boolean supportsPartialMessages() {
// TODO Auto-generated method stub
return super.supportsPartialMessages();
}
}
Controller
//webSocket
@RequestMapping("/webSocket")
@ResponseBody
public String webSocket(String msg,HttpServletRequest req) {
super.saveToAppList(req, String.class, "chatlist", msg, 1000);
return "success";
}
页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<link rel="stylesheet" th:href="@{/pp/css/bootstrap.css}" />
<link rel="stylesheet" th:href="@{/icon/css/font-awesome.min.css}" />
</head>
<body class="bg-b">
<div class="container-fluid">
<div class="row">
<div class="col text-center bg-danger text-white">webSocket推送</div>
</div>
<div class="row mt-1">
<div id="chatbox" class="border p-2"
style="height:320px;width:600px;overflow:auto;"
>
</div>
</div>
<div class="form-inline">
<input id="msg" type="text"
class="form-control-sm w-50"/>
<button class="btn btn-sm btn-success ml-2" onclick="sendMsg();">发送</button>
</div>
</div>
<!-- js -->
<script th:src="@{/pp/js/jquery.js}"></script>
<script th:src="@{/pp/js/vue.js}"></script>
<script th:src="@{/layer/layer.js}"></script>
<script th:inline="javascript">
var ws = new WebSocket("ws://"+location.host+"/serverpush");
ws.onmessage = function(e){
layer.msg(e.data);
}
function sendMsg(){
ws.send($("#msg").val());
$("#msg").val("");
}
</script>
</body>
</html>