java 静态服务器配置_JavaEE开发之SpringMVC中的静态资源映射及服务器推送技术

在上篇博客中，我们聊了《SpringMVC的东西，下方我们将会聊到js、css这些静态文件的加载配置，以及服务器推送的两种实现方式。当然我们在服务器推送时，会用到JQuery的东西，所以我们先聊一下如何加载静态资源文件，然后我们再聊如何实现服务器推送。

下方给出了两种实现服务器推送的方式，一种是SSE(Server Send Event (服务端推送事件))另一种是基于Servlet异步处理的推送，下方会给出详细的实现方式，并且给出了两者的区别。

一、静态资源文件映射

静态资源文件映射在SpringMVC中的配置也是比较简单的、在我们Spring的Config文件里边配置一下即可。下方就是我们在配置静态资源文件时所做的内容。

1、映射资源文件

首先我们在src/main/resources包下方创建了衣蛾assets文件，该文件下就存放着我们工程中所使用所有的静态资源文件。然后我们在Spring的配置文件中重写addResourceHandlers()方法，使用该方法来配置“assets”目录。

2、资源文件的引用

我们来创建一个jquery_test.jsp文件，该文件中引入了assets文件夹中js文件夹下的jquery.js文件。在jquery_test.jsp中就使用了jQuery的东西。下方就是该文件的所有内容。当然下方页面的功能比较简单，就是点击按钮，往HTML中动态的添加新的节点。具体代码如下所示：

1

2 pageEncoding="UTF-8"%>

3

4

5

6

7

8

9 $(document).ready(function(){10 $("#click").click(function(){11 $("#test").append("

Hello Spring MVC

");12 });13 });14

15

16

JQuery Demo

17

18

19

20

21

22

3、测试上述页面

当然要想访问上述页面，还得在Spring的配置文件中进行路由的配置。下方代码段就是Spring配置文件中静态文件路由的快速配置。

下方就是我们对相应路由的访问结果，如下所示。通过下方示例，我们可以看到jquery.js资源文件可以被正常的访问到。

二、Server Send Event (服务端推送事件)

Server Send Event简称SSE，使用该技术可以实现服务端像浏览器发送事件，也就是所谓的服务端的PUSH。本篇博客所聊的服务器推送技术的实现原理是当客户端向服务端发送请求时，服务端会抓住这个请求不放，等有数据更新的时候才返回给客户端。当客户端接收到消息后，再向服务端发送请求，周而复始。

服务端推送以及客户端发送的网络请求都是单向通信，后面的博客我们会介绍一种双向通信技术：WebSocket。本篇我们就先聊聊服务端的推送事件。

1.创建SSEController

首先我们创建一个普通的SpringMVC的Controller，命名为SSEContrller。下方就是SSEController类的具体实现，内容与普通的Controller差不多。只不过相应的方法在路由配置时，将produces属性的文本类型设置成“text/event-stream”即可。

在下方类的push()方法中，每500ms就会往客户端发送一个消息。消息的内容是当前时间，如下所示：

2、创建请求的JSP页面

创建好上述类后，我们就该创建测试上述Controller的JSP页面了，我们在相应的资源目录中创建一个sse.jsp页面。在sse.jsp页面中，我们将会使用到JavaScript中的EventSource对象来监听来着“/sse”路由的事件消息，当收到上述Controller发起的事件后，会在事件回调中做一些事情。当然，我们做的事情就是在HTML页面中添加新的节点，将事件响应的消息添加到HTML文本只能怪进行显示。

下方就是sse.jsp页面的具体代码。

1

2 pageEncoding="UTF-8"%>

3

4

5

6

7

8

9 if(window.EventSource){10 varsource= newEventSource('sse');11 s= '';12 source.addEventListener('message',function(e) {13 s+=e.data+"
";14 $("#msgFromSSE").html(s);15 });16

17 source.addEventListener('open',function(e) {18 console.log("连接打开");19 },false);20

21 source.addEventListener('error',function(e) {22 if(e.readyState==EventSource.CLOSED) {23 console.log("连接关闭");24 }else{25 console.log(e.readyState);26 }27 },false);28 }else{29 console.log("浏览器不支持SSE");30 }31

32

SSE Demo

33

34

35

SSE-TEST

36