1、前端页面
前端页面是websocket连接请求端,在定有的url发起连接请求
Var ws;
url="ws://localhost:8080/realtimeMonitor/websocket/hello";
ws=new WebSocket(url);
websocket有四个响应事件(onopen,onclose,onmessage,onerror),两个方法(close(),send())。
ws.onopen = function () {
console.log('Info: connection opened.');
ws.onmessage = function (event) {
console.log("收到消息!"+event.data);
ws.onclose = function (event) {
console.log('Info: connection closed.');
};
}
其中onmessage响应事件是收到后台发来的数据,对数据做实时处理就可以在这里做;而send()方法则是前端对后台发数据,在项目中可以发送sensorNum以验证和查看和sensorNum数据匹配的data,减少后台向前台发送的数据量。
2、Web.xml配置
遇到的问题1:
要建立一个处理上述url的websocketServlet,但是项目中有一个jerseyServlet处理”/rs/”,所以如果直接用”/”,根据处理的优先级,会先由websocketServlet匹配,导致http://localhost:8080/realtimeMonitor/login.html ,也由websocketServlet处理,使项目无法登陆;
解决方案
二:在jerseyServlet中配置1,在websocketServlet处理“/websocket/”。
遇到的问题2:
无法找到websocketServlet的servlet-class,
解决方案
提升spring的版本由原来的3.2.5.RELEASE提升到4.0.1.RELEASE以上(我采用的是4.0.2.RELEASE)在paltform目录下的pom.xml中将
<spring.version>3.2.5.RELEASE</spring.version>
改成
<spring.version>4.0.2.RELEASE</spring.version>
Web.xml中添加的代码为:
<servlet>
<servlet-name>websocketServlet</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<init-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath*:META-INF/spring/websocketmessage-applicationContext.xml</param-value>
</init-param>
<async-supported>true</async-supported>
</servlet>
<servlet-mapping>
<servlet-name>websocketServlet</servlet-name>
<url-pattern>/websocket/*</url-pattern>
</servlet-mapping>
3、spring配置
也就是上述classpath*:META-INF/spring/websocketmessage-applicationContext.xml,前面已将url="ws://localhost:8080/realtimeMonitor/websocket/hello"处理到“ws://localhost:8080/realtimeMonitor/websocket/”要使spring配置产生作用,需配置websocket的匹配路径path,同时要配置对此path下前端和服务端的握手处理类和对此path的消息处理类。
问题三
无法配置websocket,
解决方案
添加域名
xmlns:websocket="http://www.springframework.org/schema/websocket"
xsi:schemaLocation="
http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/websocket http://www.springframework.org/schema/websocket/spring-websocket.xsd"
4、后台java
一、握手处理类
public class HandshakeInterceptor extends HttpSessionHandshakeInterceptor {
@Override
public boolean beforeHandshake(ServerHttpRequest request,
ServerHttpResponse response, WebSocketHandler wsHandler,
Map<String, Object> attributes) throws Exception {
System.out.println("Before Handshake");
return super.beforeHandshake(request, response, wsHandler, attributes);
}
@Override
public void afterHandshake(ServerHttpRequest request,
ServerHttpResponse response, WebSocketHandler wsHandler,
Exception ex) {
System.out.println("After Handshake");
super.afterHandshake(request, response, wsHandler, ex);
}
}
二、消息处理类
public class WebsocketEndPoint extends TextWebSocketHandler {
@Override
protected void handleTextMessage(WebSocketSession session,
TextMessage message) throws Exception {
super.handleTextMessage(session, message);
}
}
要使上述运行正常在pom.xml中添加
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>${spring.version}</version>
</dependency
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-websocket</artifactId>
<version>${spring.version}</version>
</dependency>
要将项目中SocketTest中随机发的数据实时发送到前台,就必须将项目中JMS收到的数据实时结合消息处理类发送。
问题四:如果在JMS的onmessage中发送需要拿到websocket连接的session,如果在消息处理类中发送,如何实时触发消息处理类
解决方案:在消息处理类中定义全局变量tempSession,由前台onopen事件中send()方法触发产生一个session,将此保存到全局变量中,定义方法sendMessage(String request)在jms的onmessage中调用。最终消息处理类的代码为:
public class WebsocketEndPoint extends TextWebSocketHandler {
private static WebSocketSession tempSession;
private static String tempMessage;
@Override
protected void handleTextMessage(WebSocketSession session,
TextMessage message) throws Exception {
tempSession = session;
tempMessage = message.getPayload();
super.handleTextMessage(session, message);
}
public void sendMessage(String request) throws IOException {
TextMessage returnMessage = new TextMessage(request);
tempSession.sendMessage(returnMessage);
}
public String getTempMessage(){
return tempMessage;
}
}
JMS中的onmessage()添加的代码为:
try {
WebsocketEndPoint webSocket = new WebsocketEndPoint();
String sNum=webSocket.getTempMessage();
webSocket.sendMessage(messageText);
}
catch (Exception exception) {
exception.printStackTrace();
}
前端js代码为:
function connect() {
var url="ws://localhost:8080/realtimeMonitor/websocket/hello";
ws = new WebSocket(url);
ws.onopen = function () {
console.log('Info: connection opened.');
ws.send(currentMonitor.number);
ws.onmessage = function (event) {
console.log("收到消息!"+event.data);
var sensorJumpName=eval("(" +event.data+ ")");
var number=sensorJumpName.sensors[0].sensorNum;
var data1=sensorJumpName.sensors[0].data;
if(currentMonitor.number==number){
drawChart("#waveContainer", data1, "mV");
}
};
ws.onclose = function (event) {
console.log('Info: connection closed.');
console.log(event); };
}
}