• WebSocket

    介绍

     
    WebSocket 是基于 TCP 的一种新的网络协议。。它实现了浏览器与服务器全双工通信--浏览器和服务器只需要完成一次握手，两者之间就可以创建持久性的连接，并进行双向数据传输。

    HTTP协议和WebSocket协议对比

    1.HTTP是短连接

    2.WebSocket是长连接

    3.HTTP通信是单向的，基于请求响应模式

    4.WebSocket支持双向通信

    5.HTTP和WebSocket底层都是TCP连接

    应用场景:视频弹幕，网页聊天，体育实况更新，股票基金报价实时更新 

    入门案例

    1.直接使用websocket.html页面作为WebSocket客户端

    1. HTML>
    2. <html>
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>WebSocket Demotitle>
    6. head>
    7. <body>
    8.     <input id="text" type="text" />
    9.     <button onclick="send()">发送消息button>
    10.     <button onclick="closeWebSocket()">关闭连接button>
    11.     <div id="message">
    12.     div>
    13. body>
    14. <script type="text/javascript">
    15.     var websocket = null;
    16.     var clientId = Math.random().toString(36).substr(2);
    17.  
    18.     //判断当前浏览器是否支持WebSocket
    19.     if('WebSocket' in window){
    20.         //连接WebSocket节点
    21.         websocket = new WebSocket("ws://localhost:8080/ws/"+clientId);
    22.     }
    23.     else{
    24.         alert('Not support websocket')
    25.     }
    26.  
    27.     //连接发生错误的回调方法
    28.     websocket.onerror = function(){
    29.         setMessageInnerHTML("error");
    30.     };
    31.  
    32.     //连接成功建立的回调方法
    33.     websocket.onopen = function(){
    34.         setMessageInnerHTML("连接成功");
    35.     }
    36.  
    37.     //接收到消息的回调方法
    38.     websocket.onmessage = function(event){
    39.         setMessageInnerHTML(event.data);
    40.     }
    41.  
    42.     //连接关闭的回调方法
    43.     websocket.onclose = function(){
    44.         setMessageInnerHTML("close");
    45.     }
    46.  
    47.     //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    48.     window.onbeforeunload = function(){
    49.         websocket.close();
    50.     }
    51.  
    52.     //将消息显示在网页上
    53.     function setMessageInnerHTML(innerHTML){
    54.         document.getElementById('message').innerHTML += innerHTML + '
      '      ;
    55.     }
    56.  
    57.     //发送消息
    58.     function send(){
    59.         var message = document.getElementById('text').value;
    60.         websocket.send(message);
    61.     }
    62. 	
    63. 	//关闭连接
    64.     function closeWebSocket() {
    65.         websocket.close();
    66.     }
    67. script>
    68. html>


    2.导入WebSocket的maven坐标

    1.  <dependency>
    2.             <groupId>org.springframework.bootgroupId>
    3.             <artifactId>spring-boot-starter-websocketartifactId>
    4.  dependency>


    3.导入WebSocket服务端组件WebSocketServer，用于和客户端通信

    1.  
    2. /**
    3.  * WebSocket服务
    4.  */
    5. @Component
    6. @ServerEndpoint("/ws/{sid}")
    7. public class WebSocketServer {
    8.  
    9.     //存放会话对象
    10.     private static Map sessionMap = new HashMap();
    11.  
    12.     /**
    13.      * 连接建立成功调用的方法
    14.      */
    15.     @OnOpen
    16.     public void onOpen(Session session, @PathParam("sid") String sid) {
    17.         System.out.println("客户端：" + sid + "建立连接");
    18.         sessionMap.put(sid, session);
    19.     }
    20.  
    21.     /**
    22.      * 收到客户端消息后调用的方法
    23.      *
    24.      * @param message 客户端发送过来的消息
    25.      */
    26.     @OnMessage
    27.     public void onMessage(String message, @PathParam("sid") String sid) {
    28.         System.out.println("收到来自客户端：" + sid + "的信息:" + message);
    29.     }
    30.  
    31.     /**
    32.      * 连接关闭调用的方法
    33.      *
    34.      * @param sid
    35.      */
    36.     @OnClose
    37.     public void onClose(@PathParam("sid") String sid) {
    38.         System.out.println("连接断开:" + sid);
    39.         sessionMap.remove(sid);
    40.     }
    41.  
    42.     /**
    43.      * 群发
    44.      *
    45.      * @param message
    46.      */
    47.     public void sendToAllClient(String message) {
    48.         Collection sessions = sessionMap.values();
    49.         for (Session session : sessions) {
    50.             try {
    51.                 //服务器向客户端发送消息
    52.                 session.getBasicRemote().sendText(message);
    53.             } catch (Exception e) {
    54.                 e.printStackTrace();
    55.             }
    56.         }
    57.     }
    58.  
    59. }

    4.导入配置类WebSocketConfiguration，注册WebSocket的服务端组件

    1.  
    2. /**
    3.  * WebSocket配置类，用于注册WebSocket的Bean
    4.  */
    5. @Configuration
    6. public class WebSocketConfiguration {
    7.  
    8.     @Bean
    9.     public ServerEndpointExporter serverEndpointExporter() {
    10.         return new ServerEndpointExporter();
    11.     }
    12.  
    13. }

    5.导入定时任务类WebSocketTask，定时向客户端推送数据

    1. @Component
    2. public class WebSocketTask {
    3.     @Autowired
    4.     private WebSocketServer webSocketServer;
    5.  
    6.     /**
    7.      * 通过WebSocket每隔5秒向客户端发送消息
    8.      */
    9.     @Scheduled(cron = "0/5 * * * * ?")
    10.     public void sendMessageToClient() {
    11.         webSocketServer.sendToAllClient("这是来自服务端的消息：" + DateTimeFormatter.ofPattern("HH:mm:ss").format(LocalDateTime.now()));
    12.     }
    13. }

  • 相关阅读:
    IDEA的database工具以及对比两个数据库之间的差异（比DBVisualizer和DBeaver方便）
    C++之继承详解(万字讲解)
    网络参考资料搬运（3）
    Python文件操作：读取、打开、写入、关闭、按行读取、文件指针（附零基础学习资料）
    分布式定时任务框架 xxl-job 源码解析
    详解数据仓库之拉链表（原理、设计以及在Hive中的实现）
    vue拖动缩放组件(vue-drag-zoom) 增加禁止缩放拖拽功能
    前端基础之《Bootstrap（13）—JavaScript插件_标签页、工具提示、弹出框、折叠效果和幻灯片》
    解决yolov5权重在linux和Windows上不兼容的问题
    [Angular 基础] - routing 路由(下)
  • 原文地址：https://blog.csdn.net/qq_64376339/article/details/136284386