页面端通常有需求想要准实时知道后台数据的一个变化情况,比如扫码登录场景,或者跳转到网银支付场景,在旧有的短轮训实现下,通常造成大量的不必要请求和查询,这里基于spring websocket+sockjs来解决该问题。
websocket是html5的一个新特性,目前oracle已经统一java websocket api,只要容器支持JSR356(tomcat7以上支持),且jdk使用的是1.7以上,servlet-api3.1,即可使用websocket api提供服务。
在tomcat7之前也提供了tomcat专有的WebsocketServlet,不过在tomcat7已经deprecated,将在tomcat8中移除。
依赖
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>3.1.0</version>
</dependency>
<dependency>
<groupId>javax.websocket</groupId>
<artifactId>javax.websocket-api</artifactId>
<version>1.1</version>
<scope>provided</scope>
</dependency>
注意websocket的scope需要是provided,在运行时使用tomcat提供的jar运行,不然建立连接时会404。
js实现websocket调用
建立连接和注册事件
var target = "ws://127.0.0.1/websocket/testWsAnnotation";
if ('WebSocket' in window) {
ws = new WebSocket(target);
} else if ('MozWebSocket' in window) {
ws = new MozWebSocket(target);
} else {
alert('WebSocket is not supported by this browser.');
return;
}
ws.onopen = function () {
log('Info: WebSocket connection opened.');
};
ws.onmessage = function (event) {
log('Received: ' + event.data);
};
ws.onclose = function () {
log('Info: WebSocket connection closed.');
};
关闭连接
if (ws != null) {
ws.close();
ws = null;
}
发送消息
if (ws != null) {
var message = document.getElementById('message').value;
log('Sent: ' + message);
ws.send(message);
} else {
alert('WebSocket connection not established, please connect.');
}
需要注意的是,js建立连接处完整的js代码要执行完成退出后才会真正发起建立连接请求,如果在此之前发送消息则会报错如下:
InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable
如果是sockjs则会报错如下
Error: InvalidStateError: The connection has not been established yet
服务端实现
需要增加一个配置类,tomcat启动时会将扫描到的配置注解或者实现Endpoint的类传入该配置类方法,再由该配置类中的方法过滤哪些可做为暴露websocket服务的
public class WebSocketConfig implements ServerApplicationConfig
{
@Override
public Set<ServerEndpointConfig> getEndpointConfigs(Set<Class<? extends Endpoint>> scanned)
{
Set<ServerEndpointConfig> result = new HashSet<ServerEndpointConfig>();
for (Class<? extends Endpoint> ep : scanned)
{
result.add(ServerEndpointConfig.Builder.create(ep, "/websocket/" + WordUtils.uncapitalize(ep.getSimpleName())).build());
}
return result;
}
@Override
public Set<Class<?>> getAnnotatedEndpointClasses(Set<Class<?>> scanned)
{
return scanned;
}
}
注解方式的Endpoint
package com.zsy.learn.websocket.annotation;
import java.io.IOException;
import java.nio.ByteBuffer;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.PongMessage;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
import com.zsy.learn.websocket.constant.WebsocketConstant;
/**
* @Project websocket
* @Description:
* @Company youku
* @Create 2015年10月1日上午11:55:11
* @author zhoushaoyu
* @version 1.0 Copyright (c) 2015 youku, All Rights Reserved.
*/
@ServerEndpoint("/websocket/testWsAnnotation")
public class TestWsAnnotation
{
@OnOpen
public void onConnect(Session session)
{
//有必要的情况下将session维护到自己的内存中,并建立相关联的key
//后续可根据这个key查找出对应的session,并往该session输出
WebsocketConstant.map.put("1", session);
}
@OnMessage
public void echoTextMessage(Session session, String msg, boolean last)
{
try
{
WebsocketConstant.map.put("1", session);
if (session.isOpen())
{
//输出结果
session.getBasicRemote().sendText(msg, last);
}
} catch (IOException e)
{
try
{
session.close();
} catch (IOException e1)
{
// Ignore
}
}
}
}
TODO 其中binary和pong message还没做尝试。先前简单跟了下tomcat实现方式,没记录,后续再整理。
相对于注解的方式会繁杂一点,需要在ServerApplicationConfig中指定endpoint path,建立连接时指定handler。
public class TestWsEndpoint extends Endpoint
{
/**
* 方法用途: <br>
* 实现步骤: <br>
*
* @param session
* @param config
*/
@Override
public void onOpen(Session session, EndpointConfig config)
{
session.addMessageHandler(new EchoMessageHandler(session.getBasicRemote()));
}
private static class EchoMessageHandler implements MessageHandler.Whole<String>
{
private final RemoteEndpoint.Basic remoteEndpointBasic;
private EchoMessageHandler(RemoteEndpoint.Basic remoteEndpointBasic)
{
this.remoteEndpointBasic = remoteEndpointBasic;
}
@Override
public void onMessage(String message)
{
try
{
if (remoteEndpointBasic != null)
{
remoteEndpointBasic.sendText(message);
}
} catch (IOException e)
{
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}
}
jsr356标准的websocket api实现下来还是比较简单,但是也存在一定的问题,比如浏览器支持问题和跨域安全问题。
参见Websocket Fallback Options
spring官方提供了websocket各浏览器兼容方案,基于SockJs协议封装对用户透明的模拟websocket的备选方案,在支持websocket的浏览器使用websocket,其他浏览器会尝试使用ajax streaming或者Iframe等方式达到相同效果。
依赖
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-websocket</artifactId>
<version>${spring-version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-messaging</artifactId>
<version>${spring-version}</version>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>3.1.0</version>
</dependency>
<dependency>
<groupId>javax.websocket</groupId>
<artifactId>javax.websocket-api</artifactId>
<version>1.1</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-core</artifactId>
<version>2.6.2</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.6.2</version>
</dependency>
这里需要注意的是jackson是默认使用的encoder,但是spring-websocket依赖中也没有,所以需要自己来增加这个依赖,如果配置指定了其他的encoder也是OK的。
配置DispathcerServlet
<servlet>
<servlet-name>dispatcherServlet</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<init-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:spring/application_context.xml</param-value>
</init-param>
<async-supported>true</async-supported>
</servlet>
<servlet-mapping>
<servlet-name>dispatcherServlet</servlet-name>
<url-pattern>*.htm</url-pattern>
<url-pattern>/springws/*</url-pattern>
</servlet-mapping>
这里有两个地方注意下,一个是这个servlet要配置async-supported,另外一个是拦截地址不可有后缀,因为sockjs会自动在url之后增加/info等地址,如果这里url-pattern拦截类似于*.htm这种就做不到路由到处理器。比如我想通过sockjs访问地址/springws/test.htm,但是sockjs框架会先访问/springws/test.htm/info这个地址,但是这个地址又不可被spring框架识别,所以导致不可用。
如果不用sockjs连接,js直接通过websocket连接那就可以使用*.htm,这种方式跟直接使用Websocket Api差不多,就不做说明了。
通过WebSocketConfigurer配置handler
@Configuration
@EnableWebSocket
public class SpringWebSocketConfig implements WebSocketConfigurer
{
/**
* 方法用途: <br>
* 实现步骤: <br>
* @param registry
*/
@Override
public void registerWebSocketHandlers(WebSocketHandlerRegistry registry)
{
registry.addHandler(myWsHandler(), "/springwsbean/myhandler.htm");
registry.addHandler(myWsHandler(), "/bean_sockjs").withSockJS();
}
@Bean
public WebSocketHandler myWsHandler()
{
return new MySpringTextWsHandler();
}
}
这里通过config指定handler和对应的path,如果需要支持sockjs则在后面调用withSockJS即可。
需要特别注意的是handler这里配置的路径是去掉前面DispathcerServlet的前缀URI的。比如DispatcherServlet配置的url-patter是/springws/*,然后在handler这里配置的地址是/test,那么最终在页面端需要访问的地址是/springws/test这个地址。
通过xml配置handler
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context="http://www.springframework.org/schema/context"
xmlns:aop="http://www.springframework.org/schema/aop" xmlns:tx="http://www.springframework.org/schema/tx"
xmlns:mvc="http://www.springframework.org/schema/mvc" xmlns:websocket="http://www.springframework.org/schema/websocket"
xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-3.0.xsd
http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-3.0.xsd
http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.0.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd
http://www.springframework.org/schema/websocket http://www.springframework.org/schema/websocket/spring-websocket.xsd">
<websocket:handlers>
<websocket:mapping path="/springwsxml/myhandler.htm" handler="myHandler" />
</websocket:handlers>
<websocket:handlers>
<websocket:mapping path="/xml_sockjs" handler="myHandler" />
<websocket:sockjs/>
</websocket:handlers>
<bean id="myHandler" class="com.zsy.learn.springwebsocket.websockethandler.MySpringTextWsHandler" />
</beans>
页面端访问时可通过地址/springwsxml/myhandler.htm或者/springws/xml_sockjs两个地址访问。同样如果使用sockjs则只能访问/springws/xml_sockjs。
另外sockjs访问的是http://或者https://,而js websocket访问的ws://或者wss://。
handler
public class MySpringTextWsHandler extends TextWebSocketHandler
{
/**
* 方法用途: <br>
* 实现步骤: <br>
* @param session
* @param message
* @throws Exception
*/
@Override
protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception
{
if(session.isOpen())
{
session.sendMessage(message);
}
}
/**
* 方法用途: <br>
* 实现步骤: <br>
* @param session
* @throws Exception
*/
@Override
public void afterConnectionEstablished(WebSocketSession session) throws Exception
{
super.afterConnectionEstablished(session);
SpringWebsocketConstant.map.put("1", session);
}
}
spring封装了一套handler标准,不管对于使用sockjs的哪种方式访问或者直接使用websocket接口访问都可通过这一套配置和一套handler实现提供服务。
过滤器和handler装饰器
websocket在建立连接时是会经过配置的所有的filter的,但是前提是这些filter都配置了async-supported。另外建立连接后通过该连接发送消息是不会再过filter的,此时如果要做到类似于过滤器的功能可通过handler decorator的方式实现。
但是目前spring还没有提供方法直接配置handler decorator,可以通过spring bean的post processor的方式,判断如果是AbstractWebSocketHandler类型,自动包装上自己想要的decorator。
跨站攻击
平常在实现时可能不会关注到,目前已知的可能存在的安全风险主要是websocket不会限制同域名访问,这样就可能导致无论在哪个域名下都可以与你提供的websocket服务建立连接,并且建立连接时还可以将你域名下的cookie带上来。这种情况下如果不做防范,用户在你的页面完成登录后,再被黑客以任何手段诱导访问他的地址,就可以使用该用户的权限访问你的websocket服务。
spring虽然在4.1.5之后提供了allowed-originswebsocket-server-allowed-origins,但同样如他所说
There is nothing preventing other types of clients from modifying the Origin header value
所以如果要做到防范,可在建立连接时以验证ticket的方式做到一定程度上的阻止跨站攻击,这个ticket则是在进入页面时分配,一次有效,1分钟超时。
备注:后面测试时发现第一次请求建立完连接,在其他域名下再用相同请求建立连接会不过handshakeInterceptor,暂时先不使用handshakeInterceptor而改用filter。
简单跟了下spring对于sockjs的websocket代码,这个handshakeInterceptor是在session id找不到的时候执行,这样就不太适合用于安全拦截,可能更适合用于创建websocket session时要做什么业务操作之类的。
再强调下哦,这个是说的在spring websocket with sockjs的框架是这么执行的,看了下spring websocket那边的执行是不判断session存不存在的。
执行sockjs websocket handshake的代码见TransportHandlingSockJsService
SockJsSession session = this.sessions.get(sessionId);
if (session == null) {
if (transportHandler instanceof SockJsSessionFactory) {
Map<String, Object> attributes = new HashMap<String, Object>();
if (!chain.applyBeforeHandshake(request, response, attributes)) {
return;
}
SockJsSessionFactory sessionFactory = (SockJsSessionFactory) transportHandler;
session = createSockJsSession(sessionId, sessionFactory, handler, attributes);
}
else {
response.setStatusCode(HttpStatus.NOT_FOUND);
if (logger.isDebugEnabled()) {
logger.debug("Session not found, sessionId=" + sessionId +
". The session may have been closed " +
"(e.g. missed heart-beat) while a message was coming in.");
}
return;
}
xss
在连接建立之后也不可掉以轻心,需要对该连接发送的所有消息经过格式校验(比如协定为json,则先转一次json格式串),再对每个参数做xss clean的工作再放给后端处理,该工作可通过上面提到的handler decorator实现。
继上周spring websocket with sockjs的坑之后,依然很多坑,记录如下:
- 测试环境测试的时候,nginx转发到tomcat下的http头upgrade丢掉了,参见nginx websocket proxying,配置如下:
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection “upgrade”;
服务发布时,长连接断开,由于使用到ticket进行握手,且ticket是一次有效,只能在断开后切到短轮询,如果对于不敏感的业务可以不使用ticket进行握手的话在断开后可以重新握手进行连接
sockjs 在IE9下长连接方式不适用于一次有效的ticket认证连接,本来想不使用sockjs而使用原生的websocket,然后发现需要定时发送pong消息,不然会自动断开(30s?),sockjs则自动做了这件事
sockjs对safari的浏览器兼容不太好,在外层(“WebSocket” in window || “MozWebSocket” in window)判断了safari可以支持,但是sockjs还是没有走websocket而走的xhr_xxx的请求,我们前端暂时不解决这个问题,在自动断开后走短轮询
nginx版本需要注意nginx websocket proxying,表现形式就是101状态后马上断开,然后sockjs再请求后续的xhr_xxx,如果nginx之前还使用了物理负载均衡(比如netscaler),也得确认是否支持,低版本也会出现相同现象
Since version 1.3.13, nginx implements special mode of operation that allows setting up a tunnel between a client and proxied server if the proxied server returned a response with the code 101 (Switching Protocols), and the client asked for a protocol switch via the “Upgrade” header in a request.