spring-webSocket

1基于springMVC的websocket

1.1.SSM（Spring+SpringMVC+MyBatis）框架集由Spring、MyBatis两个开源框架整合而成（SpringMVC是Spring中的部分内容）,由于使用基本的websocket并不能很好的与SSM整合在一起，而是分开来使用，而springMVC中恰好也有对websocket的封装，下面一起来看看，

1.2.需要引入的maven依赖

 <!-- https://mvnrepository.com/artifact/javax.servlet/javax.servlet-api -->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>3.1.0</version>
            <scope>provided</scope>
        </dependency>


        <!-- https://mvnrepository.com/artifact/org.springframework/spring-websocket -->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-websocket</artifactId>
            <version>5.1.1.RELEASE</version>
        </dependency>

        <!-- https://mvnrepository.com/artifact/org.springframework/spring-webmvc -->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-webmvc</artifactId>
            <version>5.1.1.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.9.7</version>
        </dependency>

1.3.dispatcher-servlet.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:websocket="http://www.springframework.org/schema/websocket"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xmlns:context="http://www.springframework.org/schema/context"
       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 http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd">

    <context:component-scan base-package="edu.nf.demo.controller"/>

    <mvc:annotation-driven/>

    <mvc:default-servlet-handler/>

    <!-- 配置WebSocket的handler -->
    <bean id="serverEndpoint" class="edu.nf.demo.websocket.ServerEndpointHandler"/>

    <!-- 配置websocket -->
    <websocket:handlers>
        <!-- path为websocket连接的url，handler引用我们自定义的ServerEndpoint -->
        <websocket:mapping path="/websocket" handler="serverEndpoint"/>
        <!-- 配置HttpSession握手拦截器-->
        <!-- 说明：这个握手拦截器会将HttpSession中的数据拷贝到
                  WebSocketSession的属性中，因此在WebSocket中
                  也能访问会话作用域的信息-->
        <websocket:handshake-interceptors>
            <bean class="org.springframework.web.socket.server.support.HttpSessionHandshakeInterceptor"/>
        </websocket:handshake-interceptors>
    </websocket:handlers>
</beans>

 

 1.4. web.xml 配置

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">
    
    <servlet>
        <servlet-name>dispatcher</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>classpath:dispatcher-servlet.xml</param-value>
        </init-param>
    </servlet>
    <servlet-mapping>
        <servlet-name>dispatcher</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>
    
</web-app>

 

 1.5.websocket服务端

public class ServerEndpointHandler extends TextWebSocketHandler {

    /**
     * 维护一个用户列表(key存放用户名，value存放每一个用户的WebSocketSession)
     */
    private static Map<String, WebSocketSession> users = new ConcurrentHashMap<>();

    /**
     * 客户端建立连接之后执行此方法(onOpen)
     * @param session 每当客户端连接后，容器会为其创建一个Session对象，
     *                这个对象在Spring中就是WebSocketSession
     * @throws Exception
     */
    @Override
    public void afterConnectionEstablished(WebSocketSession session) throws Exception {
        System.out.println("客户端建立了连接...");
        //获取用户名,getAttributes方法得到的是一个Map，
        //这个map里面存放了握手拦截器将HttpSession作用域拷贝过去的数据
        Users user = (Users)session.getAttributes().get("user");
        //将用户的session保存到用户列表中
        users.put(user.getUserName(), session);
    }

    /**
     * 每当客户端发送消息时执行此方法（onmessage）
     * @param session
     * @param message TextMessage对象表示接收客户端的文本消息对象,
     *                它的getPayload方法将获取具体消息内容
     * @throws Exception
     */
    @Override
    protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
        System.out.println("接收客户端消息..." + message.getPayload());
        //获取用户名
        Users sendUser = (Users)session.getAttributes().get("user");
        //群发消息
        for(String userName : users.keySet()){
            //重新构建一个TextMessage对象
            TextMessage newMessage = new TextMessage(sendUser.getUserName() + " : " + message.getPayload());
            //发送所有人
            users.get(userName).sendMessage(newMessage);
        }
    }

    /**
     * 哭护短关闭或断开连接时执行此方法（onclose）
     * @param session
     * @param status
     * @throws Exception
     */
    @Override
    public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
        System.out.println("客户端断开连接...");
        session.close();
    }

 

1.6.controller

@RestController
public class UserController {

    @PostMapping("/userLogin")
    public ResponseVO login(Users user, HttpSession session){
        //执行用户验证
        //代码省略.......
        //验证成功后将用户放入会话作用域
        session.setAttribute("user", user);
        ResponseVO vo = new ResponseVO();
        vo.setCode(HttpStatus.OK.value());
        vo.setData("index.html");
        return vo;
    }

 前端代码：

login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
 <form id="f1">
     Username:<input type="text" name="userName"/><br>
     Password:<input type="password" name="password"/><br>
     <input type="button" id="btn" value="login"/>
 </form>
<script>
    $(function () {
        $('#btn').on('click',function () {
            var params = $('#f1').serialize();
            $.ajax({
                url: 'userLogin',
                type: 'post',
                data: params,
                success: function (result) {
                    if(result.code == 200){
                        location.href = result.data;
                    }else{
                        alert(result.message);
                    }

                }
            });
        });
    })
</script>
</body>
</html>

chat.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
  <div id="content"></div>
  <input type="text" id="msg" name="msg"/>
  <input type="button" value="send"/>
<script>
    $(function () {
       var ws = new WebSocket('ws://localhost:8080/websocket');
       ws.onmessage = function (event) {
           $('#content').append(event.data + '<br>');
       }
       $(':button').on('click',function () {
           var msg = $('#msg').val();
           ws.send(msg);
       });

    })
</script>
</body>
</html>

 运行效果：