一、pom.xml引入依赖
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
二、添加ServerEndpointExporter配置bean(不知道干什么用的呀!)
大家都说:如果使用独立的servlet容器,而不是直接使用springboot的内置容器,就不要注入ServerEndpointExporter,因为它将由容器自己提供和管理;
使用外部tomcat容器启动websocket
1.删除ServerEndpointExporter配置bean
2.接收连接的类删除@Component
@Configuration
public class WebSocketConfig {
/**
* 注入一个serverEndPointExporter,该Bean会自动注册使用@serverEndpoint注解声明的websocket endpoint
* @return
*/
@Bean
public ServerEndpointExporter serverEndpointExporter(){
return new ServerEndpointExporter();
}
}
三、建立连接、收发消息
@ServerEndpoint("/sendToServer")
@Component
public class ServerToClient {
//记录当前在线连接数
private static AtomicInteger onlineClient = new AtomicInteger(0);
/**
* 建立连接成功调用的方法
* @param session
*/
@OnOpen
public void onOpen(Session session){
//在线人数加1
onlineClient.incrementAndGet();
System.out.println("有新连接["+session.getId()+"]加入,当前在线总人数为:"+onlineClient+"个");
}
/**
* 连接关闭时调用的方法
* @param session
*/
@OnClose
public void onClose(Session session){
//在线人数减1
onlineClient.decrementAndGet();
System.out.println("有一个连接["+session.getId()+"]关闭,当前在线总人数为:"+onlineClient+"个");
}
/**
* 收到客户端发来的信息时调用的方法
* @param message
* @param session
*/
@OnMessage
public void onMessage(String message,Session session){
System.out.println("服务器收到客户端["+session.getId()+"]的消息:"+message);
this.sendMessage("copy,"+message,session);
}
@OnError
public void onError(Session session,Throwable error){
error.printStackTrace();
}
/**
* 向客户端发送信息
* @param s
* @param session
*/
private void sendMessage(String s, Session session) {
try {
session.getBasicRemote().sendText(s);
} catch (IOException e) {
e.printStackTrace();
}
}
}
四、前端连接服务器、收发消息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WebSocket聊天室</title>
</head>
<body>
<h6>WebSocket聊天室</h6>
<input id="text" type="text">
<button onclick="sendMessage()">发送</button>
<button onclick="closeConnect()">断开</button>
<div id="message"></div>
<script type="text/javascript">
//连接服务器
var webSocket = new WebSocket("ws://localhost:8080/sendToServer");
//连接成功时的回调方法
webSocket.onopen = function (event) {
document.getElementById('message').innerHTML += '连接服务器成功!<br/>';
}
//接收到服务器返回消息的回调方法
webSocket.onmessage = function (event) {
document.getElementById('message').innerHTML += event.data+'<br/>';
}
//向服务器发送消息
function sendMessage() {
var message = document.getElementById('text').value;
webSocket.send(message);
}
//关闭与服务器的连接
function closeConnect(){
webSocket.close();
}
//发生错误时的回调
webSocket.onerror = function () {
document.getElementById('message').innerHTML += '服务器异常!<br/>';
}
</script>
</body>
</html>
五、运行效果