Springboot2使用websocket

简述

该websocket支持单用户多处建立链接，支持点对点发送消息，群发

Maven配置

<dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>
        </dependency>
        <!-- thymeleaf模板引擎 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
        <groupId>cn.hutool</groupId>
        <artifactId>hutool-all</artifactId>
        <version>4.3.1</version>
    </dependency>

WebSocketConfig.java

@Configuration
public class WebSocketConfig {

    /**
     *注入ServerEndpointExporter，
     *这个bean会自动注册使用了@ServerEndpoint注解声明的Websocket endpoint
     * @return
     */
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }
}

WebSocket.java

@ServerEndpoint("/websocket/{username}")
@Component
public class WebSocket {

    //静态变量，用来记录当前在线连接数。应该把它设计成线程安全的。
    private static int onlineCount = 0;

    //根据名字存储websocket对象CopyOnWriteArraySet线程安全set，ConcurrentHashMap线程安全map
    public static Map<String, CopyOnWriteArraySet<WebSocket>> webSocketMap = new ConcurrentHashMap<>();

    //与某个客户端的连接会话，需要通过它来给客户端发送数据
    private Session session;

    /**
     * 用户名称
     */
    private String username;

    /**
     * 连接建立成功调用的方法
     */
    @OnOpen
    public void onOpen(@PathParam("username") String username, Session session) {
        this.username = username;
        this.session = session;
        //将用户添加到websocket，支持单用户多出链接
        if (webSocketMap.containsKey(username)) {
            webSocketMap.get(username).add(this);
        } else {
            CopyOnWriteArraySet websocketSet = new CopyOnWriteArraySet();
            websocketSet.add(this);
            webSocketMap.put(username, websocketSet);
            addOnlineCount();           //在线数加1
            System.out.println("有新连接加入！当前在线人数为" + getOnlineCount());
        }
        Map<String, Object> messageMap = new ConcurrentHashMap<>();
        messageMap.put("type", 0);
        messageMap.put("message", username + "加入！当前在线人数为" + getOnlineCount());
        messageMap.put("users", webSocketMap.keySet());
        sendMessageAll(JSONUtil.toJsonStr(messageMap));
    }

    /**
     * 连接关闭调用的方法
     */
    @OnClose
    public void onClose() {
        if (StringUtils.isNotEmpty(this.username)) {
            webSocketMap.get(username).remove(this);//删除链接
            if(webSocketMap.get(username).size()==0){
                webSocketMap.remove(username);
                subOnlineCount(); //在线数减1
                System.out.println("有一连接关闭！当前在线人数为" + getOnlineCount());
                //刷新用户列表
                Map<String, Object> messageMap = new ConcurrentHashMap<>();
                messageMap.put("type", 0);
                messageMap.put("message", username + "退出！当前在线人数为" + getOnlineCount());
                messageMap.put("users", webSocketMap.keySet());
                sendMessageAll(JSONUtil.toJsonStr(messageMap));
            }
        }
    }

    /**
     * 收到客户端消息后调用的方法
     *
     * @param message 客户端发送过来的消息
     */
    @OnMessage
    public void onMessage(String message, Session session) {
        System.out.println("来自客户端的消息:" + message);
        //群发消息
        JSONObject messageJson = JSONUtil.parseObj(message);
        Object toUser = messageJson.get("to");//接收对象
        if ("All".equals(toUser)) {
            sendMessageAll(message);
        } else {
            sendMessageOne(message, toUser + "");
        }
    }

    /**
     * 发生错误时调用
     */
    @OnError
    public void onError(Session session, Throwable error) {
        System.out.println("发生错误");
        error.printStackTrace();
    }

    /**
     * 发送消息
     *
     * @param message
     * @throws IOException
     */
    public void sendMessage(String message) throws IOException {
        //this.session.getBasicRemote().sendText(message);//同步
        this.session.getAsyncRemote().sendText(message);//異步
    }

    /**
     * 发送消息给指定用户
     *
     * @param message
     * @param toUserName
     */
    public void sendMessageOne(String message, String toUserName) {
        for (String key : webSocketMap.keySet()) {
            if (key.equals(toUserName)) {
                for (WebSocket websocket : webSocketMap.get(toUserName)) {
                    websocket.session.getAsyncRemote().sendText(message);
                }
                break;
            }
        }
    }

    /**
     * 发送消息给所有用户
     *
     * @param message
     * @throws IOException
     */
    public void sendMessageAll(String message) {
        for (String key : webSocketMap.keySet()) {
            for (WebSocket websocket : webSocketMap.get(key)) {
                websocket.session.getAsyncRemote().sendText(message);
            }
        }
    }

    public static synchronized int getOnlineCount() {
        return onlineCount;
    }

    public static synchronized void addOnlineCount() {
        WebSocket.onlineCount++;
    }

    public static synchronized void subOnlineCount() {
        WebSocket.onlineCount--;
    }
}

IndexController.java

@Controller
public class IndexController {

    @GetMapping("/websocket/{username}")
    public String  websocket(@PathVariable String username, HttpServletRequest request){
        request.setAttribute("username",username);
        return "websocket";
    }
}

application.yml

server:
  port: 8084

spring:
  resources:
    static-locations: classpath:/static/
  thymeleaf:
    prefix: classpath:/templates/
    suffix: .html
    cache: false

websocket.html

<!DOCTYPE html>
<html>
<head>
    <title>websocket</title>
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
    <script src="http://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>
    <script src="https://cdn.bootcss.com/sockjs-client/1.1.4/sockjs.min.js"></script>
</head>

<body>
<div style="margin: auto;text-align: center">
    <h1>Welcome to websocket</h1>
</div>
<br/>
<div style="margin: auto;text-align: center">
    <select id="onLineUser">
        <option>--所有--</option>
    </select>
    <input id="text" type="text"/>
    <button onclick="send()">发送消息</button>
</div>
<br>
<div style="margin-right: 10px;text-align: right">
    <button onclick="closeWebSocket()">关闭连接</button>
</div>
<hr/>
<div id="message" style="text-align: center;"></div>
<input type="text" th:value="${username}" id="username" style="display: none"/>
</body>


<script type="text/javascript">
    var webSocket;
    if ("WebSocket" in window) {
        webSocket = new WebSocket("ws://localhost:8084/websocket/" + document.getElementById('username').value);

        //连通之后的回调事件
        webSocket.onopen = function () {
            console.log("已经连通了websocket");
            setMessageInnerHTML("已经连通了websocket");
        };

        //接收后台服务端的消息
        webSocket.onmessage = function (evt) {
            var data = JSON.parse(evt.data);
            if(data.type == 0){//存在人员加入，刷新大家的人员列表
                setMessageInnerHTML(data.message);
                var users = data.users;
                var options = '<option>--所有--</option>';
                $(users).each(function(index,value){
                    options += '<option>'+value+'</option>';
                });
                $("#onLineUser").html(options);
            }else if(data.type == 1){//发送消息显示
                setMessageInnerHTML(data.username + "对" + data.to + "说：" + data.message);
            }
        };

        //连接关闭的回调事件
        webSocket.onclose = function () {
            console.log("连接已关闭...");
            setMessageInnerHTML("连接已经关闭....");
        };
    } else {
        // 浏览器不支持 WebSocket
        alert("您的浏览器不支持 WebSocket!");
    }

    //将消息显示在网页上
    function setMessageInnerHTML(innerHTML) {
        document.getElementById('message').innerHTML += innerHTML + '<br/>';
    }

    function closeWebSocket() {
        //直接关闭websocket的连接
        webSocket.close();
    }

    function send() {
        var selectText = $("#onLineUser").find("option:selected").text();
        if (selectText == "--所有--") {
            selectText = "All";
        }else{
            setMessageInnerHTML(document.getElementById('username').value + "对" + selectText + "说：" + document.getElementById('text').value);
        }
        var message = {
            "message": document.getElementById('text').value,
            "username": document.getElementById('username').value,
            "to": selectText,
            "type":1
        };
        webSocket.send(JSON.stringify(message));
        $("#text").val("");
    }
</script>

</html>