SpringBoot实现WebSocket全双工通信的项目实践
作者:失去斗志的菜鸟
本文主要介绍了SpringBoot实现WebSocket全双工通信的项目实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
一、后端pom.xml引入依赖
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> </dependency>
二、启动类注入Bean
@SpringBootApplication public class TtSdemoApplication { public static void main(String[] args) { SpringApplication.run(TtSdemoApplication.class, args); } @Bean public ServerEndpointExporter serverEndpointExporter() { return new ServerEndpointExporter(); } }
三、编写WebSocket类
package com.zj.ttsdemo.controller; import lombok.extern.slf4j.Slf4j; import org.springframework.stereotype.Component; import javax.websocket.*; import javax.websocket.server.ServerEndpoint; import java.io.IOException; /** * Created by * * @Author: JoyceZhang * @Date: 2023/05/25/15:28 * @Description: */ @Slf4j @ServerEndpoint(value="/websocket") @Component public class Websocket { private static Session[] sessionContainer = new Session[2]; /** * A,B与服务器建立连接 */ @OnOpen public void onOpen(Session session) { if (sessionContainer[0] == null && sessionContainer[1] == null) { sessionContainer[0] = session; log.info("a连接成功"); } else if (sessionContainer[0] != null && sessionContainer[1] == null) { sessionContainer[1] = session; log.info("b连接成功"); } else { log.info("连接失败"); } } /** * 链接关闭 */ @OnClose public void onClose(Session session) { for(int i=0;i<sessionContainer.length;i++){ if(sessionContainer[i] == session){ sessionContainer[i] = null; log.info((i==0?"a":"b")+"断开连接"); } } } /** * 得到另一个session对象 */ private Session getOtherSession(Session session) { for(int i = 0; i<sessionContainer.length;i++){ if(session == sessionContainer[i]){ log.info("获取到另一个session"); return sessionContainer[(i==0?1:0)]; } } return null; } /** * 向另一个session发送消息 */ @OnMessage public void sendMessage(String message,Session session) throws IOException{ Session otherSession = this.getOtherSession(session); log.info("发送消息"+message+"到"+(otherSession==sessionContainer[0]?"a":"b")); otherSession.getBasicRemote().sendText(message); } /** * 异常处理 */ @OnError public void onError(Session session, Throwable error) { log.error("发生错误"); error.printStackTrace(); } }
四、编写测试页面
在resource/static目录下编写chat.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input id = "text" type ="text"> <button onclick = "send()">Send</button> <button onclick = "closeWebSocket()">Close</button> <div id = "message"></div> </body> <script type="text/javascript"> var websocket = null; //判断当前浏览器是否支持WebSocket if('WebSocket' in window){ websocket = new WebSocket("ws://localhost:8083/websocket"); } else{ alert('Not support websocket') } //连接发生错误的回调方法 websocket.onerror = function(){ setMessageInnerHTML("服务器通信故障"); }; //连接成功建立的回调方法 websocket.onopen = function(event){ setMessageInnerHTML("与服务器通信成功"); } //接收到消息的回调方法 websocket.onmessage = function(event){ setMessageInnerHTML(event.data); } //连接关闭的回调方法 websocket.onclose = function(){ setMessageInnerHTML("WebSocket连接关闭"); } //监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。 window.onbeforeunload = function(){ websocket.close(); } //将消息显示在网页上 function setMessageInnerHTML(innerHTML){ document.getElementById('message').innerHTML += innerHTML + '<br/>'; } //关闭连接 function closeWebSocket(){ websocket.close(); } //发送消息 function send(){ var message = document.getElementById('text').value; websocket.send(message); } </script> </html>
五、通信测试
【IT老齐238】十分钟上手WebSocket全双工通信协议_哔哩哔哩_bilibili
到此这篇关于SpringBoot实现WebSocket全双工通信的项目实践的文章就介绍到这了,更多相关SpringBoot WebSocket全双工通信内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
您可能感兴趣的文章:
- Springboot实现人脸识别与WebSocket长连接的实现代码
- SpringBoot+WebSocket实现IM及时通讯的代码示例
- SpringBoot+websocket实现消息对话功能
- SpringBoot 整合WebSocket 前端 uniapp 访问的详细方法
- Springboot+WebSocket+Netty实现在线聊天/群聊系统
- SpringBoot集成WebSocket的两种方式(JDK内置版和Spring封装版)
- SpringBoot中使用WebSocket的教程分享
- 使用WebSocket+SpringBoot+Vue搭建简易网页聊天室的实现代码
- SpringBoot整合WebSocket实现后端向前端发送消息的实例代码
- Springboot+WebSocket实现在线聊天功能
- springboot中websocket简单实现
- Spring Boot中的WebSocketMessageBrokerConfigurer接口使用