最近在學習WebSocket的時候發現,當使用Struts2框架的時候發現WebSocket連接失效,瀏覽器Firefox(54.0.1)報錯為:Firefox 無法建立到 ws://localhost/echoSocket 服務器的連接。
當然了,你不用懷疑瀏覽器出什么毛病了,當你使用chrome瀏覽器以及高版本的IE(11)瀏覽器的時候也報同樣的錯誤。
下面我們就說說為什么會出現這種錯誤:
首先,你的Struts2在web.xml文件中的fiter-mapping配置肯定是如下的:
<filter-mapping>
<fiter-name>struts2</fiter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
這樣的配置會攔截所有的http協議請求。這時你會問我的協議不是ws協議嗎,為什么會被攔截?請注意:在實現websocket連線過程中,需要通過瀏覽器發出websocket連線請求,然后服務器發出回應,這個過程通常稱為“握手” 。在 WebSocket API,瀏覽器和服務器只需要做一個握手的動作,然后,瀏覽器和服務器之間就形成了一條快速通道。明白了嗎?在通道第一次建立的時候,發送的依舊是http協議請求,只不過該http協議包含了一些關于ws協議的頭信息,當整個通道建立以后,之間的通信才切換為ws協議進行通信。
這下明白為什么websocket在struts2中會產生沖突了吧。當前了,如果還不明白的請看下面解釋
當strut2攔截了所有請求或者websocket的請求地址在struts2的攔截范圍內。那么!!!struts2會根據該請求地址去找對應的action,那么這樣的話你的action中肯定沒有配置該請求地址,所有就沒有返回或者返回報錯,因而websocket通道建立失敗。瀏覽器就會報出上面的錯誤。
解決措施:
在struts2的struts.xml中文件配置一個struts.action.excludePattern屬性將該請求地址不做處理,那么struts2自然不會理睬這個請求地址,因而websocket通道自然而然的就建立起來了。
<constant name="struts.action.excludePattern" value=".*Socket"/>
請注意: value的值是正則表達式驗證串,為什么要這么設計呢。請記住一句話,約定優于配置。
當然了,如果你只有一個websocket后臺的話,那么你的value值的正則表達式的規則可以直接寫成你的這個websocket請求地址。
如果像我上面那樣寫的話,那么所有以Socket結尾的websocket都不被sturts2理睬了。有意思的是,如果你的action的name值有以Socket結尾的,那么這個action就失效了,請牢記,約定優于配置。
下面給一些代碼:(當然是拷貝別人的了,我怎么可能會自己動手寫代碼呢)
jsp頁面代碼:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%
String basePath = request.getScheme() + "://" + request.getServerName() + request.getContextPath() + "/";//定位到根目錄
%>
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script type="text/javascript" src="plugins/jquery.js"></script>
<script type="text/javascript">
var ws;
var url = "ws://localhost/echoSocket";
function connect() {
alert("準備連接");
if ('WebSocket' in window) {
alert("創建WebSocket連接");
ws = new WebSocket(url);
} else if ('MozWebSocket' in window) {
alert("創建MozWebSocket連接");
ws = new MozWebSocket(url);
} else {
alert('WebSocket is not supported by this browser.');
return;
}
ws.onmessage = function (event) {
console.debug(event);
$("#content").append(event.data + "<br/>");
};
}
function send() {
var value = $("#msg").val();
ws.send(value);
}
</script>
</head>
<body>
<button onclick="connect();">connect</button>
<hr/>
<input id="msg"/>
<button onclick="send();">send</button>
<div id="content" style="border: 1px solid black; width: 200px; height: 300px;"></div>
</body>
</html>
后臺WebSocket的java代碼
package cn.sharek.bsg.vmi.websocket;
import java.io.IOException;
import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
@ServerEndpoint(value = "/echoSocket")
public class EchoSocket {
@OnOpen
public void open(Session session) {
System.out.println("Session ID:" + session.getId());
}
@OnMessage
public void receive(Session session, String msg) {
System.out.println(msg);
try {
session.getBasicRemote().sendText("Echo:" + msg);
} catch (IOException e) {
e.printStackTrace();
}
}
@OnClose
public void close(Session session) {
System.out.println(session.getId() + " session 關閉");
}
}