WebSocket – 默默的点滴曾道人吉数

接着上文IntelliJ IDEA 2016.2使用Spring 4.3.1.RELEASE搭建基于Tomcat-7.0.68的WebSocket应用

上文的最后我们说到，WebSocket是需要定时心跳的，否则会在一段时间后自动断开连接，而更重要的是，不是所有的浏览器都支持WebSocket，早期的IE 10之前的版本就是不支持的，而这一部分的设备其实是不算少的，而sockjs的出现，恰恰好来解决了这个问题。对于不支持WebSocket的浏览器，sockjs使用了多种方式来兼容这种情况，包括使用长轮询等方式，Spring更是内建支持这种方式。

下面我们看如何在上篇文章的基础上，增加对于sockjs的支持。

首先是STOMP的文档官网地址 http://stomp.github.io/
代码的地址为https://github.com/jmesnil/stomp-websocket，项目下面的lib/stomp.js就是我们想要的文件。也可以本站下载stomp.js.zip

接下来sockjs的代码地址https://github.com/sockjs/sockjs-client，项目下面的dist/sockjs-1.1.1.js就是我们想要的文件。也可以本站下载sockjs-1.1.1.js.zip

接下来我们把下载到的文件放到我们工程目录下面的web->resources->javascript目录下面，如下图：

stomp-websockjs-resources

接下来，添加我们需要的com.fasterxml.jackson.core:jackson-annotations:2.8.1,com.fasterxml.jackson.core:jackson-core:2.8.1,com.fasterxml.jackson.core:jackson-databind:2.8.1这三个jar包，增加的方式参照上一篇中对于javax.servlet:javax.servlet-api:3.1.0的操作方法。与上一篇的操作不同的是，这次添加的三个jar包,都要放到编译完成后的War包中。最后的结果如下图：
ToolsJacksonMaven

ToolsJacksonMavenWar

下面，我们开始进行代码的操作，我们在上篇文章中的src->Tools->WebSocket中新增两个源代码文件SockJsController.java,WebJsSocketConfig.java.如下图：

NewJavaSourcesForSockjs

其中的代码如下：
SockJsController.java

package Tools.WebSocket;

import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.stereotype.Controller;

@Controller
public class SockJsController {

        @MessageMapping("/hello")
        @SendTo("/hello/subscribe") /*貌似这个名字可以随意的，主要用在stomp.subscribe时候的名字*/
        public String Hello(String message) throws Exception {
            return new String("Hello");
        }
}

package Tools.WebSocket;

import org.springframework.messaging.handler.annotation.MessageMapping;

import org.springframework.messaging.handler.annotation.SendTo;

import org.springframework.stereotype.Controller;

@Controller

public class SockJsController {

????????@MessageMapping("/hello")

????????@SendTo("/hello/subscribe") /*貌似这个名字可以随意的，主要用在stomp.subscribe时候的名字*/

????????public String Hello(String message) throws Exception {

????????????return new String("Hello");

????????}

}

WebJsSocketConfig.java

package Tools.WebSocket;

import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.web.socket.config.annotation.AbstractWebSocketMessageBrokerConfigurer;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;


@Configuration
@EnableWebSocketMessageBroker
public class WebJsSocketConfig  extends AbstractWebSocketMessageBrokerConfigurer {
    @Override
    public void configureMessageBroker(MessageBrokerRegistry config) {
        config.setApplicationDestinationPrefixes("/webSocketServer");
    }

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/hello").setAllowedOrigins("*").withSockJS();
    }
}

package Tools.WebSocket;

import org.springframework.context.annotation.Configuration;

import org.springframework.messaging.simp.config.MessageBrokerRegistry;

import org.springframework.web.socket.config.annotation.AbstractWebSocketMessageBrokerConfigurer;

import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;

import org.springframework.web.socket.config.annotation.StompEndpointRegistry;

@Configuration

@EnableWebSocketMessageBroker

public class WebJsSocketConfig??extends AbstractWebSocketMessageBrokerConfigurer {

????@Override

????public void configureMessageBroker(MessageBrokerRegistry config) {

????????config.setApplicationDestinationPrefixes("/webSocketServer");

????}

????@Override

????public void registerStompEndpoints(StompEndpointRegistry registry) {

????????registry.addEndpoint("/hello").setAllowedOrigins("*").withSockJS();

????}

}

然后修改WebSocket.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html PUBLIC "-//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=UTF-8">
    <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: #999999;
            border-bottom-color: #999999;
            height: 170px;
            overflow-y: scroll;
            padding: 5px;
            width: 100%;
        }

        #console p {
            padding: 0;
            margin: 0;
        }
    </style>

    <script src="./resources/javascript/sockjs-1.1.1.js"></script>
    <script src="./resources/javascript/stomp.js"></script>

    <script type="text/javascript">
        var ws = null;
        var url = null;
        var transports = [];
        var stompClient = null;

        function setConnected(connected) {
            document.getElementById('connect').disabled = connected;
            document.getElementById('disconnect').disabled = !connected;
            document.getElementById('echo').disabled = !connected;
        }

        function connect() {
            if (!url) {
                alert('Select whether to use W3C WebSocket or SockJS');
                return;
            }

            ws = (url.indexOf('sockjs') != -1) ?
                    new SockJS(url,undefined, {transports: transports}) : new WebSocket(url);
            if((url.indexOf('sockjs') != -1)) {
                stompClient = Stomp.over(ws);
                stompClient.connect({}, function(frame) {
                    setConnected(true);
                    log('Connected: ' + frame);
                    stompClient.subscribe('/hello/subscribe', function(message){
                        log(message.body);
                    });
                });
            }else {
                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;
            }
            stompClient = null;
            setConnected(false);
        }

        function echo() {
            if(stompClient != null){
                var message = document.getElementById('message').value;
                stompClient.send("/webSocketServer/hello", {}, message);
                log('Sent: ' + message);
            }else {
                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 support Javascript! 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('/webSocketServer');">
        <label for="radio1">W3C WebSocket</label>
        <br>
        <input id="radio2" type="radio" name="group1" onclick="updateUrl('/webSocketServer/sockjs/hello');">
        <label for="radio2">SockJS</label>
        <div id="sockJsTransportSelect" style="visibility:hidden;">
            <span>SockJS transport:</span>
            <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!

先参照 IntelliJ IDEA 2016.1建立Strut2工程并使用Tomcat调试建立新的工程，一步一步操作，包括最后引用Spring框架部分。

经过上面的操作，Spring-WebSocket的包应该已经被默认引入了，如下图所示：

spring-websocket-release-lib

这就意味着我们已经不需要再进行过多的额外配置了。

接下来，我们在src->Tools下面新建一个WebSocket的目录，里面创建三个Java文件。如下图：
WebSocketJavaSourceList

每个文件中的代码如下：
SystemWebSocketHandler.java

package Tools.WebSocket;

import java.io.IOException;
import java.util.ArrayList;
import java.util.Date;

import org.springframework.web.socket.CloseStatus;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.TextWebSocketHandler;

public class SystemWebSocketHandler extends TextWebSocketHandler {

    private static final ArrayList<WebSocketSession> users = new ArrayList<>();


    @Override
    public void afterConnectionEstablished(WebSocketSession session) throws Exception {
        System.out.println("ConnectionEstablished");
        users.add(session);

        session.sendMessage(new TextMessage("connect"));
        session.sendMessage(new TextMessage("new_msg"));

    }

    @Override
    public void handleMessage(WebSocketSession session, WebSocketMessage<?> message) throws Exception {
        System.out.println("handleMessage" + message.toString());
        session.sendMessage(new TextMessage(new Date() + ""));
    }

    @Override
    public void handleTransportError(WebSocketSession session, Throwable exception) throws Exception {
        if(session.isOpen()){
            session.close();
        }
        users.remove(session);
    }

    @Override
    public void afterConnectionClosed(WebSocketSession session, CloseStatus closeStatus) throws Exception {
        users.remove(session);
    }

    @Override
    public boolean supportsPartialMessages() {
        return false;
    }

    /**
     * 给所有在线用户发送消息
     *
     * @param message
     */
    public void sendMessageToUsers(TextMessage message) {
        for (WebSocketSession user : users) {
            try {
                if (user.isOpen()) {
                    user.sendMessage(message);
                }
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }
}

package Tools.WebSocket;

import java.io.IOException;

import java.util.ArrayList;

import java.util.Date;

import org.springframework.web.socket.CloseStatus;

import org.springframework.web.socket.TextMessage;

import org.springframework.web.socket.WebSocketMessage;

import org.springframework.web.socket.WebSocketSession;

import org.springframework.web.socket.handler.TextWebSocketHandler;

public class SystemWebSocketHandler extends TextWebSocketHandler {

????private static final ArrayList users = new ArrayList<>();

????@Override

????public void afterConnectionEstablished(WebSocketSession session) throws Exception {

????????System.out.println("ConnectionEstablished");

????????users.add(session);

????????session.sendMessage(new TextMessage("connect"));

????????session.sendMessage(new TextMessage("new_msg"));

????}

????@Override

????public void handleMessage(WebSocketSession session, WebSocketMessage<?> message) throws Exception {

????????System.out.println("handleMessage" + message.toString());

????????session.sendMessage(new TextMessage(new Date() + ""));

????}

????@Override

????public void handleTransportError(WebSocketSession session, Throwable exception) throws Exception {

????????if(session.isOpen()){

????????????session.close();

????????}

????????users.remove(session);

????}

????@Override

????public void afterConnectionClosed(WebSocketSession session, CloseStatus closeStatus) throws Exception {

????????users.remove(session);

????}

????@Override

????public boolean supportsPartialMessages() {

????????return false;

????}

????/**

???? * 给所有在线用户发送消息

???? *

???? * @param message

???? */

????public void sendMessageToUsers(TextMessage message) {

????????for (WebSocketSession user : users) {

????????????try {

????????????????if (user.isOpen()) {

????????????????????user.sendMessage(message);

????????????????}

????????????} catch (IOException e) {

????????????????e.printStackTrace();

????????????}

????????}

????}

}

WebSocketConfig.java

package Tools.WebSocket;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.DefaultServletHandlerConfigurer;
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 {

    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(systemWebSocketHandler(), "/webSocketServer").addInterceptors(new WebSocketHandshakeInterceptor());
    }

    @Bean
    public WebSocketHandler systemWebSocketHandler() {
        return new SystemWebSocketHandler();
    }
}

package Tools.WebSocket;

import org.springframework.context.annotation.Bean;

import org.springframework.context.annotation.Configuration;

import org.springframework.web.servlet.config.annotation.DefaultServletHandlerConfigurer;

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 {

????@Override

????public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {

????????registry.addHandler(systemWebSocketHandler(), "/webSocketServer").addInterceptors(new WebSocketHandshakeInterceptor());

????}

????@Bean

????public WebSocketHandler systemWebSocketHandler() {

????????return new SystemWebSocketHandler();

????}

}

WebSocketHandshakeInterceptor.java

package Tools.WebSocket;

import org.springframework.http.server.ServerHttpRequest;
import org.springframework.http.server.ServerHttpResponse;
import org.springframework.web.socket.WebSocketHandler;
import org.springframework.web.socket.server.HandshakeInterceptor;

import java.util.Map;

public class WebSocketHandshakeInterceptor implements HandshakeInterceptor {
    @Override
    public boolean beforeHandshake(ServerHttpRequest serverHttpRequest, ServerHttpResponse serverHttpResponse, WebSocketHandler webSocketHandler, Map<String, Object> map) throws Exception {
        System.out.println("beforeHandshake");
        return true;
    }

    @Override
    public void afterHandshake(ServerHttpRequest serverHttpRequest, ServerHttpResponse serverHttpResponse, WebSocketHandler webSocketHandler, Exception e) {
        System.out.println("afterHandshake");
    }
}

package Tools.WebSocket;

import org.springframework.http.server.ServerHttpRequest;

import org.springframework.http.server.ServerHttpResponse;

import org.springframework.web.socket.WebSocketHandler;

import org.springframework.web.socket.server.HandshakeInterceptor;

import java.util.Map;

public class WebSocketHandshakeInterceptor implements HandshakeInterceptor {

????@Override

????public boolean beforeHandshake(ServerHttpRequest serverHttpRequest, ServerHttpResponse serverHttpResponse, WebSocketHandler webSocketHandler, Map<String, Object> map) throws Exception {

????????System.out.println("beforeHandshake");

????????return true;

????}

????@Override

????public void afterHandshake(ServerHttpRequest serverHttpRequest, ServerHttpResponse serverHttpResponse, WebSocketHandler webSocketHandler, Exception e) {

????????System.out.println("afterHandshake");

????}

}

由于我们使用了Struts2导致我们的网络请求优先被Struts2的拦截器拦截，而Struts2又处理不了websocket请求，结果直接返回了404错误。因此我们需要替换掉默认的在web.xml中定义的Struts2的拦截器，要求Struts2不处理websocket请求。
我们在src->Tools下面新建一个Filter的目录,下面创建一个名为StrutsPrepareAndExecuteFilterEx.java的源代码文件，如下图：

具体的代码如下：
StrutsPrepareAndExecuteFilterEx.java

package Tools.Filter;

import org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter;

import javax.servlet.FilterChain;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import java.io.IOException;

public class StrutsPrepareAndExecuteFilterEx extends StrutsPrepareAndExecuteFilter {

    @Override
    public void doFilter(ServletRequest req, ServletResponse resp,
                         FilterChain filter) throws IOException, ServletException {
        
        String requestURI = ((HttpServletRequest) req).getRequestURI();
        if(requestURI != null && (requestURI.contains("/webSocketServer")) || requestURI.startsWith("ws://") || requestURI.contains("/mspjapi"))
            filter.doFilter(req, resp);
        else
            super.doFilter(req, resp, filter);
    }
}

package Tools.Filter;

import org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter;

import javax.servlet.FilterChain;

import javax.servlet.ServletException;

import javax.servlet.ServletRequest;

import javax.servlet.ServletResponse;

import javax.servlet.http.HttpServletRequest;

import java.io.IOException;

public class StrutsPrepareAndExecuteFilterEx extends StrutsPrepareAndExecuteFilter {

????@Override

????public void doFilter(ServletRequest req, ServletResponse resp,

???????????????????????? FilterChain filter) throws IOException, ServletException {

????????

????????String requestURI = ((HttpServletRequest) req).getRequestURI();

????????if(requestURI != null && (requestURI.contains("/webSocketServer")) || requestURI.startsWith("ws://") || requestURI.contains("/mspjapi"))

????????????filter.doFilter(req, resp);

????????else

????????????super.doFilter(req, resp, filter);

????}

}

这时候的代码是无法编译通过的，原因是依赖的javax的Jar包不存在。此时，我们需要手工引入javax.servlet:javax.servlet-api:3.1.0这个Jar包。如下图：

ToolWebSocketProjectStructure

ToolWebSocketProjectStructureAddJars

ToolWebSocketProjectStructureAddJarsFromMaven

ToolWebSocketProjectStructureAddJarsFromMavenJavaxServerletApi3.1.0

ToolWebSocketProjectStructureAddJarsFromMavenJavaxServerletApi3.1.0Add

ToolWebSocketProjectStructureAddJarsFromMavenJavaxServerletApi3.1.0AddApply

还要注意，刚刚添加进入的javax.servlet:javax.servlet-api:3.1.0这个Jar包，我们只在编译期间使用，在运行时候，使用Tomcat自己实现的那个同名Jar包。也就是这个包是个Provided，而不是Compile关系，具体如下图：

ToolWebSocketProjectStructureKeepOutsideWar

接下来，修改web.xml指定Struts2的拦截器为我们定义的拦截器

<filter>
	<filter-name>struts2</filter-name>
	<filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class>
</filter>
<filter-mapping>
	<filter-name>struts2</filter-name>
	<url-pattern>/*</url-pattern>
</filter-mapping>

struts2

org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter

struts2

修改为

<filter>
	<filter-name>struts2</filter-name>
	<filter-class>Tools.Filter.StrutsPrepareAndExecuteFilterEx</filter-class>
</filter>
<filter-mapping>
	<filter-name>struts2</filter-name>
	<url-pattern>/*</url-pattern>
</filter-mapping>

struts2

Tools.Filter.StrutsPrepareAndExecuteFilterEx

struts2

经过上面的修改后，依旧是没办法进行网络访问的，原因是web.xml中的Spring拦截器并没有拦截WebSocket的数据请求。

<servlet>
	<servlet-name>dispatcher</servlet-name>
	<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
	<load-on-startup>1</load-on-startup>
	<async-supported>true</async-supported>
</servlet>
<servlet-mapping>
	<servlet-name>dispatcher</servlet-name>
	<url-pattern>*.form</url-pattern>
</servlet-mapping>

dispatcher

org.springframework.web.servlet.DispatcherServlet

true

dispatcher

*.form

修改为

<servlet>
	<servlet-name>dispatcher</servlet-name>
	<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
	<load-on-startup>1</load-on-startup>
	<async-supported>true</async-supported>
</servlet>
<servlet-mapping>
	<servlet-name>dispatcher</servlet-name>
	<url-pattern>*.form</url-pattern>
</servlet-mapping>
<servlet-mapping>
	<servlet-name>dispatcher</servlet-name>
	<url-pattern>/webSocketServer/*</url-pattern>
</servlet-mapping>

<servlet-name>dispatcher</servlet-name>

<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>

<load-on-startup>1</load-on-startup>

<async-supported>true</async-supported>

</servlet>

<servlet-mapping>

<servlet-name>dispatcher</servlet-name>

<url-pattern>*.form</url-pattern>

</servlet-mapping>

<servlet-mapping>

<servlet-name>dispatcher</servlet-name>

<url-pattern>/webSocketServer/*</url-pattern>

</servlet-mapping>

注意增加的

<async-supported>true</async-supported>

true

下一步，配置Spring的配置文件web->WEB-INF->dispatcher-servlet.xml增加配置信息类的扫描目录包含我们刚刚创建的src->Tools->WebSocket的目录（缺少这一步会导致我们通过注解实现的配置信息类没有被自动加载，导致无法访问），修改后的内容如下:

<?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"
       xsi:schemaLocation="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">
    <!-- Scan for spring annotated components -->
    <context:component-scan base-package="Tools.WebSocket"/>
</beans>

xml version="1.0" encoding="UTF-8"?>

xmlns="http://www.springframework.org/schema/beans"

?????? xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

?????? xmlns:context="http://www.springframework.org/schema/context"

?????? xsi:schemaLocation="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">

????

base-package="Tools.WebSocket"/>

最后，调用的页面的代码
WebSocket.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html PUBLIC "-//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=UTF-8">
  <title>WebSocket</title>
  <style type="text/css">

    #console-container {
      margin-left: 15px;
      margin-right: 15px;
      padding: 5px;
      width: 95%;
    }

    #console {
      border: 1px solid #CCCCCC;
      border-right-color: #999999;
      border-bottom-color: #999999;
      height: 300px;
      overflow-y: scroll;
      padding: 5px;
      width: 100%;
    }

    #console p {
      padding: 0;
      margin: 0;
    }
  </style>

  <script type="text/javascript">
    var url = 'ws://' + window.location.host + '/webSocketServer';
    var ws = new WebSocket(url);

    ws.onopen = function () {
      log('Info: connection opened.');
    };

    ws.onmessage = function (event) {
      log('Received: ' + event.data);
    };

    ws.onclose = function (event) {
      log('Info: connection closed.');
      log(event);
    };

    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 > 1000) {
        console.removeChild(console.firstChild);
      }
      console.scrollTop = console.scrollHeight;
    }
  </script>
</head>
<body>

<div>
  <div id="console-container">
    <div id="console"></div>
  </div>
</div>

</body>
</html>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<!DOCTYPE html PUBLIC "-//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=UTF-8">

??<title>WebSocket</title>

??type="text/css">

????#console-container {

??????margin-left: 15px;

??????margin-right: 15px;

??????padding: 5px;

??????width: 95%;

????}

????#console {

??????border: 1px solid #CCCCCC;

??????border-right-color: #999999;

??????border-bottom-color: #999999;

??????height: 300px;

??????overflow-y: scroll;

??????padding: 5px;

??????width: 100%;

????}

????#console p {

??????padding: 0;

??????margin: 0;

????}

??type="text/javascript">

????var url = 'ws://' + window.location.host + '/webSocketServer';

????var ws = new WebSocket(url);

????ws.onopen = function () {

??????log('Info: connection opened.');

????};

????ws.onmessage = function (event) {

??????log('Received: ' + event.data);

????};

????ws.onclose = function (event) {

??????log('Info: connection closed.');

??????log(event);

????};

????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 > 1000) {

????????console.removeChild(console.firstChild);

??????}

??????console.scrollTop = console.scrollHeight;

????}

</head>

<body>

<div>

??<div id="console-container">

????<div id="console"></div>

??</div>

</div>

</body>

</html>

最后的客户端显示效果如下图所示：
WebSocketJsp

注意：如此创建的WebSocket是会在两三分钟后主动断开连接的，原因在于WebSocket需要周期性的发送心跳报文来维持连接。后续我们会尝试使用sockjs来实现自动发送心跳的逻辑。

具体的sockjs的接入方法，参考IntelliJ IDEA 2016.2使用Spring 4.3.1.RELEASE,sockjs-1.1.1,stomp-1.2搭建基于Tomcat-7.0.68的WebSocket应用

一	二	三	四	五	六	日
曾道人吉数			?	?
?	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	?

分类：WebSocket

IntelliJ IDEA 2016.2使用Spring 4.3.1.RELEASE,sockjs-1.1.1,stomp-1.2搭建基于Tomcat-7.0.68的WebSocket应用

参考链接

IntelliJ IDEA 2016.2使用Spring 4.3.1.RELEASE搭建基于Tomcat-7.0.68的WebSocket应用

FireFox中跟踪调试WebSocket通信报文