版权声明:有不足之处欢迎指出,欢迎交流 https://blog.csdn.net/qq_33594101/article/details/85178876
简述
该websocket支持单用户多处建立链接,支持点对点发送消息,群发
Maven配置
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
<!-- thymeleaf模板引擎 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>cn.hutool</groupId>
<artifactId>hutool-all</artifactId>
<version>4.3.1</version>
</dependency>
WebSocketConfig.java
@Configuration
public class WebSocketConfig {
/**
*注入ServerEndpointExporter,
*这个bean会自动注册使用了@ServerEndpoint注解声明的Websocket endpoint
* @return
*/
@Bean
public ServerEndpointExporter serverEndpointExporter() {
return new ServerEndpointExporter();
}
}
WebSocket.java
@ServerEndpoint("/websocket/{username}")
@Component
public class WebSocket {
//静态变量,用来记录当前在线连接数。应该把它设计成线程安全的。
private static int onlineCount = 0;
//根据名字存储websocket对象CopyOnWriteArraySet线程安全set,ConcurrentHashMap线程安全map
public static Map<String, CopyOnWriteArraySet<WebSocket>> webSocketMap = new ConcurrentHashMap<>();
//与某个客户端的连接会话,需要通过它来给客户端发送数据
private Session session;
/**
* 用户名称
*/
private String username;
/**
* 连接建立成功调用的方法
*/
@OnOpen
public void onOpen(@PathParam("username") String username, Session session) {
this.username = username;
this.session = session;
//将用户添加到websocket,支持单用户多出链接
if (webSocketMap.containsKey(username)) {
webSocketMap.get(username).add(this);
} else {
CopyOnWriteArraySet websocketSet = new CopyOnWriteArraySet();
websocketSet.add(this);
webSocketMap.put(username, websocketSet);
addOnlineCount(); //在线数加1
System.out.println("有新连接加入!当前在线人数为" + getOnlineCount());
}
Map<String, Object> messageMap = new ConcurrentHashMap<>();
messageMap.put("type", 0);
messageMap.put("message", username + "加入!当前在线人数为" + getOnlineCount());
messageMap.put("users", webSocketMap.keySet());
sendMessageAll(JSONUtil.toJsonStr(messageMap));
}
/**
* 连接关闭调用的方法
*/
@OnClose
public void onClose() {
if (StringUtils.isNotEmpty(this.username)) {
webSocketMap.get(username).remove(this);//删除链接
if(webSocketMap.get(username).size()==0){
webSocketMap.remove(username);
subOnlineCount(); //在线数减1
System.out.println("有一连接关闭!当前在线人数为" + getOnlineCount());
//刷新用户列表
Map<String, Object> messageMap = new ConcurrentHashMap<>();
messageMap.put("type", 0);
messageMap.put("message", username + "退出!当前在线人数为" + getOnlineCount());
messageMap.put("users", webSocketMap.keySet());
sendMessageAll(JSONUtil.toJsonStr(messageMap));
}
}
}
/**
* 收到客户端消息后调用的方法
*
* @param message 客户端发送过来的消息
*/
@OnMessage
public void onMessage(String message, Session session) {
System.out.println("来自客户端的消息:" + message);
//群发消息
JSONObject messageJson = JSONUtil.parseObj(message);
Object toUser = messageJson.get("to");//接收对象
if ("All".equals(toUser)) {
sendMessageAll(message);
} else {
sendMessageOne(message, toUser + "");
}
}
/**
* 发生错误时调用
*/
@OnError
public void onError(Session session, Throwable error) {
System.out.println("发生错误");
error.printStackTrace();
}
/**
* 发送消息
*
* @param message
* @throws IOException
*/
public void sendMessage(String message) throws IOException {
//this.session.getBasicRemote().sendText(message);//同步
this.session.getAsyncRemote().sendText(message);//異步
}
/**
* 发送消息给指定用户
*
* @param message
* @param toUserName
*/
public void sendMessageOne(String message, String toUserName) {
for (String key : webSocketMap.keySet()) {
if (key.equals(toUserName)) {
for (WebSocket websocket : webSocketMap.get(toUserName)) {
websocket.session.getAsyncRemote().sendText(message);
}
break;
}
}
}
/**
* 发送消息给所有用户
*
* @param message
* @throws IOException
*/
public void sendMessageAll(String message) {
for (String key : webSocketMap.keySet()) {
for (WebSocket websocket : webSocketMap.get(key)) {
websocket.session.getAsyncRemote().sendText(message);
}
}
}
public static synchronized int getOnlineCount() {
return onlineCount;
}
public static synchronized void addOnlineCount() {
WebSocket.onlineCount++;
}
public static synchronized void subOnlineCount() {
WebSocket.onlineCount--;
}
}
IndexController.java
@Controller
public class IndexController {
@GetMapping("/websocket/{username}")
public String websocket(@PathVariable String username, HttpServletRequest request){
request.setAttribute("username",username);
return "websocket";
}
}
application.yml
server:
port: 8084
spring:
resources:
static-locations: classpath:/static/
thymeleaf:
prefix: classpath:/templates/
suffix: .html
cache: false
websocket.html
<!DOCTYPE html>
<html>
<head>
<title>websocket</title>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
<script src="http://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>
<script src="https://cdn.bootcss.com/sockjs-client/1.1.4/sockjs.min.js"></script>
</head>
<body>
<div style="margin: auto;text-align: center">
<h1>Welcome to websocket</h1>
</div>
<br/>
<div style="margin: auto;text-align: center">
<select id="onLineUser">
<option>--所有--</option>
</select>
<input id="text" type="text"/>
<button onclick="send()">发送消息</button>
</div>
<br>
<div style="margin-right: 10px;text-align: right">
<button onclick="closeWebSocket()">关闭连接</button>
</div>
<hr/>
<div id="message" style="text-align: center;"></div>
<input type="text" th:value="${username}" id="username" style="display: none"/>
</body>
<script type="text/javascript">
var webSocket;
if ("WebSocket" in window) {
webSocket = new WebSocket("ws://localhost:8084/websocket/" + document.getElementById('username').value);
//连通之后的回调事件
webSocket.onopen = function () {
console.log("已经连通了websocket");
setMessageInnerHTML("已经连通了websocket");
};
//接收后台服务端的消息
webSocket.onmessage = function (evt) {
var data = JSON.parse(evt.data);
if(data.type == 0){//存在人员加入,刷新大家的人员列表
setMessageInnerHTML(data.message);
var users = data.users;
var options = '<option>--所有--</option>';
$(users).each(function(index,value){
options += '<option>'+value+'</option>';
});
$("#onLineUser").html(options);
}else if(data.type == 1){//发送消息显示
setMessageInnerHTML(data.username + "对" + data.to + "说:" + data.message);
}
};
//连接关闭的回调事件
webSocket.onclose = function () {
console.log("连接已关闭...");
setMessageInnerHTML("连接已经关闭....");
};
} else {
// 浏览器不支持 WebSocket
alert("您的浏览器不支持 WebSocket!");
}
//将消息显示在网页上
function setMessageInnerHTML(innerHTML) {
document.getElementById('message').innerHTML += innerHTML + '<br/>';
}
function closeWebSocket() {
//直接关闭websocket的连接
webSocket.close();
}
function send() {
var selectText = $("#onLineUser").find("option:selected").text();
if (selectText == "--所有--") {
selectText = "All";
}else{
setMessageInnerHTML(document.getElementById('username').value + "对" + selectText + "说:" + document.getElementById('text').value);
}
var message = {
"message": document.getElementById('text').value,
"username": document.getElementById('username').value,
"to": selectText,
"type":1
};
webSocket.send(JSON.stringify(message));
$("#text").val("");
}
</script>
</html>
运行效果
建立三个用户链接
演示群发
演示点对点发送消息
源码地址:https://github.com/18770911080/zzq/tree/master/spring-boot-websocket