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. 






页面效果：


 




 






            

            
posted @ 
2017-03-02 13:21 
庞国明 
阅读(3342) 
评论(2) 
编辑 
收藏 
举报