WebSocket的使用

首先先了解一下wbsocket是什么？

一.WebSocket简单介绍

　　随着互联网的发展，传统的HTTP协议已经很难满足Web应用日益复杂的需求了。近年来，随着HTML5的诞生，WebSocket协议被提出，它实现了浏览器与服务器的全双工通信，扩展了浏览器与服务端的通信功能，使服务端也能主动向客户端发送数据。

　　我们知道，传统的HTTP协议是无状态的，每次请求（request）都要由客户端（如 浏览器）主动发起，服务端进行处理后返回response结果，而服务端很难主动向客户端发送数据；这种客户端是主动方，服务端是被动方的传统Web模式 对于信息变化不频繁的Web应用来说造成的麻烦较小，而对于涉及实时信息的Web应用却带来了很大的不便，如带有即时通信、实时数据、订阅推送等功能的应 用。在WebSocket规范提出之前，开发人员若要实现这些实时性较强的功能，经常会使用折衷的解决方法：轮询（polling）和Comet技术。其实后者本质上也是一种轮询，只不过有所改进。

　　轮询是最原始的实现实时Web应用的解决方案。轮询技术要求客户端以设定的时间间隔周期性地向服务端发送请求，频繁地查询是否有新的数据改动。明显地，这种方法会导致过多不必要的请求，浪费流量和服务器资源。

　　Comet技术又可以分为长轮询和流技术。长轮询改进了上述的轮询技术，减小了无用的请求。它会为某些数据设定过期时间，当数据过期后才会向服务端发送请求；这种机制适合数据的改动不是特别频繁的情况。流技术通常是指客户端使用一个隐藏的窗口与服务端建立一个HTTP长连接，服务端会不断更新连接状态以保持HTTP长连接存活；这样的话，服务端就可以通过这条长连接主动将数据发送给客户端；流技术在大并发环境下，可能会考验到服务端的性能。

　　这两种技术都是基于请求-应答模式，都不算是真正意义上的实时技术；它们的每一次请求、应答，都浪费了一定流量在相同的头部信息上，并且开发复杂度也较大。

　　伴随着HTML5推出的WebSocket，真正实现了Web的实时通信，使B/S模式具备了C/S模式的实时通信能力。WebSocket的工作流程是这 样的：浏览器通过JavaScript向服务端发出建立WebSocket连接的请求，在WebSocket连接建立成功后，客户端和服务端就可以通过 TCP连接传输数据。因为WebSocket连接本质上是TCP连接，不需要每次传输都带上重复的头部数据，所以它的数据传输量比轮询和Comet技术小 了很多。本文不详细地介绍WebSocket规范，主要介绍下WebSocket在Java Web中的实现。

　　JavaEE 7中出了JSR-356:Java API for WebSocket规范。不少Web容器，如Tomcat,Nginx,Jetty等都支持WebSocket。Tomcat从7.0.27开始支持 WebSocket，从7.0.47开始支持JSR-356，下面的Demo代码也是需要部署在Tomcat7.0.47以上的版本才能运行。

请重点记住使用websocket项目最低使用Tomcat7 ，jdk1.7

所需要使用的架包，如果你是maven项目：

<dependency>      <groupId>javax.servlet</groupId>      <artifactId>javax.servlet-api</artifactId>      <version>3.1.0</version>  </dependency>  <dependency>      <groupId>com.fasterxml.jackson.core</groupId>      <artifactId>jackson-core</artifactId>      <version>2.3.0</version>  </dependency>  <dependency>      <groupId>com.fasterxml.jackson.core</groupId>      <artifactId>jackson-databind</artifactId>      <version>2.3.0</version>  </dependency>  <dependency>     <groupId>org.springframework</groupId>     <artifactId>spring-websocket</artifactId>     <version>4.0.1.RELEASE</version>  </dependency>  <dependency>     <groupId>org.springframework</groupId>     <artifactId>spring-messaging</artifactId>     <version>4.0.1.RELEASE</version>  </dependency>  spring.xml <beans xmlns="http://www.springframework.org/schema/beans"          xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"          xmlns:websocket="http://www.springframework.org/schema/websocket"          xsi:schemaLocation="           http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd           http://www.springframework.org/schema/websocket http://www.springframework.org/schema/websocket/spring-websocket.xsd">  更新spring框架的jar包至4.0以上（spring-core, spring-context, spring-web and spring-webmvc） <dependency>   <span style="white-space:pre">    </span><groupId>org.springframework</groupId>       <artifactId>spring-core</artifactId>       <version>${spring.version}</version>   </dependency>   <dependency>       <groupId>org.springframework</groupId>       <artifactId>spring-web</artifactId>       <version>${spring.version}</version>   </dependency>   <dependency>       <groupId>org.springframework</groupId>       <artifactId>spring-webmvc</artifactId>       <version>${spring.version}</version>   </dependency>   <dependency>       <groupId>org.springframework</groupId>       <artifactId>spring-context-support</artifactId>       <version>${spring.version}</version>   </dependency>

服务器端：

1. package com.Socket;  
2.   
3. import java.io.IOException;  
4. import java.util.Map;  
5. import java.util.concurrent.ConcurrentHashMap;  
6. import javax.websocket.*;  
7. import javax.websocket.server.PathParam;  
8. import javax.websocket.server.ServerEndpoint;  
9. import net.sf.json.JSONObject;  
10.   
11. @ServerEndpoint("/websocket/{username}")  
12. public class WebSocket {  
13.   
14.     private static int onlineCount = 0;  
15.     private static Map<String, WebSocket> clients = new ConcurrentHashMap<String, WebSocket>();  
16.     private Session session;  
17.     private String username;  
18.       
19.     @OnOpen  
20.     public void onOpen(@PathParam("username") String username, Session session) throws IOException {  
21.   
22.         this.username = username;  
23.         this.session = session;  
24.           
25.         addOnlineCount();  
26.         clients.put(username, this);  
27.         System.out.println("已连接");  
28.     }  
29.   
30.     @OnClose  
31.     public void onClose() throws IOException {  
32.         clients.remove(username);  
33.         subOnlineCount();  
34.     }  
35.   
36.     @OnMessage  
37.     public void onMessage(String message) throws IOException {  
38.   
39.         JSONObject jsonTo = JSONObject.fromObject(message);  
40.           
41.         if (!jsonTo.get("To").equals("All")){  
42.             sendMessageTo("给一个人", jsonTo.get("To").toString());  
43.         }else{  
44.             sendMessageAll("给所有人");  
45.         }  
46.     }  
47.   
48.     @OnError  
49.     public void onError(Session session, Throwable error) {  
50.         error.printStackTrace();  
51.     }  
52.   
53.     public void sendMessageTo(String message, String To) throws IOException {  
54.         // session.getBasicRemote().sendText(message);  
55.         //session.getAsyncRemote().sendText(message);  
56.         for (WebSocket item : clients.values()) {  
57.             if (item.username.equals(To) )  
58.                 item.session.getAsyncRemote().sendText(message);  
59.         }  
60.     }  
61.       
62.     public void sendMessageAll(String message) throws IOException {  
63.         for (WebSocket item : clients.values()) {  
64.             item.session.getAsyncRemote().sendText(message);  
65.         }  
66.     }  
67.       
68.       
69.   
70.     public static synchronized int getOnlineCount() {  
71.         return onlineCount;  
72.     }  
73.   
74.     public static synchronized void addOnlineCount() {  
75.         WebSocket.onlineCount++;  
76.     }  
77.   
78.     public static synchronized void subOnlineCount() {  
79.         WebSocket.onlineCount--;  
80.     }  
81.   
82.     public static synchronized Map<String, WebSocket> getClients() {  
83.         return clients;  
84.     }  
85. } 
    

js：

1. var websocket = null;  
2. var username = localStorage.getItem("name");  
3.   
4. //判断当前浏览器是否支持WebSocket  
5. if ('WebSocket' in window) {  
6.     websocket = new WebSocket("ws://" + document.location.host + "/WebChat/websocket/" + username + "/"+ _img);  
7. } else {  
8.     alert('当前浏览器 Not support websocket')  
9. }  
10.   
11. //连接发生错误的回调方法  
12. websocket.onerror = function() {  
13.     setMessageInnerHTML("WebSocket连接发生错误");  
14. };  
15.   
16. //连接成功建立的回调方法  
17. websocket.onopen = function() {  
18.     setMessageInnerHTML("WebSocket连接成功");  
19. }  
20.   
21. //接收到消息的回调方法  
22. websocket.onmessage = function(event) {  
23.     setMessageInnerHTML(event.data);  
24. }  
25.   
26. //连接关闭的回调方法  
27. websocket.onclose = function() {  
28.     setMessageInnerHTML("WebSocket连接关闭");  
29. }  
30.   
31. //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。  
32. window.onbeforeunload = function() {  
33.     closeWebSocket();  
34. }  
35.   
36. //关闭WebSocket连接  
37. function closeWebSocket() {  
38.     websocket.close();  
39. } 
    

不全，请等待