WebSocket
1,导包
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
<version>2.3.3.RELEASE</version>
</dependency>
2,配置
@Configuration
public class WebSocketConfig {
@Bean
public ServerEndpointExporter serverEndpointExporter() {
return new ServerEndpointExporter();
}
}
3,代码
@ServerEndpoint("/webSocket/{username}")
@Component
public class Chat {
private static int onlineCount = 0;
private static Map<String, Chat> clients = new ConcurrentHashMap<String, Chat>();
private Session session;
private String username;
@OnOpen
public void onOpen(@PathParam("username") String username, Session session) {
System.out.println(username);
this.username = username;
this.session = session;
Chat.onlineCount++;
clients.put(username, this);
}
@OnClose
public void onClose() {
clients.remove(username);
Chat.onlineCount--;
}
@OnMessage
public void onMessage(String message) throws IOException {
Message message1 = JSON.parseObject(message, Message.class);
clients.get(message1.getToName()).session.getBasicRemote().sendText(message1.getMessage());
}
@OnError
public void onError(Session session, Throwable throwable) {
System.out.println("WebSocket发生错误:" + throwable.getMessage());
}
public static void sendMessage(String message) {
// 向所有连接websocket的客户端发送消息
// 可以修改为对某个客户端发消息
for (Chat item : clients.values()) {
item.session.getAsyncRemote().sendText(message);
}
}
}
4,前端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery.min.js"></script>
</head>
<body>
<h1 id="message"></h1>
<input type="text" id="input">
<button id="button">按钮</button>
<div id="meaage">
<script>
$(function(){
var Message={
toName:'',
message:'',
fromName:''
}
let websocket = new WebSocket('ws://127.0.0.1:8080/webSocket/' + 'zhouzhanpei');
//链接服务器
websocket.onopen=function(){
console.log('start');
}
$('#button').click(function(){
var ma=$('#input').val();
$('#message').html(ma);
Message.toName='username';
Message.message=ma;
Message.fromName='zhouzhanpei';
var json=JSON.stringify(Message);
//发送消息
websocket.send(json);
});
//接收消息
websocket.onmessage=function(data){
console.log(data.data);
$('#meaage').html(data.data);
}
});
</script>
</body>
</html>