這篇文章將介紹如何構建一個簡單的WebSocket訊息推送Demo

使用eclipse建立maven專案後引入相關的依賴jar包，如下：

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.accenture</groupId>
<artifactId>webSocket</artifactId>
<name>webSocket</name>
<packaging>war</packaging>
<version>1.0.0-BUILD-SNAPSHOT</version>
<properties>
<java-version>1.6</java-version>
<org.aspectj-version>1.6.10</org.aspectj-version>
<org.slf4j-version>1.6.6</org.slf4j-version>
<spring-framework.version>4.1.6.RELEASE</spring-framework.version>
<junit.version>4.11</junit.version>
<jackson.version>2.6.0</jackson.version>
</properties>
<dependencies>
<!-- Spring -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-context</artifactId>
<version>${spring-framework.version}</version>
<exclusions>
<!-- Exclude Commons Logging in favor of SLF4j -->
<exclusion>
<groupId>commons-logging</groupId>
<artifactId>commons-logging</artifactId>
</exclusion>
</exclusions>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>${spring-framework.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-tx</artifactId>
<version>${spring-framework.version}</version>
</dependency>
<dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-beans</artifactId>
            <version>${spring-framework.version}</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-jdbc</artifactId>
            <version>${spring-framework.version}</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-aop</artifactId>
            <version>${spring-framework.version}</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-aspects</artifactId>
            <version>${spring-framework.version}</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-orm</artifactId>
            <version>${spring-framework.version}</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-expression</artifactId>
            <version>${spring-framework.version}</version>
        </dependency>
        <dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-test</artifactId>
<version>${spring-framework.version}</version>
</dependency>

<!-- Spring WebSocket -->
<dependency>  
   <groupId>org.springframework</groupId>  
   <artifactId>spring-websocket</artifactId>  
   <version>${spring-framework.version}</version>  
</dependency>  
<dependency>  
   <groupId>org.springframework</groupId>  
   <artifactId>spring-messaging</artifactId>  
   <version>${spring-framework.version}</version>  
</dependency>  

<!-- jackson -->
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-core</artifactId>
<version>${jackson.version}</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>${jackson.version}</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-annotations</artifactId>
<version>${jackson.version}</version>
</dependency>

<!-- AspectJ -->
<dependency>
<groupId>org.aspectj</groupId>
<artifactId>aspectjrt</artifactId>
<version>${org.aspectj-version}</version>
</dependency>

<!-- Logging -->
<dependency>
<groupId>org.slf4j</groupId>
<artifactId>slf4j-api</artifactId>
<version>${org.slf4j-version}</version>
</dependency>
<dependency>
<groupId>org.slf4j</groupId>
<artifactId>jcl-over-slf4j</artifactId>
<version>${org.slf4j-version}</version>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>org.slf4j</groupId>
<artifactId>slf4j-log4j12</artifactId>
<version>${org.slf4j-version}</version>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>log4j</groupId>
<artifactId>log4j</artifactId>
<version>1.2.15</version>
<exclusions>
<exclusion>
<groupId>javax.mail</groupId>
<artifactId>mail</artifactId>
</exclusion>
<exclusion>
<groupId>javax.jms</groupId>
<artifactId>jms</artifactId>
</exclusion>
<exclusion>
<groupId>com.sun.jdmk</groupId>
<artifactId>jmxtools</artifactId>
</exclusion>
<exclusion>
<groupId>com.sun.jmx</groupId>
<artifactId>jmxri</artifactId>
</exclusion>
</exclusions>
<scope>runtime</scope>
</dependency>


<!-- @Inject -->
<dependency>
<groupId>javax.inject</groupId>
<artifactId>javax.inject</artifactId>
<version>1</version>
</dependency>

<!-- Servlet -->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>servlet-api</artifactId>
<version>2.5</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>javax.servlet.jsp</groupId>
<artifactId>jsp-api</artifactId>
<version>2.1</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>jstl</artifactId>
<version>1.2</version>
</dependency>

<!-- Test -->
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>${junit.version}</version>
<scope>test</scope>
</dependency>   

</dependencies>
    <build>
        <plugins>
            <plugin>
                <artifactId>maven-eclipse-plugin</artifactId>
                <version>2.9</version>
                <configuration>
                    <additionalProjectnatures>
                        <projectnature>org.springframework.ide.eclipse.core.springnature</projectnature>
                    </additionalProjectnatures>
                    <additionalBuildcommands>
                        <buildcommand>org.springframework.ide.eclipse.core.springbuilder</buildcommand>
                    </additionalBuildcommands>
                    <downloadSources>true</downloadSources>
                    <downloadJavadocs>true</downloadJavadocs>
                </configuration>
            </plugin>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <version>2.5.1</version>
                <configuration>
                    <source>1.6</source>
                    <target>1.6</target>
                    <compilerArgument>-Xlint:all</compilerArgument>
                    <showWarnings>true</showWarnings>
                    <showDeprecation>true</showDeprecation>
                </configuration>
            </plugin>
            <plugin>
                <groupId>org.codehaus.mojo</groupId>
                <artifactId>exec-maven-plugin</artifactId>
                <version>1.2.1</version>
                <configuration>
                    <mainClass>org.test.int1.Main</mainClass>
                </configuration>
            </plugin>
        </plugins>
    </build>

</project>

websocket相關類：

我們需要編寫三個WebSocket的處理類，這裡是利用了Spring WebSocket模組，三個類分別是WebSocket處理類SocketHandler、WebSocket配置類WebSocketConfig以及WebSocket攔截器WebSocketInterceptor。

在開始編寫之前記得在Spring配置檔案中新增Spring註解支援：

<context:component-scan base-package="com.accenture.demo" />

WebSocketConfig.java

package com.accenture.socket;

}

如上所示，在WebSocketConfig.java中，我們為SocketHandler註冊了兩個url請求，並應用了我們所定義的WebSocketInterceptor()攔截器。

WebSocketInterceptor.java

package com.accenture.socket;


import java.util.Map;


import javax.servlet.http.HttpSession;


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


/**
 * @desp websocket攔截器
 *
 */
public class WebSocketInterceptor implements HandshakeInterceptor{


@Override
public void afterHandshake(ServerHttpRequest request, ServerHttpResponse response,
WebSocketHandler handler, Exception exception) {

}

/**
* @desp 將HttpSession中物件放入WebSocketSession中
*/
@Override
public boolean beforeHandshake(ServerHttpRequest request,
ServerHttpResponse response, WebSocketHandler handler,
Map<String, Object> map) throws Exception {
if(request instanceof ServerHttpRequest){
ServletServerHttpRequest servletRequest = (ServletServerHttpRequest) request;
HttpSession session = servletRequest.getServletRequest().getSession();
if(session!=null){
//區分socket連線以定向傳送訊息
map.put("user", session.getAttribute("user"));
}
}
return true;
}

}

如上所示，在執行客戶端伺服器端握手之前，也就是在beforeHandshake()方法中，我們將HttpSession中我們登入後儲存的物件放到WebSocketSession中，以此實現定向傳送訊息。

SocketHandler.java

package com.accenture.socket;


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


import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Service;
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;


/**
 * @desp Socket處理類
 * @author [email protected]
 *
 */
@Service
public class SocketHandler implements WebSocketHandler{


private static final Logger logger;
private static final ArrayList<WebSocketSession> users;

static{
users = new ArrayList<WebSocketSession>();
logger = LoggerFactory.getLogger(SocketHandler.class);
}

@Override
public void afterConnectionEstablished(WebSocketSession session)
throws Exception {
logger.info("成功建立socket連線");
users.add(session);
String username = session.getAttributes().get("user").toString();
if(username!=null){
session.sendMessage(new TextMessage("我們已經成功建立socket通訊了"));
}

}


@Override
public void handleMessage(WebSocketSession arg0, WebSocketMessage<?> arg1)
throws Exception {
// TODO Auto-generated method stub

}


@Override
public void handleTransportError(WebSocketSession session, Throwable error)
throws Exception {
if(session.isOpen()){
session.close();
}
logger.error("連接出現錯誤:"+error.toString());
users.remove(session);
}

@Override
public void afterConnectionClosed(WebSocketSession session, CloseStatus arg1)
throws Exception {
logger.debug("連線已關閉");
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();
            }
        }
    }
 
    /**
     * 給某個使用者傳送訊息
     *
     * @param userName
     * @param message
     */
    public void sendMessageToUser(String userName, TextMessage message) {
        for (WebSocketSession user : users) {
            if (user.getAttributes().get("user").equals(userName)) {
                try {
                    if (user.isOpen()) {
                        user.sendMessage(message);
                    }
                } catch (IOException e) {
                    e.printStackTrace();
                }
                break;
            }
        }
    }

}

3.3 SpringMVC Controller類：

SocketController.java

package com.accenture.controller;


import javax.servlet.http.HttpSession;


import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.socket.TextMessage;


import com.accenture.socket.SocketHandler;


/**
 * @desp Socket控制器
 * @author [email protected]
 * @date 2016-5-6
 *
 */
@Controller
public class SocketController{

private static final Logger logger = LoggerFactory.getLogger(SocketController.class);

@Autowired
private SocketHandler socketHandler;

@RequestMapping(value="/login")
public String login(HttpSession session){
logger.info("使用者登入了建立連線啦");

session.setAttribute("user", "liulichao");

return "home";
}


@RequestMapping(value = "/message", method = RequestMethod.GET)
public String sendMessage(){

socketHandler.sendMessageToUser("liulichao", new TextMessage("這是一條測試的訊息"));

return "message";
}

}

如上，在SocketController中我們定義了兩個請求處理方法，首先執行login()後再session中存入user物件模擬使用者已登入，而sendMessage()方法則是呼叫了sendMessageToUser()實現向某一個使用者推送訊息。

整個包結構如下

同時，在web.xml中需要所有servlet與filter中需要加入非同步支援：

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

前端頁面實現

模擬登入頁面home.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
String wsPath = "ws://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
<title>Home</title>
</head>
<body>
<h1>
Hello world!  This is a WebSocket demo!
<div id="message">

</div>
</h1>


<script type="text/javascript" src="js/jquery-1.12.2.min.js"></script>
<script type="text/javascript" src="js/sockjs.min.js"></script>




<script type="text/javascript">

$(function(){
//建立socket連線
var sock;
if ('WebSocket' in window) {
sock = new WebSocket("<%=wsPath%>socketServer");
    } else if ('MozWebSocket' in window) {
    sock = new MozWebSocket("<%=wsPath%>socketServer");
    } else {
    sock = new SockJS("<%=basePath%>sockjs/socketServer");
    }
sock.onopen = function (e) {
console.log(e);
    };
    sock.onmessage = function (e) {
    console.log(e)
        $("#message").append("<p><font color='red'>"+e.data+"</font>")
    };
    sock.onerror = function (e) {
    console.log(e);
    };
    sock.onclose = function (e) {
    console.log(e);
    }
});

</script>


</body>

</html>

如上所示，我們訪問login模擬登入後之後將跳到home.jsp，在頁面中通過sockjs與伺服器端我們註冊的WebSocket訪問介面實現握手建立socket連線。

推送訊息頁面message.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!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>message</title>
</head>
<body>
<h1>已經發送訊息了</h1>

</body>

</html>

在訪問/message過後將呼叫訊息傳送的函式實現後端訊息向前端的推送。

首先，我們訪問login函式，將跳至home.jsp檢視，出現如下的頁面：

在這一步中，我們已經在後臺模擬登入，session中儲存了user的物件，緊接著，我們再在新頁面中訪問message函式：

這時候我們再回去看home.jsp的頁面：

可以看到，頁面實現了更新，同時在socketServer握手請求之後並沒有發生http的請求，同時我們可以在console中看到打印出來的通訊的資料：

至此，我們成功實現了伺服器端向客戶端的訊息推送。