SpringBoot整合Websocket

标签：WebSocket SpringBoot Websocket 整合 import websocket message 连接 客户端

1. 什么是WebSocket

1. HTTP 协议是一种无状态的、无连接的、单向的应用层协议。它采用了请求/响应模型。通信请求只能由客户端发起，服务端对请求做出应答处理，HTTP 协议无法实现服务器主动向客户端发起消息。

2. WebSocket是一种在单个TCP连接上进行全双工通信的协议。

3. WebSocket通信协议于2011年被IETF定为标准RFC 6455，并由RFC7936补充规范，WebSocket API也被W3C定为标准。

4. WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。

5. 在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

2. WebSocket的特点

1. 较少的控制开销。在连接创建后，服务器和客户端之间交换数据时，用于协议控制的数据包头部相对较小。在不包含扩展的情况下，对于服务器到客户端的内容，此头部大小只有2至10字节（和数据包长度有关）；对于客户端到服务器的内容，此头部还需要加

上额外的4字节的掩码。相对于HTTP请求每次都要携带完整的头部，此项开销显著减少了。

2. 更强的实时性。由于协议是全双工的，所以服务器可以随时主动给客户端下发数据。相对于HTTP请求需要等待客户端发起请求服务端才能响应，延迟明显更少；即使是和Comet等类似的长轮询比较，其也能在短时间内更多次地传递数据。

3. 保持连接状态。与HTTP不同的是，Websocket需要先创建连接，这就使得其成为一种有状态的协议，之后通信时可以省略部分状态信息。而HTTP请求可能需要在每个请求都携带状态信息（如身份认证等）。

4. 更好的二进制支持。Websocket定义了二进制帧，相对HTTP，可以更轻松地处理二进制内容。

5. 可以支持扩展。Websocket定义了扩展，用户可以扩展协议、实现部分自定义的子协议。如部分浏览器支持压缩等。

6. 更好的压缩效果。相对于HTTP压缩，Websocket在适当的扩展支持下，可以沿用之前内容的上下文，在传递类似的数据时，可以显著地提高压缩率。

3. 为什么需要WebSocket?

因为一般的请求都是HTTP请求（单向通信），HTTP是一个短连接（非持久化），且通信只能由客户端发起，HTTP协议做不到服务器主动向客户端推送消息。举个例子：前后端交互就是前端发送请求，从后端拿到数据后展示到页面，如果前端没有主动请求接

口，那后端就不能发送数据给前端。然而，WebSocket确能很好的解决这个问题，服务端可以主动向客户端推送消息，客户端也可以主动向服务端发送消息，实现了服务端和客户端真正的平等。

4. 创建Springboot项目

4.1 选择Spring Initializr(springboot项目)

4.2 配置属性，完成点击next

4.3 选择依赖，也可以不选择，稍后在pom文件里添加

4.4 项目启动类

5. WebSocket使用

5.1 Pom文件添加依赖

<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>

    <!-- WebSocket -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-websocket</artifactId>
    </dependency>

    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-test</artifactId>
        <scope>test</scope>
    </dependency>
</dependencies>

5.2 application.propreties添加服务端口配置

server.port=8060

5.3 编写WebSocket的配置类

package com.liyh.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;

/**
 * 开启WebSocket支持
 */
@Configuration
public class WebSocketConfig {

    /**
     * 这个bean的注册,用于扫描带有@ServerEndpoint的注解成为websocket,如果你使用外置的tomcat就不需要该配置文件
     */
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }
}

5.4 编写WebSocket的服务类

package com.liyh.server;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Component;

import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.concurrent.ConcurrentHashMap;
import java.util.concurrent.CopyOnWriteArraySet;

/**
 * WebSocket操作类
 */
@Component
@ServerEndpoint("/websocket/{userId}")
public class WebSocketSever {

    private static final Logger logger = LoggerFactory.getLogger(WebSocketSever.class);

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

    // session集合,存放对应的session
    private static ConcurrentHashMap<Integer, Session> sessionPool = new ConcurrentHashMap<>();

    // concurrent包的线程安全Set,用来存放每个客户端对应的WebSocket对象。
    private static CopyOnWriteArraySet<WebSocketSever> webSocketSet = new CopyOnWriteArraySet<>();

    /**
     * 建立WebSocket连接
     *
     * @param session
     * @param userId  用户ID
     */
    @OnOpen
    public void onOpen(Session session, @PathParam(value = "userId") Integer userId) {
        logger.info("WebSocket建立连接中,连接用户ID：{}", userId);
        try {
            Session historySession = sessionPool.get(userId);
            // historySession不为空,说明已经有人登陆账号,应该删除登陆的WebSocket对象
            if (historySession != null) {
                webSocketSet.remove(historySession);
                historySession.close();
            }
        } catch (IOException e) {
            logger.error("重复登录异常,错误信息：" + e.getMessage(), e);
        }
        // 建立连接
        this.session = session;
        webSocketSet.add(this);
        sessionPool.put(userId, session);
        logger.info("建立连接完成,当前在线人数为：{}", webSocketSet.size());
    }

    /**
     * 发生错误
     *
     * @param throwable e
     */
    @OnError
    public void one rror(Throwable throwable) {
        throwable.printStackTrace();
    }

    /**
     * 连接关闭
     */
    @OnClose
    public void onClose() {
        webSocketSet.remove(this);
        logger.info("连接断开,当前在线人数为：{}", webSocketSet.size());
    }

    /**
     * 接收客户端消息
     *
     * @param message 接收的消息
     */
    @OnMessage
    public void onMessage(String message) {
        logger.info("收到客户端发来的消息：{}", message);
        // 测试给用户发消息，具体使用修改
        sendMessageByUser(1, "你也好");
    }

    /**
     * 推送消息到指定用户
     *
     * @param userId  用户ID
     * @param message 发送的消息
     */
    public static void sendMessageByUser(Integer userId, String message) {
        logger.info("用户ID：" + userId + ",推送内容：" + message);
        Session session = sessionPool.get(userId);
        try {
            session.getBasicRemote().sendText(message);
        } catch (IOException e) {
            logger.error("推送消息到指定用户发生错误：" + e.getMessage(), e);
        }
    }

    /**
     * 群发消息
     *
     * @param message 发送的消息
     */
    public static void sendAllMessage(String message) {
        logger.info("发送消息：{}", message);
        for (WebSocketSever webSocket : webSocketSet) {
            try {
                // 同步
                webSocket.session.getBasicRemote().sendText(message);
                // 异步
//                webSocket.session.getAsyncRemote().sendText(message);
            } catch (IOException e) {
                logger.error("群发消息发生错误：" + e.getMessage(), e);
            }
        }
    }

}

5.5 编写TestController

package com.liyh.controller;

import com.liyh.server.WebSocketSever;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.io.IOException;

@RestController
@RequestMapping("/websocket")
public class TestController {

    /**
     * 推送消息
     *
     * @param id
     * @param message
     * @throws IOException
     */
    @GetMapping("/getMessage")
    public void getMessage(int id, String message) {
        WebSocketSever.sendMessageByUser(id, message);
    }
}

5.6 编写客户端websocket.html(放到static目录下)

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>WebSocket测试页面</title>
</head>
<body>
<button onclick="conectWebSocket()">连接WebSocket</button>
<button onclick="closeWebSocket()">断开连接</button>
<hr/>
<br/>
消息：<input id="text" type="text"/>
<button onclick="send()">发送消息</button>
<div id="message"></div>
</body>
<script type="text/javascript">
    var websocket = null;

    function conectWebSocket() {
        // 判断当前浏览器是否支持WebSocket
        if ('WebSocket' in window) {
            websocket = new WebSocket("ws://localhost:8050/websocket/1");
        } else {
            alert('Not support websocket')
        }
        // 连接发生错误的回调方法
        websocket.onerror = function () {
            setMessageInnerHTML("error");
        };
        // 连接成功建立的回调方法
        websocket.onopen = function (event) {
            setMessageInnerHTML("收到消息: 成功建立连接");
        }
        // 接收到消息的回调方法
        websocket.onmessage = function (event) {
            setMessageInnerHTML("收到消息:" + event.data);
        }
        // 连接关闭的回调方法
        websocket.onclose = function () {
            setMessageInnerHTML("收到消息:关闭连接");
        }
        // 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
        window.onbeforeunload = function () {
            websocket.close();
        }
    }

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

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

    // 发送消息
    function send() {
        var message = document.getElementById('text').value;
        websocket.send(message);
        setMessageInnerHTML("发送消息:" + message);
    }
</script>
<!--样式-->
<style>
    #message {
        margin-top: 40px;
        border: 1px solid gray;
        padding: 20px;
    }
</style>
</html>

6. 启动项目测试

6.1 客户端发送消息给服务端

1. 启动项目，浏览器访问页面

http://localhost:8060/websocket.html

2. 点击【连接WebSocket】,然后就可以发送消息了

6.2 服务端发送消息给客户端

 1. 调用推送消息接口

http://localhost:8060/websocket/getMessage?id=1&message=这是服务器发你的的消息

2. 页面收到推送消息

3. 日志记录

7. 完整项目地址（Gitee）

 

标签：WebSocket,SpringBoot,Websocket,整合,import,websocket,message,连接,客户端
From： https://www.cnblogs.com/liyhbk/p/16730631.html