Java WebSocket 的使用
什么是WebSocket
WebSocket是一种在Web开发中用于实现双向双向通信的协议。
它允许在客户端和服务器之间建立持久性的连接,使得数据可以在双方之间进行实时交换,而不需要客户端发起多个HTTP请求
WebSocket的特点:
- 双向通信
webSocke允许客户端和服务器之间双向实时通信,客户端可以向服务器发送消息,服务器也可以向客户端发送消息。
- 持久连接
webSocket连接是持久性的,一旦建立连接,他会保持打开状态,直到其中一方主动关闭连接
- 低延迟
webSocket使用单个TCP连接进行通信,相比多次HTTP请求-响应循环,具有更低的通信延迟
- 轻量级
webSocket协议相对简单,通信数据头部较小,减少了通信的额外开销
webSocket和HTTP的区别
- 通信模式
HTTP是一种无状态的请求-响应协议,客户端向服务器发送请求,服务器处理请求并返回响应,然后连接立即关闭。每个请求都是独立的,不会保持连接状态
WebSocket允许在客户端和服务器之间建立持久性的双向连接,客户端和服务器可以通过这个连接实时的交换数据。客户端和服务器都可以同时发送和接收数据
- 连接性
HTTP协议是基于请求-响应模式的,每次请求都需要客户端发起新的连接,并在收到响应后关闭
WebSocket允许客户端和服务器之间建立持久性连接,连接建立之后可以一直保持打开状态,直到其中一方主动关闭连接或者发生错误
- 数据格式
HTTP协议通常用于传输文档、图像、视频等静态资源或者动态资源,数据格式通常是文本或者是二进制,但是在每次请求和响应中都需要携带HTTP的头部信息
webSocket协议支持传输文本或二进制数据,数据格式更加灵活,可以根据应用程序的需要自定义
- 性能和效率
HTTP协议在每次请求-响应周期中都需要消耗额外的资源来建立和关闭连接,通信效率相对较低
webSocket通过在客户端和服务器之间建立持久连接,减少建立和关闭的开销,通信效率更高,延迟更低
webSocket的常用常见
在线聊天、股票行情、在线投票和调查,实时地图和位置等
怎么用WebSocket
前端(Vue)
<template> <div> <el-form ref="form" :model="form" :rules="rules" label-width="80px"> <el-input v-model="form.message" type="text"></el-input> <el-button type="success" @click="send">发送消息</el-button> <el-button type="danger" @click="close">关闭连接</el-button> </el-form> </div> </template> <script> export default { name: "HelloWorld", props: { msg: String, }, data() { return { clientId: null, form: { message: "" }, rules: {}, path: null, socket: "", }; }, mounted() { //进行初始化操作 this.init(); }, methods: { init() { //判断浏览器是否支持webSocket if (typeof WebSocket === "undefined") { alert("您的浏览器不支持socket"); } else { //clientId是表示哪个客户端 this.clientId = Math.random().toString(36).substring(2); console.log("clientId", this.clientId); //初始化webSocket的地址 this.path = "ws://127.0.0.1:9140/ws/" + this.clientId; //创建webSocket对象 this.socket = new WebSocket(this.path); this.socket.onopen = this.open(); this.socket.onerror = this.error(); this.socket.onmessage = this.getMessage(); } }, open() { console.log("socket连接成功"); }, error() { console.log("socket连接错误"); }, getMessage() { console.log(this.form.message); }, close() { console.log("socket已经关闭"); }, send() { this.socket.send(this.form.message); }, }, destroyed() { //销毁监听 this.socket.onclose = this.close; }, }; </script> <style scoped> </style>
后端(Java)
- 添加依赖(自己选择版本,我用的版本是这个)
<!--websocket--> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> <version>2.1.8.RELEASE</version> </dependency>
- 创建注册WebSocket的服务组件
/** * 注册web Socket的服务组件 */ @Configuration public class WebSocketConfiguration { @Bean public ServerEndpointExporter serverEndpointExporter(){ return new ServerEndpointExporter(); } }
- 通信服务
/** * 导入web Socket服务端组件web Socket Server用于和客户端通信 */ @Component @ServerEndpoint("/ws/{clientId}") public class WebSocketServer { private static Map<String, Session> sessionMap = new HashMap<>(); @OnOpen public void opOpen(Session session, @PathParam("clientId") String clientId) { System.err.println("客户端:" + clientId + "建立连结"); sessionMap.put(clientId, session); } @OnClose public void onClose(@PathParam("clientId") String clientId) { sessionMap.remove(clientId); } /** * 收到客户端消息后调用的方法 * * @param message 客户端发送过来的消息 * @param clientId */ @OnMessage public void onMessage(String message, @PathParam("clientId") String clientId) { System.err.println("收到来自客户端" + clientId + "的消息:" + message); } public void sendToAllClient(String message) { Collection<Session> sessions = sessionMap.values(); for (Session session : sessions ) { try { session.getBasicRemote().sendText(message); } catch (Exception e) { e.printStackTrace(); } } } }
- 服务端定时发送消息
注意如果用了定时器需要在启动类加上@EnableScheduling注解,否则定时任务不生效
@Component public class WebSocketTask { @Autowired private WebSocketServer webSocketServer; /** * 通过WebSocket每隔5秒向客户端发送消息 */ @Scheduled(cron = "0/5 * * * * ?") public void sendMessageToClient(){ System.err.println(LocalDateTime.now()); webSocketServer.sendToAllClient("这是来自服务端的消息:"+ DateTimeFormatter.ofPattern("HH:mm:ss").format(LocalDateTime.now())); } }