网站设计的重要性,电子商务网站建设与管理课后答案,一家只做直购的网站,德州网站收录十四、WebSocket WebSocket是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工通信#xff0c;浏览器和服务器只需要完成一次握手#xff0c; 两者之间就可以创建持久性的连接#xff0c;并进行双向数据传输。 HTTP协议和WebSocket协议对比#xff1a;
HTTP是短连…十四、WebSocket WebSocket是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工通信浏览器和服务器只需要完成一次握手 两者之间就可以创建持久性的连接并进行双向数据传输。 HTTP协议和WebSocket协议对比
HTTP是短连接WebSocket是长连接HTTP通信是单向的基于请求响应模式WebSocket支持双向通信HTTP和WebSocket底层都是TCP连接
应用场景视频弹幕、网页聊天、体育实况更新、股票基金报价实时更新。 1、入门案例
实现步骤 直接使用websocket.html页面作为WebSocket客户端 html
body classgray-bgdiv classonlineinput idtext typetextbutton onclicksend()发送消息/buttonbutton onclickcloseWebSocket()关闭连接/buttondiv idmessage/div /divscript th:inlinejavascriptlet websocket null;let host document.location.host;let sidgetRandomIntInclusive(0,1000000)function getRandomIntInclusive(min, max) {min Math.ceil(min);max Math.floor(max);return Math.floor(Math.random() * (max - min 1)) min; // 最小值和最大值都是包含的
}//判断当前浏览器是否支持WebSocketif (WebSocket in window) {//连接WebSocket节点websocket new WebSocket(ws://localhost:9091/ws/sid);} else {alert(浏览器不支持webSocket);}//连接发生错误的回调方法websocket.onerror function () {setMessageInnerHTML(连接失败);};//连接成功建立的回调方法websocket.onopen function (event) {setMessageInnerHTML(连接成功);};//接收到消息的回调方法websocket.onmessage function (event) {let data event.data;console.log(后端传递的数据: data);//将后端传递的数据渲染至页面setMessageInnerHTML(data)};//连接关闭的回调方法websocket.onclose function () {setMessageInnerHTML(已关闭);};//监听窗口关闭事件当窗口关闭时主动去关闭websocket连接防止连接还没断开就关闭窗口server端会抛异常。window.onbeforeunload function () {websocket.close();};//将消息显示在网页上function setMessageInnerHTML(innerHTML) {document.getElementById(message).innerHTMLinnerHTMLbr/};//手动关闭连接function closeWebSocket() {websocket.close();};//发送消息function send() {let message document.getElementById(text).value;websocket.send(message);setMessageInnerHTML(已向服务器发送内容message)};/script/body
/html导入WebSocket的maven坐标 !-- SpringBoot Websocket --
dependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-websocket/artifactId
/dependency导入WebSocket服务端组件WebSocketServer, 用于和客户端通信 //主要是将目前的类定义成一个websocket服务器端(就像Controller层), 注解的值将被用于监听用户连接的终端访问URL地址,客户端可以通过这个URL来连接到WebSocket服务器端
ServerEndpoint(/ws/{sid})
Component
Slf4j
public class WebSocketService {/*** 用来存放所有的webSocket连接*/private static MapString,Session sessionMapnew HashMap();/*** 连接建立成功调用的方法** param session 会话*/OnOpenpublic void onOpen(Session session, PathParam(sid)String sid) {System.out.println(客户端sid 连接成功);sessionMap.put(sid,session); // 将当前连接加入到连接池中}/*** 收到客户端消息后调用的方法** param message 客户端发送过来的消息*/OnMessagepublic void onMessage(String message, PathParam(sid) String sid) {System.out.println(收到来自窗口: sid 的信息: message);}/*** 连接关闭调用的方法*/OnClosepublic void onClose(PathParam(sid) String sid) {log.info(窗口: sid 关闭了连接);sessionMap.remove(sid); // 移除连接池中的连接}/*** 自定义消息推送、可群发** param message 消息*/public static void sendAllClient(String message) {System.out.println(推送消息到窗口推送内容: message);// 遍历所有连接(获取到Map的全部vaue值进行遍历)for (Session item : sessionMap.values()) {try {item.getBasicRemote().sendText(message); // 发送消息}catch (Exception e){e.printStackTrace();}}}
}导入配置类WebSocketConfiguration, 注册WebSocket的服务端组件 Configuration
public class WebSocketConfig {/*** 这个bean的注册,用于扫描带有ServerEndpoint的注解成为websocket ,如果你使用外置的tomcat就不需要该配置文件*/Beanpublic ServerEndpointExporter serverEndpointExporter() {return new ServerEndpointExporter();}
}导入定时任务类WebSocketTask, 定时向客户端推送数据 Component
public class WebSocketTask {//将WebSocketService注入到WebSocketTask中Autowiredprivate WebSocketService webSocketService;/*** 每5秒执行一次*/Scheduled(cron 0/5 * * * * ? )public void webSocketService(){webSocketService.sendAllInfo(服务器定时推送消息: LocalDateTime.now());}
}
