vue，java，webSocket通讯，服务端主动给多客户端发消息
vue在那个页面内：
created() {
// 可以在created钩子中初始化WebSocket连接
this.initWebSocket();
},
data: () => {
return {
webSocket: null, // WebSocket对象
},
},
beforeDestroy() {
// 组件销毁前关闭WebSocket连接
if (this.webSocket) {
this.webSocket.close();
}
},
methods: {
initWebSocket() {
// 替换为你的WebSocket服务端地址
const wsUrl = "ws://192.168.200.131:8059/clientSocket";
this.webSocket = new WebSocket(wsUrl);
// 打开连接
this.webSocket.onopen = () => {
console.log("WebSocket连接已打开");
};
// 接收消息
this.webSocket.onmessage = (event) => {
console.log("接收到服务器消息:", event.data);
// 处理接收到的数据
this.handleData(event.data);
};
// 连接关闭
this.webSocket.onclose = () => {
console.log("WebSocket连接已关闭");
// 可以在这里实现重连逻辑
this.reconnectWebSocket();
};
// 连接错误
this.webSocket.onerror = (error) => {
console.error("WebSocket发生错误:", error);
};
},
handleData(data) {
// 处理接收到的数据
this.onLinePlate_3500Q();
this.onLinePlate_3500T();
this.onLinePlate_2800Q();
this.onLinePlate_2800T();
},
reconnectWebSocket() {
// 实现重连逻辑
setTimeout(() => {
this.initWebSocket();
}, 5000); // 5秒后重连
},
},
java:
1.pom.xml
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
2.启动类application
@Bean
public ThreadPoolTaskScheduler taskScheduler(){
ThreadPoolTaskScheduler taskScheduler = new ThreadPoolTaskScheduler();
taskScheduler.setPoolSize(10);
taskScheduler.initialize();
return taskScheduler;
}
3.新建一个WebSocketConfig.java
package com.alnan.unit.WebSocket;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Bean;
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;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;
/**
* @author
* @date
**/
@Configuration
@EnableWebSocket
//public class WebSocketConfig implements WebSocketConfigurer {
public class WebSocketConfig {
// @Override
// public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
// registry.addHandler(new WebSocketHandler(), "/clientSocket").setAllowedOrigins("*");
// }
@Bean
public ServerEndpointExporter serverEndpoint() {
return new ServerEndpointExporter();
}
/**
* 注意事项：
* WebSocket启动的时候优先于spring容器，从而导致在WebSocketServer中调用业务Service会报空指针异常
* 所以需要在WebSocketServer中将所需要用到的service给静态初始化一下
* 此处提前注入
*/
// @Autowired
// private void setXxx(XxxService xxxService) {
// WebSocketServer.xxxService = xxxService;
// }
}
4.新建一个WebSocketServer类
package com.alnan.unit.WebSocket;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Component;
import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.concurrent.CopyOnWriteArraySet;
/**
* @author
* @date 2023/11/8
* @description: 若在此类中直接调用service方法失败，需要加上：public static XxxService xxxService; 另外在config中注入实例
**/
@Slf4j
@Component
@ServerEndpoint(value = "/clientSocket")
public class WebSocketServer {
/**
* 当前连接数
*/
private static int onlineCount = 0;
/**
* concurrent包的线程安全Set，用来存放每个客户端对应的MyWebSocket对象
*/
private static CopyOnWriteArraySet<WebSocketServer> webSocketSet = new CopyOnWriteArraySet<>();
/**
* 与某个客户端的连接会话，需要通过它来给客户端发送数据
*/
private Session session;
/**
* 接收的用户id
*/
private String userId;
/**
* 连接建立成功调用的方法,客户端进来请求这个，并返回
*/
@OnOpen
public void onOpen(Session session) {
this.session = session;
webSocketSet.add(this);
addOnlineCount(); //在线数加1
log.info("有新连接加入！当前在线人数为" + getOnlineCount());
try {
sendMessage("连接成功");
} catch (IOException e) {
log.error("websocket IO异常", e);
}
}
/**
* 连接关闭调用的方法
*/
@OnClose
public void onClose() {
webSocketSet.remove(this);
subOnlineCount(); //在线数减1
log.info("有一连接关闭！当前在线人数为" + getOnlineCount());
}
/**
* 收到客户端消息后调用的方法
*
* @param message 客户端发送过来的消息
*/
@OnMessage
public void onMessage(String message) {
log.info("来自客户端的消息:" + message);
//群发消息
for (WebSocketServer item : webSocketSet) {
try {
item.sendMessage(message);
} catch (IOException e) {
log.error("发送消息失败", e);
}
}
}
/**
* @param error 错误
*/
@OnError
public void onError( Throwable error) {
log.error("发生错误", error);
}
/**
* 发送消息
* @param message 消息
* @throws IOException 异常
*/
public void sendMessage(String message) throws IOException {
this.session.getBasicRemote().sendText(message);
}
/**
* 群发自定义消息
*/
public static void sendInfo(String message) {
log.info("消息内容：" + message);
for (WebSocketServer item : webSocketSet) {
try {
//这里可以设定只推送给这个sid的，为null则全部推送
item.sendMessage(message);
} catch (IOException e) {
log.error("消息发送失败", e);
}
}
}
/**
* 获取在线人数
* @return 在线人数
*/
public static synchronized int getOnlineCount() {
return onlineCount;
}
/**
* 在线人数加一
*/
public static synchronized void addOnlineCount() {
WebSocketServer.onlineCount++;
}
/**
* 在线人数减一
*/
public static synchronized void subOnlineCount() {
WebSocketServer.onlineCount--;
}
}
5.后端调用方法，主动给客户端发消息
WebSocketServer.sendInfo("dataReload");
