websocket实现过程

最新推荐文章于 2021-08-26 13:38:19 发布

tu1234321

最新推荐文章于 2021-08-26 13:38:19 发布

阅读量2.2k

点赞数

分类专栏： websocket

本文链接：https://blog.csdn.net/u014213453/article/details/41125157

版权

websocket 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

环境：tomcat 8.0.9+Spring(4.0.2.RELEASE)+intellij

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配置

在jerseyServlet中配置<load-on-startup>1</load-on-startup>，增加websocketServlet处理“/websocket/*”。

提升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的消息处理类。

代码为：

<?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: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">


    <bean id="websocket" class="org.whut.monitor.business.communication.websocket.WebsocketEndPoint"/>
    <websocket:handlers>
        <websocket:mapping path="/hello" handler="websocket"/>
        <websocket:handshake-interceptors>
            <bean class="org.whut.monitor.business.communication.websocket.HandshakeInterceptor"/>
        </websocket:handshake-interceptors>
    </websocket:handlers>
    <!-- 定义跳转的文件的前后缀 -->
    <bean id="viewResolver"
          class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <!-- 这里的配置我的理解是自动给后面action的方法return的字符串加上前缀和后缀，变成一个 可用的url地址 -->
        <property name="prefix" value="/WEB-INF/jsp/" />
        <property name="suffix" value=".jsp" />
    </bean>

</beans>

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收到的数据实时结合消息处理类发送。

在消息处理类中定义全局变量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();
                }

数据发到前端，是以String形式的，websocket发送的数据只支持String和二进制数据，故前台需要对数据进行解析，在项目中有一个$.toJSON()的方法，但是是对Object类型进行解析，不能对String解析；同时SocketTest中产生的原始数据格式为：

{sensors:[{sensorNum:'2100000000010000',dataType:'Route',time:'"+format.format(now)+"',data:["+data+"]}]}，解析sensors时是一个数组。如何取得sensorNum，data

解决：varsensorJumpName=eval("(" +event.data+ ")");

varnumber=sensorJumpName.sensors[0].sensorNum;

var data1=sensorJumpName.sensors[0].data;

前端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);			};
            }
        }