基于spring websocket+sockjs实现的长连接请求

1、前言

页面端通常有需求想要准实时知道后台数据的一个变化情况，比如扫码登录场景，或者跳转到网银支付场景，在旧有的短轮训实现下，通常造成大量的不必要请求和查询，这里基于spring websocket+sockjs来解决该问题。

2、websocket

websocket是html5的一个新特性，目前oracle已经统一java websocket api，只要容器支持JSR356（tomcat7以上支持）,且jdk使用的是1.7以上，servlet-api3.1，即可使用websocket api提供服务。

在tomcat7之前也提供了tomcat专有的WebsocketServlet，不过在tomcat7已经deprecated，将在tomcat8中移除。

2.1使用jsr356标准的接口实现websocket

tomcat提供了websocket调用示例，可参考server code和html code

依赖

<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实现方式，没记录，后续再整理。

实现Endpoint类

相对于注解的方式会繁杂一点，需要在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实现下来还是比较简单，但是也存在一定的问题，比如浏览器支持问题和跨域安全问题。

2.2使用spring websocket+sockjs实现

参见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。

3、websocket安全问题

跨站攻击

平常在实现时可能不会关注到，目前已知的可能存在的安全风险主要是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实现。

4、一步一个坑

继上周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.