详解WebSocket+spring示例demo（已使用sockJs库）

时间：2021-12-12 01:43:32

1、简介

作为下一代的Web标准，HTML5拥有许多引人注目的新特性，如 Canvas、本地存储、多媒体编程接口、WebSocket等等。这其中有“Web的 TCP”之称的 WebSocket格外吸引开发人员的注意。WebSocket的出现使得浏览器提供对 Socket的支持成为可能，从而在浏览器和服务器之间提供了一个基于TCP连接的双向通道。Web开发人员可以非常方便地使用WebSocket构建实时 web 应用，开发人员的手中从此又多了一柄神兵利器。

Web 应用的信息交互过程通常是客户端通过浏览器发出一个请求，服务器端接收和审核完请求后进行处理并返回结果给客户端，然后客户端浏览器将信息呈现出来，这种机制对于信息变化不是特别频繁的应用尚能相安无事，但是对于那些实时要求比较高的应用来说，比如说在线游戏、在线证券、设备监控、新闻在线播报、RSS订阅推送等等，当客户端浏览器准备呈现这些信息的时候，这些信息在服务器端可能已经过时了。

所以保持客户端和服务器端的信息同步是实时 Web应用的关键要素，对 Web开发人员来说也是一个难题。在 WebSocket规范出来之前，开发人员想实现这些实时的Web应用，不得不采用一些折衷的方案，其中最常用的就是轮询(Polling)和 Comet 技术，而Comet技术实际上是轮询技术的改进，又可细分为两种实现方式，一种是长轮询机制，一种称为流技术。

Html5 WebSocket 设计出来的目的就是要取代轮询和 Comet技术，使客户端浏览器具备像 C/S架构下桌面系统的实时通讯能力。浏览器通过JavaScript向服务器发出建立 WebSocket连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP连接直接交换数据。因为 WebSocket连接本质上就是一个TCP连接，所以在数据传输的稳定性和数据传输量的大小方面，和轮询以及Comet技术比较，具有很大的性能优势。

但是鉴于web socket 对浏览器要求比较高，为了解决这个问题，推出了sockJS，SockJS是一个JavaScript库，提供跨浏览器javascript的API，创建了一个低延迟、全双工的浏览器和web服务器之间通信通道。

2、相关环境要求

Spring4.0.6(要选择4.0+),tomcat7.0.55版本，JDK1.7。

3、具体代码

（以下代码亲测可用！）

（1）web.xml:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<?xmlversionxmlversion="1.0"encoding="UTF-8"?>
<web-app version="3.1"
xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd">
 <description>用来测试WebSocket基础上推送的功能</description>
 <distributable/>
 <filter>
  <filter-name>encodingFilter</filter-name>
  <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
  <async-supported>true</async-supported>
  <init-param>
   <param-name>encoding</param-name>
   <param-value>UTF-8</param-value>
  </init-param>
  <init-param>
   <param-name>forceEncoding</param-name>
   <param-value>true</param-value>
  </init-param> 
 </filter>
 <filter-mapping>
  <filter-name>encodingFilter</filter-name>
  <url-pattern>/*</url-pattern>
 </filter-mapping>
 <listener>
  <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
 </listener>
 <!-- Spring 刷新Introspector防止内存泄露 -->
 <listener>
  <listener-class>org.springframework.web.util.IntrospectorCleanupListener</listener-class>
 </listener>
 <servlet>
  <servlet-name>dispatcher</servlet-name>
  <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> 
  <init-param>
  <param-name>contextConfigLocation</param-name>
  <param-value>classpath:dispatcher-servlet.xml</param-value>
  </init-param>
  <load-on-startup>1</load-on-startup>
  <async-supported>true</async-supported>
 </servlet>
 <servlet-mapping>
  <servlet-name>dispatcher</servlet-name>
  <url-pattern>/</url-pattern>
 </servlet-mapping>
 <session-config>
  <session-timeout>
   30
  </session-timeout>
 </session-config>
 <welcome-file-list>
  <welcome-file>testSocket.jsp</welcome-file>
 </welcome-file-list>
</web-app>

(2) dispatcher-servlet.xml

?
1
2
3
4
5
6
7
8
9
10
11
12
<?xmlversionxmlversion="1.0"encoding="UTF-8"?>
<beans:beansxmlnsbeans:beansxmlns="http://www.springframework.org/schema/mvc"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns:beans="http://www.springframework.org/schema/beans"
    xmlns:context="http://www.springframework.org/schema/context"
    xsi:schemaLocation="http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd
 http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
 http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd">
 <annotation-driven/>
 <!-- 自动扫描的包名 -->
 <context:component-scanbase-packagecontext:component-scanbase-package="zyy.sockjs.config"></context:component-scan>
</beans:beans>

(3)HandshakeInterceptor.java

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
package zyy.sockjs.config;
import java.util.Map;
import org.springframework.http.server.ServerHttpRequest;
import org.springframework.http.server.ServerHttpResponse;
import org.springframework.stereotype.Component;
import org.springframework.web.socket.WebSocketHandler;
import org.springframework.web.socket.server.support.HttpSessionHandshakeInterceptor;
 
@Component
public class HandshakeInterceptor extends HttpSessionHandshakeInterceptor {
@Override
public boolean beforeHandshake(ServerHttpRequest request,
 ServerHttpResponse response, WebSocketHandler wsHandler,
 Map<String, Object> attributes) throws Exception {
 System.out.println("Before Handshake");
 return super.beforeHandshake(request,response,wsHandler,attributes);
}
 
@Override
public void afterHandshake(ServerHttpRequest request,
 ServerHttpResponse response, WebSocketHandler wsHandler,
 Exception ex) {
 System.out.println("After Handshake");
 super.afterHandshake(request,response,wsHandler,ex);
}
}

(4)InfoSocketEndPoint.Java

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
package zyy.sockjs.config;
import org.springframework.stereotype.Component;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.TextWebSocketHandler;
 
@Component
public class InfoSocketEndPoint extends TextWebSocketHandler {
public InfoSocketEndPoint() {
}
 
@Override
protected void handleTextMessage(WebSocketSession session,
 TextMessage message) throws Exception {
 super.handleTextMessage(session, message);
 TextMessage returnMessage = new TextMessage(message.getPayload()
 + " received at server");
 session.sendMessage(returnMessage);
}
}

(5)SystemWebSocketHandler.java

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
package zyy.sockjs.config;
import org.springframework.stereotype.Component;
import org.springframework.web.socket.CloseStatus;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketHandler;
import org.springframework.web.socket.WebSocketMessage;
import org.springframework.web.socket.WebSocketSession;
/**
*
* @author dayu
*/
 
@Component
public class SystemWebSocketHandler implements WebSocketHandler {
 @Override
 public void afterConnectionEstablished(WebSocketSession session) throws Exception {
  System.out.println("connect to the websocket success......");
  session.sendMessage(new TextMessage("Server:connected OK!"));
 }
 
 @Override
 public void handleMessage(WebSocketSession wss, WebSocketMessage<?> wsm) throws Exception {
  TextMessage returnMessage = new TextMessage(wsm.getPayload()
  + " received at server");
  wss.sendMessage(returnMessage);
 }
 
 @Override
 public void handleTransportError(WebSocketSession wss, Throwable thrwbl) throws Exception {
  if(wss.isOpen()){
   wss.close();
  }
  System.out.println("websocket connection closed......");
 }
 
 @Override
 public void afterConnectionClosed(WebSocketSession wss, CloseStatus cs) throws Exception {
  System.out.println("websocket connection closed......");
 }
 
 @Override
 public boolean supportsPartialMessages() {
  return false;
 }
}

(6)WebSocketConfig.java

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
package zyy.sockjs.config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
import org.springframework.web.socket.WebSocketHandler;
import org.springframework.web.socket.config.annotation.EnableWebSocket;
import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;
 
@Configuration
@EnableWebMvc
@EnableWebSocket
public class WebSocketConfig extends WebMvcConfigurerAdapter implements
  WebSocketConfigurer {
 public WebSocketConfig() {
 }
 
 @Override
 public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
  registry.addHandler(systemWebSocketHandler(), "/websck").addInterceptors(new HandshakeInterceptor());
  System.out.println("registed!");
  registry.addHandler(systemWebSocketHandler(), "/sockjs/websck/info").addInterceptors(new HandshakeInterceptor())
    .withSockJS();
 }
 
 @Bean
 public WebSocketHandler systemWebSocketHandler() {
  return new SystemWebSocketHandler();
 }
}

(7)testSocket.jsp

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<%@ page language="java"contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<!DOCTYPE htmlPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type"content="text/html; charset=ISO-8859-1">
<title>WebSocket/SockJS Echo Sample (Adapted from Tomcat's echo sample)</title>
 <style type="text/css">
  #connect-container {
   float: left;
   width: 400px
  }
  #connect-container div {
   padding: 5px;
  }
  #console-container {
   float: left;
   margin-left: 15px;
   width: 400px;
  }
  #console {
   border:1px solid #CCCCCC;
   border-right-color:#33333333;
   border-bottom-color:#999999;
   height: 170px;
   overflow-y: scroll;
   padding: 5px;
   width: 100%;
  }
  #console p {
   padding: 0;
   margin: 0;
  }
 </style>
<script src="http://cdn.sockjs.org/sockjs-0.3.min.js"></script>
<script type="text/javascript">
  var ws = null;
  var url = null;
  var transports = [];
  function setConnected(connected) {
   document.getElementById('connect').disabled = connected;
   document.getElementById('disconnect').disabled = !connected;
   document.getElementById('echo').disabled = !connected;
  }
  function connect() {
   if (!url) {   
   log('Select whether to use W3C WebSocket or SockJS');   
    return;
   }
   //ws = (url.indexOf('sockjs') != -1) ?new SockJS(url, undefined, {protocols_whitelist: transports}) : new WebSocket(url);
   if ('WebSocket'in window) {
    ws= new WebSocket("ws://localhost:8080/SpringSocketJs/websck");
   }else {
    ws = new SockJS("http://localhost:8080/SpringSocketJs/sockjs/websck/info");
   }
   //websocket = new SockJS("http://localhost:8084/SpringWebSocketPush/sockjs/websck");
   ws.onopen = function () {
    setConnected(true);
    //log('Info: connection opened.');
   };
   ws.onmessage = function (event) {   
    log('Received: ' + event.data);
   };
   ws.onclose = function (event) {
    setConnected(false);
    log('Info: connection closed.');
    log(event);
   };
  }
  function disconnect() {
   if (ws != null) {
    ws.close();
    ws = null;
   }
   setConnected(false);
  }
  function echo() {
   if (ws != null) {
    var message = document.getElementById('message').value;
    log('Sent: ' + message);
    ws.send(message);
   } else {
    alert('connection not established, please connect.');
   }
  }
  function updateUrl(urlPath) {
   if (urlPath.indexOf('sockjs') != -1) {
    url = urlPath;
    document.getElementById('sockJsTransportSelect').style.visibility ='visible';
   }
   else {
    if (window.location.protocol =='http:') {
     url = 'ws://' + window.location.host + urlPath;
    } else {
     url = 'wss://' + window.location.host + urlPath;
    }
    document.getElementById('sockJsTransportSelect').style.visibility ='hidden';
   }
  }
  function updateTransport(transport) {
   transports = (transport == 'all') ? [] : [transport];
  } 
  function log(message) {
   var console = document.getElementById('console');
   var p = document.createElement('p');
   p.style.wordWrap = 'break-word';
   p.appendChild(document.createTextNode(message));
   console.appendChild(p);
   while (console.childNodes.length > 25) {
    console.removeChild(console.firstChild);
   }
   console.scrollTop = console.scrollHeight;
  }
 </script>
</head>
<body>
<noscript><h2 style="color:#ff0000">Seems your browser doesn't supportJavascript!Websockets
 rely on Javascript being enabled. Please enable
 Javascript and reload this page!</h2></noscript>
<div>
 <div id="connect-container">
  <input id="radio1"type="radio"name="group1"onclick="updateUrl('/SpringSocketJs/websocket');">
   <label for="radio1">W3C WebSocket</label>
  <br>
  <input id="radio2"type="radio"name="group1"onclick="updateUrl('/SpringSocketJs/sockjs/websocket');">
   <label for="radio2">SockJS</label>
  <div id="sockJsTransportSelect" style="visibility:hidden;">
   SockJS transport:
   <select onchange="updateTransport(this.value)">
    <option value="all">all</option>
    <option value="websocket">websocket</option>
    <option value="xhr-polling">xhr-polling</option>
    <option value="jsonp-polling">jsonp-polling</option>
    <option value="xhr-streaming">xhr-streaming</option>
    <option value="iframe-eventsource">iframe-eventsource</option>
    <option value="iframe-htmlfile">iframe-htmlfile</option>
   </select>
  </div>
  <div>
   <button id="connect"onclick="connect();">Connect</button>
   <button id="disconnect"disabled="disabled"onclick="disconnect();">Disconnect</button>
  </div>
  <div>
   <textarea id="message"style="width:350px">Here is a message!</textarea>
  </div>
  <div>
   <button id="echo"onclick="echo();"disabled="disabled">Echo message</button>
  </div>
 </div>
 <div id="console-container">
  <div id="console"></div>
 </div>
</div>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。

原文链接：http://blog.csdn.net/u011991249/article/details/51472020

标签：

相关文章