Spring-WebSocket

WebSocket

Sockjs

Stoup (消息订阅发布)

添加依赖

<!-- 添加依赖 -->
    <dependencies>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>${servlet.version}</version>
            <scope>provided</scope>
        </dependency>
        <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>
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>${jackson.version}</version>
        </dependency>
    </dependencies>

全局类

UserController

package edu.nf.ws.controller;

import edu.nf.ws.controller.vo.ResponseVO;
import edu.nf.ws.entity.Users;
import org.springframework.http.HttpStatus;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.HttpSession;

/**
 * @Author Eric
 * @Date 2018/12/6
 */
@RestController
public class UserController {
    @PostMapping("/userLogin")
    public ResponseVO login(Users user, HttpSession session){
        //验证用户
        //....
        //验证成功后将用户放进会话作用域
        session.setAttribute("user",user);
        ResponseVO responseVO = new ResponseVO();
        responseVO.setCode(HttpStatus.OK.value());
        responseVO.setData("index.html");
        return responseVO;
    }
}
ServerEndpointHandler
package edu.nf.ws.websocket;

import edu.nf.ws.entity.Users;
import org.springframework.web.socket.CloseStatus;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.TextWebSocketHandler;

import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;

/**
 * @Author Eric
 * @Date 2018/12/6
 * websocket服务端
 */
public class ServerEndpointHandler extends TextWebSocketHandler {
    /**
     * 维护一个用户列表（key存放用户名，value存放每个用户的WebSocketSession）
     */
    private static Map<String, WebSocketSession> users = new ConcurrentHashMap<>();

    /**
     * 客户端建立连接之后执行此方法（onOpen）
     * @param session 每当客户端连接后，容器会为其创建一个Session对象，
     *                  这个对象在Spring中就是WebSpcketSession
     * @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);
        //获取用户名
        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();
    }
}

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>发送内容</title>
</head>
<body>
    <div align="center">
        <div class="content-padded" >
            <div id="content"></div>
        </div>
        <div class="item-input">
            <input type="text" id="msg" placeholder="输入内容..">
        </div>
        <div class="col-100">
            <p><a class="button" id="btn" style="200px">send</a></p>
        </div>
    </div>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
<script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
</body>
<script>
    $(function () {
        var ws = new WebSocket('ws://localhost:8080/websocket');
        ws.onmessage = function (event) {
            $('#content').append(event.data + '<br>');
        }
        $('#btn').on('click',function () {
            var msg = $('#msg').val();
            //发送信息
            ws.send(msg);
        });
    });
</script>
</html>

login.html

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
<script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<head>
    <a class="button button-link button-nav pull-left" href="/demos/card" data-transition='slide-out'>
        <span class="icon icon-left"></span>
        返回
    </a>
    <h1 class="title">我的App</h1>
</head>
<body>
<nav class="bar bar-tab">
    <a class="tab-item active" href="#">
        <span class="icon icon-home"></span>
        <span class="tab-label">首页</span>
    </a>
    <a class="tab-item" href="#">
        <span class="icon icon-me"></span>
        <span class="tab-label">我</span>
    </a>
    <a class="tab-item" href="#">
        <span class="icon icon-star"></span>
        <span class="tab-label">收藏</span>
    </a>
    <a class="tab-item" href="#">
        <span class="icon icon-settings"></span>
        <span class="tab-label">设置</span>
    </a>
</nav>
<div class="content">
    <div class="list-block">
        <form id="f1">
            <ul>
                <!-- Text inputs -->
                <li>
                    <div class="item-content">
                        <div class="item-inner">
                            <div class="item-title label">Name</div>
                            <div class="item-input">
                                <input type="text" name="userName" placeholder="Your name">
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="item-content">
                        <div class="item-inner">
                            <div class="item-title label">Password</div>
                            <div class="item-input">
                                <input type="password" name="password" placeholder="password">
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </form>
    </div>
    <div class="content-block">
        <div class="row">
            <div class="col-50"><a href="#" class="button button-big button-fill button-danger">取消</a></div>
            <div class="col-50"><a href="#" id="btn" class="button button-big button-fill button-success">注册</a></div>
        </div>
    </div>
</div>
</body>
<script>
    $(function(){
        $("#btn").on("click",function(){
            $.ajax({
                type:"post",
                url:"userLogin",
                data:$("#f1").serialize(),
                success:function(result){
                    if(result.code==200){
                        location.href=result.data;
                    }else {
                        alert(result.mesage);
                    }
                }
            });
        });
    });
</script>
</html>

配置web.xml和dispatcher-servlet.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>
<?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:context="http://www.springframework.org/schema/context"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       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/context http://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd http://www.springframework.org/schema/websocket http://www.springframework.org/schema/websocket/spring-websocket.xsd">
    <context:component-scan base-package="edu.nf.ws"/>
    <mvc:annotation-driven/>
    <mvc:default-servlet-handler/>
    <!--配置WebSocket的handler-->
    <bean id="serverEndpoint" class="edu.nf.ws.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>
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/ssjf/p/10077252.html