WebSocket介绍
WebSocket 是一种网络传输协议,可在单个 TCP 连接上进行全双工通信,位于 OSI 模型的应用层WebSocket 协议在 2011 年由 IETF 标准化为 RFC 6455,后由 RFC 7936 补充规范。WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在 WebSocketAPI 中,浏览器和服务器只需要完成一次握手,两者之间就可以创建持久性的连接,并进行双向数据传输
环境介绍
springboot
pom文件
。
<!--spring 版本-->
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>3.0.5</version>
</parent>
websocket依赖
<!--websocket-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
Vue
"vue": "3.2.45",
"websocket": "^1.0.34"
后端代码示例
目录结构
配置类
package gzsf.epg.sever.webSocket.config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;
/**
* webSocket的配置类
* @author
* @date 2023/10/7
*/
@Configuration
public class WebSocketConfig {
@Bean
public ServerEndpointExporter serverEndpointExporter(){
return new ServerEndpointExporter();
}
}
package gzsf.epg.sever.webSocket.websocket;
import jakarta.websocket.Session;
/**
* @author
* @date 2023/10/7
*/
public class WebSocketClient {
// 与某个客户端的连接会话,需要通过它来给客户端发送数据
private Session session;
//连接的uri
private String uri;
public Session getSession() {
return session;
}
public void setSession(Session session) {
this.session = session;
}
public String getUri() {
return uri;
}
public void setUri(String uri) {
this.uri = uri;
}
}
如下是后端发送消息的配置,如需发送文本类的数据需要配置这个
package gzsf.epg.sever.webSocket.util;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.json.JsonMapper;
import gzsf.epg.sever.datacheck.vo.ExportVo;
import jakarta.websocket.EncodeException;
import jakarta.websocket.Encoder;
import jakarta.websocket.EndpointConfig;
public class ServerEncoder implements Encoder.Text<ExportVo> {
@Override
public void destroy() {
// TODO Auto-generated method stub
// 这里不重要
}
@Override
public void init(EndpointConfig arg0) {
// TODO Auto-generated method stub
// 这里也不重要
}
/*
* encode()方法里的参数和Text<T>里的T一致,如果你是Student,这里就是encode(Student student)
*/
@Override
public String encode(ExportVo responseMessage) throws EncodeException {
try {
JsonMapper jsonMapper = new JsonMapper();
return jsonMapper.writeValueAsString(responseMessage);
} catch ( JsonProcessingException e) {
e.printStackTrace();
return null;
}
}
}
服务类
package gzsf.epg.sever.webSocket.service;
import gzsf.epg.sever.datacheck.vo.ExportVo;
import gzsf.epg.sever.webSocket.util.ServerEncoder;
import gzsf.epg.sever.webSocket.websocket.WebSocketClient;
import jakarta.websocket.*;
import jakarta.websocket.server.PathParam;
import jakarta.websocket.server.ServerEndpoint;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.context.ApplicationContext;
import org.springframework.stereotype.Component;
import java.io.IOException;
import java.util.concurrent.ConcurrentHashMap;
/**
* @author
* @date 2023/10/7
*/
@ServerEndpoint(value = "/websocket/{userName}", encoders = {ServerEncoder.class})
@Component
public class WebSocketService {
private static final Logger log = LoggerFactory.getLogger(WebSocketService.class);
private static ApplicationContext applicationContext;
public static void setApplicationContext(ApplicationContext context) {
applicationContext = context;
}
private static ConcurrentHashMap<String, WebSocketClient> webSocketMap = new ConcurrentHashMap<>();
/**
* 与某个客户端的连接会话,需要通过它来给客户端发送数据
*/
private Session session;
/**
* 接收userName
*/
private String userName;
/**
* 客户端与服务端连接成功
*
* @param session
*/
@OnOpen
public void onOpen(Session session, @PathParam("userName") String userName) {
this.session = session;
//根据token获取用户名
this.userName = userName;
WebSocketClient client = new WebSocketClient();
client.setSession(session);
client.setUri(session.getRequestURI().toString());
webSocketMap.put(userName, client);
log.info("连接成功!"+session.getRequestURI().toString());
log.info("连接成功!"+session);
}
/**
* 客户端与服务端连接关闭
*/
@OnClose
public void onClose() {
log.info("连接关闭!");
}
/**
* 客户端与服务端连接异常
*
* @param error
* @param session
*/
@OnError
public void onError(Throwable error, Session session) {
}
/**
* 客户端向服务端发送消息
*
* @param message
* @throws IOException
*/
@OnMessage
public void onMsg(Session session, String message) throws IOException {
log.info("消息测试!");
}
public static void sendVo(String userName, ExportVo vo) {
try {
WebSocketClient webSocketClient = webSocketMap.get(userName);
if (webSocketClient != null) {
webSocketClient.getSession().getBasicRemote().sendObject(vo);
}
} catch (IOException e) {
e.printStackTrace();
throw new RuntimeException(e.getMessage());
} catch (EncodeException e) {
throw new RuntimeException(e.getMessage());
}
}
/**
* 向指定客户端发送消息
*
* @param message
*/
public static void sendMessage(String userName, String message) {
try {
log.info("准备发消息!"+userName);
WebSocketClient webSocketClient = webSocketMap.get(userName);
log.info("连接成功》》》》》》》》》"+webSocketMap);
if (webSocketClient != null) {
log.info("发送的消息是!"+message);
webSocketClient.getSession().getBasicRemote().sendText(message);
}
} catch (IOException e) {
e.printStackTrace();
log.info("失败");
throw new RuntimeException(e.getMessage());
}
}
}
需要注意
修改启动类如下,服务类就能注入,否则在调用service的时候会空指针异常,具体原因可以去了解下 spring 默认管理
package gzsf.epg.sever;
import gzsf.epg.common.core.utils.SpringContextUtils;
import gzsf.epg.common.security.annotation.EnableCustomConfiguration;
import gzsf.epg.common.security.annotation.EnableFeignBeanClients;
import gzsf.epg.sever.webSocket.service.WebSocketService;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.context.ConfigurableApplicationContext;
import org.springframework.context.annotation.Import;
/**
* @author
* @date 2023/10/19
*/
@EnableCustomConfiguration
@EnableFeignBeanClients
@SpringBootApplication
@Import(SpringContextUtils.class)
public class ServiceApplication {
private static final Logger logger = LoggerFactory.getLogger(ServiceApplication.class);
public static void main(String[] args) {
ConfigurableApplicationContext run = SpringApplication.run(ServiceApplication.class, args);
//解决WebSocket不能注入的问题
WebSocketService.setApplicationContext(run);
}
}
前端代码示例
连接地址里 admin
为用户名,因为websocket是单独为每个用户创建长连接,发送的消息也是一对一发送,当然也可以改为一对多,全权在业务怎么用。前端可获取用户名传到后端,如下代码示例是写死的
注意:前端也需下载依赖
下面展示一些 内联代码片
。
npm install vue-native-websocket
/**
* 创建webSocket连接
*/
function createWS() {
webSocket.value = new WebSocket("ws://127.0.0.1:8080/server/websocket/admin");
//onopen事件监听
webSocket.value.addEventListener('open', e => {
console.log('与服务端连接打开->', e)
}, false)
//onclose事件监听
webSocket.value.addEventListener('close', e => {
console.log('与服务端连接关闭->', e)
}, false)
//onmessage事件监听
webSocket.value.addEventListener('message', e => {
console.log('接收到服务端的消息->', e)
}, false)
//onerror事件监听
webSocket.value.addEventListener('error', e => {
}, false)
}
只需在需要开启长连接的时候调用createWS();
即可;
简单说明一下执行流程
前端
在需要开启长连接处调用createWS();
开启长连接即可,需注意用户名(该用户名就是唯一标识)传递。
后端
前端发起建立长连接请求后,执行WebSocketService类中的onOpen方法,创建client并存放在map集合中以便执行完业务后发送反馈消息。
/**
* 客户端与服务端连接成功
*
* @param session
*/
@OnOpen
public void onOpen(Session session, @PathParam("userName") String userName) {
this.session = session;
//根据token获取用户名
this.userName = userName;
WebSocketClient client = new WebSocketClient();
client.setSession(session);
client.setUri(session.getRequestURI().toString());
webSocketMap.put(userName, client);
log.info("连接成功!"+session);
}
如何调用
后端接收到前端请求后可新建线程执行业务流程,先返回执行中状态给前端,防止前后端连接超时的报错。
@PostMapping("/importDx")
public AjaxResult importDx(@RequestParam("xlsxFile") MultipartFile file) {
this.onCallback(file);
return AjaxResult.success();
}
public void onCallback(MultipartFile file) {
ExecutorService executor = Executors.newCachedThreadPool();
executor.execute(() -> {
try {
//服务类代码
} catch (IOException e) {
throw new RuntimeException(e);
}
});
executor.shutdown();
}
业务执行完成后可调用,username为创建websocket的唯一标识。
/**
* 调用sendMessage方法使用
*/
WebSocketService.sendMessage(username, "执行成功");
只要是在长连接里面,想做什么全看业务,简单来说干什么都行!至此WebSocket使用结束