zoukankan      html  css  js  c++  java

  • Java 与 JavaScript 对websocket的使用

    ebsocket，HTML5中新一代全双工通信协议。其底层仍然是http协议。

    传统 HTTP 请求响应客户端服务器交互图

    图 1. 传统 HTTP 请求响应客户端服务器交互图

    WebSocket 请求响应客户端服务器交互图

    图 2.WebSocket 请求响应客户端服务器交互图

    WebSocket 客户端支持
    浏览器支持情况
    Chrome Chrome version 4+支持
    Firefox Firefox version 5+支持
    IE IE version 10+支持
    Safari IOS 5+支持
    Android Brower Android 4.5+支持

    webSocket消息推送例子

    Java后端

    pom.xml

    [javascript] view plain copy
     
     print?在CODE上查看代码片派生到我的代码片
    1. <!-- webSocket -->  
    2. <dependency>  
    3.     <groupId>javax</groupId>  
    4.     <artifactId>javaee-api</artifactId>  
    5.     <version>7.0</version>  
    6. </dependency>  
    


    


    （tomcat7.027开始支持websocket，但是tomcat7.047开始才能使用注解形式的websoket，从该版本开始websoket被集成进入了javaee7中）
    


    java代码：
    


    

    

    [java] view plain copy

     
    
 print?在CODE上查看代码片派生到我的代码片
    

    

      

    1. package com.student.system.listen;  
      2. 

    2.   
      3. 

    3. import java.io.IOException;  
      4. 

    4. import java.util.concurrent.CopyOnWriteArraySet;  
      5. 

    5.   
      6. 

    6. import javax.websocket.OnClose;  
      7. 

    7. import javax.websocket.OnError;  
      8. 

    8. import javax.websocket.OnMessage;  
      9. 

    9. import javax.websocket.OnOpen;  
      10. 

    10. import javax.websocket.Session;  
      11. 

    11. import javax.websocket.server.ServerEndpoint;  
      12. 

    12.   
      13. 

    13. @ServerEndpoint("/websocket")  
      14. 

    14. public class WebSocketListen {  
      15. 

    15.   
      16. 

    16.     // 静态变量，用来记录当前在线连接数。应该把它设计成线程安全的。  
      17. 

    17.     private static int onlineCount = 0;  
      18. 

    18.   
      19. 

    19.     // concurrent包的线程安全Set，用来存放每个客户端对应的MyWebSocket对象。若要实现服务端与单一客户端通信的话，可以使用Map来存放，其中Key可以为用户标识  
      20. 

    20.     private static CopyOnWriteArraySet<WebSocketListen> webSocketSet = new CopyOnWriteArraySet<WebSocketListen>();  
      21. 

    21.   
      22. 

    22.     // 与某个客户端的连接会话，需要通过它来给客户端发送数据  
      23. 

    23.     private Session session;  
      24. 

    24.   
      25. 

    25.     /** 
      26. 

    26.      * 连接建立成功调用的方法 
      27. 

    27.      *  
      28. 

    28.      * @param session 
      29. 

    29.      *            可选的参数。session为与某个客户端的连接会话，需要通过它来给客户端发送数据 
      30. 

    30.      */  
      31. 

    31.     @OnOpen  
      32. 

    32.     public void onOpen(Session session) {  
      33. 

    33.         this.session = session;  
      34. 

    34.         webSocketSet.add(this); // 加入set中  
      35. 

    35.         addOnlineCount(); // 在线数加1  
      36. 

    36.         System.out.println("有新连接加入！当前在线人数为" + getOnlineCount());  
      37. 

    37.     }  
      38. 

    38.   
      39. 

    39.     /** 
      40. 

    40.      * 连接关闭调用的方法 
      41. 

    41.      */  
      42. 

    42.     @OnClose  
      43. 

    43.     public void onClose() {  
      44. 

    44.         webSocketSet.remove(this); // 从set中删除  
      45. 

    45.         subOnlineCount(); // 在线数减1  
      46. 

    46.         System.out.println("有一连接关闭！当前在线人数为" + getOnlineCount());  
      47. 

    47.     }  
      48. 

    48.   
      49. 

    49.     /** 
      50. 

    50.      * 收到客户端消息后调用的方法 
      51. 

    51.      *  
      52. 

    52.      * @param message 
      53. 

    53.      *            客户端发送过来的消息 
      54. 

    54.      * @param session 
      55. 

    55.      *            可选的参数 
      56. 

    56.      */  
      57. 

    57.     @OnMessage  
      58. 

    58.     public void onMessage(String message, Session session) {  
      59. 

    59.         System.out.println("来自客户端的消息:" + message);  
      60. 

    60.         // 群发消息  
      61. 

    61.         for (WebSocketListen item : webSocketSet) {  
      62. 

    62.             try {  
      63. 

    63.                 item.sendMessage(message);  
      64. 

    64.             } catch (IOException e) {  
      65. 

    65.                 e.printStackTrace();  
      66. 

    66.                 continue;  
      67. 

    67.             }  
      68. 

    68.         }  
      69. 

    69.     }  
      70. 

    70.   
      71. 

    71.     /** 
      72. 

    72.      * 发生错误时调用 
      73. 

    73.      *  
      74. 

    74.      * @param session 
      75. 

    75.      * @param error 
      76. 

    76.      */  
      77. 

    77.     @OnError  
      78. 

    78.     public void onError(Session session, Throwable error) {  
      79. 

    79.         System.out.println("发生错误");  
      80. 

    80.         error.printStackTrace();  
      81. 

    81.     }  
      82. 

    82.   
      83. 

    83.     /** 
      84. 

    84.      * 这个方法与上面几个方法不一样。没有用注解，是根据自己需要添加的方法。 
      85. 

    85.      *  
      86. 

    86.      * @param message 
      87. 

    87.      * @throws IOException 
      88. 

    88.      */  
      89. 

    89.     public void sendMessage(String message) throws IOException {  
      90. 

    90.         this.session.getBasicRemote().sendText(message);  
      91. 

    91.         // this.session.getAsyncRemote().sendText(message);  
      92. 

    92.     }  
      93. 

    93.   
      94. 

    94.     public static synchronized int getOnlineCount() {  
      95. 

    95.         return onlineCount;  
      96. 

    96.     }  
      97. 

    97.   
      98. 

    98.     public static synchronized void addOnlineCount() {  
      99. 

    99.         WebSocketListen.onlineCount++;  
      100. 

    100.     }  
      101. 

    101.   
      102. 

    102.     public static synchronized void subOnlineCount() {  
      103. 

    103.         WebSocketListen.onlineCount--;  
      104. 

    104.     }  
      105. 

    105. }  
      106. 

    


    JSP页面
    



    

    

    [html] view plain copy

     
    

 print?在CODE上查看代码片派生到我的代码片
    


    

      

    1. <%@ page language="java" contentType="text/html; charset=UTF-8"  
      2. 

    2.     pageEncoding="UTF-8"%>  
      3. 

    3. <html>  
      4. 

    4. <head>  
      5. 

    5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
      6. 

    6. <title>websocket</title>  
      7. 

    7. </head>  
      8. 

    8. <body>  
      9. 

    9.     Welcome<br/>  
      10. 

    10.     <input id="text" type="text"/>  
      11. 

    11.         <button onclick="send()">发送消息</button>  
      12. 

    12.         <hr/>       
      13. 

    13.         <button onclick="closeWebSocket()">关闭WebSocket连接</button>  
      14. 

    14.         <hr/>  
      15. 

    15.         <div id="message"></div>  
      16. 

    16.   <script type="text/javascript">  
      17. 

    17.     var websocket = null;  
      18. 

    18.        //判断当前浏览器是否支持WebSocket  
      19. 

    19.        if ('WebSocket' in window) {  
      20. 

    20.           websocket = new WebSocket("ws://localhost:8028/ThesisManage/websocket");  
      21. 

    21.       }  
      22. 

    22.       else {  
      23. 

    23.           alert('当前浏览器 Not support websocket')  
      24. 

    24.       }  
      25. 

    25.      
      26. 

    26.       //连接发生错误的回调方法  
      27. 

    27.       websocket.onerror = function () {  
      28. 

    28.            setMessageInnerHTML("WebSocket连接发生错误");  
      29. 

    29.       };  
      30. 

    30.      
      31. 

    31.        //连接成功建立的回调方法  
      32. 

    32.        websocket.onopen = function () {  
      33. 

    33.            setMessageInnerHTML("WebSocket连接成功");  
      34. 

    34.        }  
      35. 

    35.      
      36. 

    36.       //接收到消息的回调方法  
      37. 

    37.        websocket.onmessage = function (event) {  
      38. 

    38.            setMessageInnerHTML(event.data);  
      39. 

    39.       }  
      40. 

    40.     
      41. 

    41.        //连接关闭的回调方法  
      42. 

    42.        websocket.onclose = function () {  
      43. 

    43.           setMessageInnerHTML("WebSocket连接关闭");  
      44. 

    44.        }  
      45. 

    45.      
      46. 

    46.        //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。  
      47. 

    47.        window.onbeforeunload = function () {  
      48. 

    48.            closeWebSocket();  
      49. 

    49.        }  
      50. 

    50.      
      51. 

    51.        //将消息显示在网页上  
      52. 

    52.        function setMessageInnerHTML(innerHTML) {  
      53. 

    53.           document.getElementById('message').innerHTML += innerHTML + '<br/>';  
      54. 

    54.       }  
      55. 

    55.      
      56. 

    56.       //关闭WebSocket连接  
      57. 

    57.        function closeWebSocket() {  
      58. 

    58.            websocket.close();  
      59. 

    59.        }  
      60. 

    60.     
      61. 

    61.        //发送消息  
      62. 

    62.        function send() {  
      63. 

    63.           var message = document.getElementById('text').value;  
      64. 

    64.           websocket.send(message);  
      65. 

    65.        }  
      66. 

    66.   </script>  
      67. 

    67. </body>  
      68. 

    68. </html>  
      69. 


    

    

    页面效果：
    


    


    
    
                
    
                
              
    • 
              
    
              
  • 

                相关阅读:
    
                
                  如何把项目部署到OSChina上
                    
    读书笔记----10日摘抄整理(05)
                    
    读书笔记----10日摘抄整理(04)
                    
    读书笔记----10日摘抄整理(03)
                    
    读书笔记----10日摘抄整理(02)
                    
    读书笔记----10日摘抄整理(01)
                    
    前五题半
                    
    作业3
                    
    作业： 1.8（圆的面积和周长）编写程序，使用以下的公式计算并显示半径为5.5的圆的面积和周长。
                    
    作业：1.12假设一个跑步者1小时40分钟35秒 内跑了24英里。编写一个程序显示以每小时多少公里为单位的平均速度值（注意，1英里等于1.6公里。）
                    
                        
              
    • 
              
    
              
  • 
                原文地址：https://www.cnblogs.com/pangguoming/p/6490091.html
              
    • 

            

          



          
          

            

            

          

        

      

      



      

      

        

          Copyright © 2011-2022 走看看