首先请自行百度搭建一个简易的SpringMVC框架,maven引用:
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-websocket</artifactId>
<version>4.3.4.RELEASE</version>
</dependency>
创建 WebSocketHandler 的实现类:
@Component
public class SystemWebSocketHandler implements WebSocketHandler {
private static final ArrayList<WebSocketSession> users = new ArrayList<>();
@Override
public void afterConnectionEstablished(WebSocketSession webSocketSession) throws Exception {
users.add(webSocketSession);
System.out.println("建立连接,当前在线用户的数量是:" + users.size());
}
@Override
public void handleMessage(WebSocketSession webSocketSession, WebSocketMessage<?> webSocketMessage) throws Exception {
System.out.println("收到消息:" + webSocketMessage.getPayload());
TextMessage returnMessage = new TextMessage("服务器已收到消息");
sendMessageToUsers(returnMessage);
}
@Override
public void handleTransportError(WebSocketSession webSocketSession, Throwable throwable) throws Exception {
if (webSocketSession.isOpen()) {
webSocketSession.close();
}
users.remove(webSocketSession);
}
@Override
public void afterConnectionClosed(WebSocketSession webSocketSession, CloseStatus closeStatus) throws Exception {
users.remove(webSocketSession);
System.out.println("关闭连接,当前在线用户的数量是:" + users.size());
}
@Override
public boolean supportsPartialMessages() {
return false;
}
/**
* 给所有在线用户发送消息
*
* @param message TextMessage
*/
private void sendMessageToUsers(TextMessage message) {
for (WebSocketSession user : users) {
if (user.isOpen()) {
try {
user.sendMessage(message);
} catch (IOException e) {
e.printStackTrace();
}
}
}
}
}
创建 WebSocketConfigurer 的实现类:
@Configuration
@EnableWebMvc
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {
@Autowired
SystemWebSocketHandler handler;
@Override
public void registerWebSocketHandlers(WebSocketHandlerRegistry webSocketHandlerRegistry) {
webSocketHandlerRegistry.addHandler(handler, "/webSocketServer");
}
}
创建 WebSocketController:
@Controller
public class WebSocketController {
@RequestMapping(value = "/websocket", method = RequestMethod.GET)
public ModelAndView webSocket() {
return new ModelAndView("websocket");
}
}
最后创建websocket.html 页面:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WebSocket 测试</title>
</head>
<script src="http://cdn.sockjs.org/sockjs-0.3.min.js"></script>
<script type="text/javascript">
var websocket = null;
//判断当前浏览器是否支持WebSocket
if ('WebSocket' in window) {
websocket = new WebSocket("ws://localhost:8080/webSocketServer");
}
else {
alert('当前浏览器不支持WebSocket')
}
//连接发生错误的回调方法
websocket.onerror = function () {
setMessageInnerHTML("error");
};
//连接成功建立的回调方法
websocket.onopen = function (event) {
setMessageInnerHTML('当前状态' + event.type);
};
//接收到消息的回调方法
websocket.onmessage = function (event) {
setMessageInnerHTML('当前状态' + event.type);
setMessageInnerHTML(event.data);
};
//连接关闭的回调方法
websocket.onclose = function (event) {
setMessageInnerHTML('当前状态' + event.type);
};
//监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。
window.onbeforeunload = function () {
websocket.close();
};
//将消息显示在网页上
function setMessageInnerHTML(innerHTML) {
document.getElementById('message').innerHTML += innerHTML + '<br/>';
}
//关闭连接
function closeWebSocket() {
websocket.close();
}
//发送消息
function send() {
var message = document.getElementById('text').value;
websocket.send(message);
}
</script>
<body>
<h1>WebSocket 测试</h1>
<input title="message" id="text" type="text"/>
<button onclick="send()">发送</button>
<button onclick="closeWebSocket()">关闭</button>
<div id="message"></div>
</body>
</html>
启动程序,访问:http://localhost:8080/websocket
发送消息:
打开一个新的会话页面,访问:http://localhost:8080/websocket 并发送消息
关闭第二个会话页面,查看后台日志: