Spring+SpringMVC+WebSocket

一时失言乱红尘 2022-06-06 02:19 124阅读 0赞

非常感谢  http://blog.csdn.net/mybook201314/article/details/70173674[点击打开链接][Link 1]

WebSocket**技术学习 [https://www.itkc8.co][https_www.itkc8.co]m**

# 1、WebSocket简介 #

WebSocket是HTML5提供的一种全双工通信的协议，通常是浏览器（或其他客户端）与Web服务器之间的通信。这使得它适合于高度交互的Web应用程序，如及时通讯聊天等。

> WebSocket协议是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工(full-duplex)通信——可以通俗的解释为服务器主动发送信息给客户端。
> 
> WebSocket首次在HTML5规范中被引用为TCP连接，作为基于TCP的套接字API的占位符。\[1\] WebSocket通信协议于2011年被IETF定为标准RFC 6455，并被RFC7936所补充规范。
> 
> 摘抄来自：[百度百科-websocket][-websocket]

--------------------

# 2、Spring+websocket #

spring4.0已经就支持websocket了，可以去查看官网。

> [官网：spring websocket][spring websocket]

注：这个spring+websocket，自己也不是很熟悉，只是最近使用到了，学习了一下，记录处理了，方便以后避免走更多的绕路。

--------------------

# 3、配置环境 #

## 3.1、环境： ##

spring-4.0.2.RELEASE
        java1.7
        apache-tomcat-7.0.75

maven构建工程：

POM.xml：

<dependency>  
        <groupId>com.fasterxml.jackson.core</groupId>  
        <artifactId>jackson-core</artifactId>  
        <version>2.3.0</version>  
    </dependency>  
    <dependency>  
        <groupId>com.fasterxml.jackson.core</groupId>  
        <artifactId>jackson-databind</artifactId>  
        <version>2.3.0</version>  
    </dependency>

SpringMVC：

<dependency>
                <groupId>org.springframework</groupId>
                <artifactId>spring-webmvc</artifactId>
                <version>4.0.2.RELEASE</version>
            </dependency>
    
            <dependency>
                <groupId>org.springframework</groupId>
                <artifactId>spring-context-support</artifactId>
                <version>4.0.2.RELEASE</version>
            </dependency>

WebSocket：

<dependency>
               <groupId>org.springframework</groupId>
               <artifactId>spring-websocket</artifactId>
               <version>4.0.2.RELEASE</version>
            </dependency>
    
            <dependency>
               <groupId>org.springframework</groupId>
               <artifactId>spring-messaging</artifactId>
               <version>4.0.2.RELEASE</version>
            </dependency>

--------------------

## 3.2、Servlet-api ##

servlet-api必须是3.0+，才支持websocket，所以如果不是，则要更新jar包。

<dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>3.1.0</version>
        </dependency>

--------------------

## 3.3、web.xml配置 ##

并且 web.xml的namespace也要确保是3.0+，

web.xml

<?xml version="1.0" encoding="UTF-8"?> 
    <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" version="3.0">
    
        
      <absolute-ordering />
    </web-app>

代码：`<absolute-ordering />也要添加在web.xml开始。`

--------------------

并且必须将所以的filter和servlet都要添加异步：

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

如：springMVC在web.xml中的配置也要添加：

<servlet>  
        <servlet-name>springMVC</servlet-name>  
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>  
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>classpath:springMVC.xml</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>  
        <async-supported>true</async-supported>
      </servlet>  
    
      <servlet-mapping>  
        <servlet-name>springMVC</servlet-name>  
        <url-pattern>/</url-pattern>  
      </servlet-mapping>

--------------------

# 4、service服务端的具体实现 #

## 4.1、首先创建websocket的处理类 ##

MyWebSocketHandler.java

package com.cuit.secims.mw.ws;
    
    import java.util.ArrayList;
    import java.util.Map;
    
    import org.apache.log4j.Logger;
    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;
    
    import com.google.common.reflect.TypeToken;
    import com.google.gson.Gson;
    
    
    
    
    public class MyWebSocketHandler implements WebSocketHandler{
    
    
        private static final Logger log = Logger.getLogger(MyWebSocketHandler.class);
    
        // 保存所有的用户session
        private static final ArrayList<WebSocketSession> users = new ArrayList<WebSocketSession>();
    
    
        // 连接 就绪时 
        @Override
        public void afterConnectionEstablished(WebSocketSession session)
                throws Exception {
    
            log.info("connect websocket success.......");
    
            users.add(session);
    
        }
    
    
        // 处理信息
        @Override
        public void handleMessage(WebSocketSession session,
                WebSocketMessage<?> message) throws Exception {
    
            Gson gson = new Gson();
    
            // 将消息JSON格式通过Gson转换成Map
            // message.getPayload().toString() 获取消息具体内容
            Map<String, Object> msg = gson.fromJson(message.getPayload().toString(), 
                    new TypeToken<Map<String, Object>>() {}.getType());
    
            log.info("handleMessage......."+message.getPayload()+"..........."+msg);
    
    // session.sendMessage(message);
    
            // 处理消息 msgContent消息内容
            TextMessage textMessage = new TextMessage(msg.get("msgContent").toString(), true);
            // 调用方法（发送消息给所有人）
            sendMsgToAllUsers(textMessage);
    
    
        }
    
    
        // 处理传输时异常
        @Override
        public void handleTransportError(WebSocketSession session,
                Throwable exception) throws Exception {
            // TODO Auto-generated method stub
    
        }
    
    
    
        // 关闭 连接时
        @Override
        public void afterConnectionClosed(WebSocketSession session,
                CloseStatus closeStatus) throws Exception {
    
            log.info("connect websocket closed.......");
    
            users.remove(session);
    
        }
    
    
    
        @Override
        public boolean supportsPartialMessages() {
            // TODO Auto-generated method stub
            return false;
        }
    
    
    
        // 给所有用户发送 信息
        public void sendMsgToAllUsers(WebSocketMessage<?> message) throws Exception{
    
            for (WebSocketSession user : users) {
                user.sendMessage(message);
            }
    
        }
    
    }

> 处理类可以实现WebSocketHandler最基本的接口，也可以实现具体的接口   
> 如：![这里写图片描述][SouthEast]

处理类就是处理：连接开始、关闭、处理信息等方法

--------------------

## 4.2、创建握手（handshake）接口/拦截器 ##

HandshakeInterceptor .java

package com.cuit.secims.mw.ws;
    
    import java.util.Map;
    
    import org.springframework.http.server.ServerHttpRequest;
    import org.springframework.http.server.ServerHttpResponse;
    import org.springframework.web.socket.WebSocketHandler;
    import org.springframework.web.socket.server.support.HttpSessionHandshakeInterceptor;
    
    
    
    public class HandshakeInterceptor extends HttpSessionHandshakeInterceptor{
    
    
        // 握手前
        @Override
        public boolean beforeHandshake(ServerHttpRequest request,
                ServerHttpResponse response, WebSocketHandler wsHandler,
                Map<String, Object> attributes) throws Exception {
    
            System.out.println("++++++++++++++++ HandshakeInterceptor: beforeHandshake ++++++++++++++"+attributes);
    
            return super.beforeHandshake(request, response, wsHandler, attributes);
        }
    
    
    
        // 握手后
        @Override
        public void afterHandshake(ServerHttpRequest request,
                ServerHttpResponse response, WebSocketHandler wsHandler,
                Exception ex) {
    
    
            System.out.println("++++++++++++++++ HandshakeInterceptor: afterHandshake ++++++++++++++");
    
    
            super.afterHandshake(request, response, wsHandler, ex);
        }
    
    }

这个的主要作用是可以在握手前做一些事，把所需要的东西放入到attributes里面，然后可以在WebSocketHandler的session中， 取到相应的值，具体可参考HttpSessionHandshakeInterceptor，这儿也可以实现HandshakeInterceptor 接口。

--------------------

## 4.3、注册处理类及握手接口 ##

这个有两种方式：

1.  创建一个类来实现注册
2.  使用xml配置文件实现

### 4.3.1、创建类MyWebSocketConfig ###

package com.cuit.secims.mw.ws;
    
    import org.springframework.context.annotation.Bean;
    import org.springframework.context.annotation.Configuration;
    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 MyWebSocketConfig extends WebMvcConfigurerAdapter implements WebSocketConfigurer {
    
    
            @Override
            public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
    
                //前台 可以使用websocket环境
                registry.addHandler(myWebSocketHandler(),"/websocket").addInterceptors(new HandshakeInterceptor());
    
    
              //前台 不可以使用websocket环境，则使用sockjs进行模拟连接
                registry.addHandler(myWebSocketHandler(), "/sockjs/websocket").addInterceptors(new HandshakeInterceptor())
                        .withSockJS();
            }
    
    
            // websocket 处理类
            @Bean
            public WebSocketHandler myWebSocketHandler(){
                return new MyWebSocketHandler();
            }
    
    
    }

注意：不要忘记在springmvc的配置文件中配置对此类的自动扫描

<context:component-scan base-package="com.cuit.secims.mw.ws" />

--------------------

### 4.3.2、xml配置方式 ###

spring-WebSocket.xml

<?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:mvc="http://www.springframework.org/schema/mvc" xmlns:context="http://www.springframework.org/schema/context" xmlns:aop="http://www.springframework.org/schema/aop" xmlns:tx="http://www.springframework.org/schema/tx" xmlns:websocket="http://www.springframework.org/schema/websocket" xsi:schemaLocation=" http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-4.0.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.0.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.0.xsd http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-4.0.xsd http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-4.0.xsd http://www.springframework.org/schema/websocket http://www.springframework.org/schema/websocket/spring-websocket-4.0.xsd">
    
    
    
                
                <bean id="myHandler" class="com.cuit.secims.mw.ws.MyWebSocketHandler"/>
    
                
                <bean id="myInterceptor" class="com.cuit.secims.mw.ws.HandshakeInterceptor"/>
    
                <websocket:handlers >
                    <websocket:mapping path="/websocket" handler="myHandler"/>
                    <websocket:handshake-interceptors>
                        <ref bean="myInterceptor"/>
                    </websocket:handshake-interceptors>
                </websocket:handlers>
    
                
                <websocket:handlers>
                    <websocket:mapping path="/sockjs/websocket" handler="myHandler"/>
                    <websocket:handshake-interceptors>
                        <ref bean="myInterceptor"/>
                    </websocket:handshake-interceptors>
                    <websocket:sockjs />
                </websocket:handlers>   
    
    </beans>

其中`<websocket:sockjs />`就是对sockJS的注册方式。

注意：xml的namespace中要添加spring对websocket的支持：

--------------------

# 5、client客户端的实现 #

## 5.1、页面展示 ##

index.html

<!DOCTYPE HTML>
    <html>
    
        <head>
            <title>首页</title>
    
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <meta name="renderer" content="webkit">
    
            
            <script type="text/javascript" src="jquery.min.js"></script>
    
            
            <script type="text/javascript" src="sockjs.min.js" ></script>
    
            
            <script type="text/javascript" src="index.js"></script>
    
        </head>
    
        <body>
    
            
            <div style="margin: 20px auto; border: 1px solid blue; width: 300px; height: 500px;">
    
                
                <div id="msg" style="width: 100%; height: 70%; border: 1px solid yellow;overflow: auto;"></div>
    
                
                <textarea id="tx" style="width: 100%; height: 20%;"></textarea>
    
                
                <button id="TXBTN" style="width: 100%; height: 8%;">发送数据</button>
    
            </div>
    
    
        </body>
    
    </html>

--------------------

## 5.2、JS-客户端主要的实现 ##

index.js

$(function() {
    
        var websocket;
    
    
        // 首先判断是否 支持 WebSocket
        if('WebSocket' in window) {
            websocket = new WebSocket("ws://localhost:8080/SECIMS/websocket");
        } else if('MozWebSocket' in window) {
            websocket = new MozWebSocket("ws://localhost:8080/SECIMS/websocket");
        } else {
            websocket = new SockJS("http://localhost:8080/SECIMS/sockjs/websocket");
        }
    
        // 打开时
        websocket.onopen = function(evnt) {
            console.log(" websocket.onopen ");
        };
    
    
        // 处理消息时
        websocket.onmessage = function(evnt) {
            $("#msg").append("<p>(<font color='red'>" + evnt.data + "</font>)</p>");
            console.log(" websocket.onmessage ");
        };
    
    
        websocket.onerror = function(evnt) {
            console.log(" websocket.onerror ");
        };
    
        websocket.onclose = function(evnt) {
            console.log(" websocket.onclose ");
        };
    
    
        // 点击了发送消息按钮的响应事件
        $("#TXBTN").click(function(){
    
            // 获取消息内容
            var text = $("#tx").val();
    
            // 判断
            if(text == null || text == ""){
                alert(" content can not empty!!");
                return false;
            }
    
            var msg = {
                msgContent: text,
                postsId: 1
            };
    
            // 发送消息
            websocket.send(JSON.stringify(msg));
    
        });
    
    
    });

> 客户端的主要API就是 创建websocket、监听打开、关闭、发送信息、处理信息等方法。
> 
> `websocket = new WebSocket("ws://localhost:8080/SECIMS/websocket");`
> 
> 如果环境不支持websocket，则使用sockJS来模拟连接实现
> 
> `websocket = new SockJS("http://localhost:8080/SECIMS/sockjs/websocket");`

其中：SECIMS是工程名，而/websocket是环境支持，则请求的连接。而/sockjs/websocket，则是不支持websocket，使用sockJS模拟实现的连接。

--------------------

# 6、效果展现 #

用户A：   
![这里写图片描述][SouthEast 1]

用户B：   
![这里写图片描述][SouthEast 2]

WebSocket**技术学习 [https://www.itkc8.co][https_www.itkc8.co]m**

[Link 1]: http://blog.csdn.net/mybook201314/article/details/70173674
[https_www.itkc8.co]: https://www.itkc8.com/
[-websocket]: http://baike.baidu.com/item/WebSocket
[spring websocket]: https://docs.spring.io/spring/docs/current/spring-framework-reference/html/websocket.html
[SouthEast]: /images/20220606/89673550d9e04a79bce44435d315d722.png
[SouthEast 1]: /images/20220606/691f32dcf71140db808ca7905ded798d.png
[SouthEast 2]: /images/20220606/8d0c5278f16244b0bdd67d545ccf67d3.png

Spring+SpringMVC+WebSocket

发表评论取消回复

还没有评论，来说两句吧...

相关阅读