登录 注册

springboot 整合 websocket 技术

本贴最后更新于 2109 天前，其中的信息可能已经沧海桑田

什么是 Webscoket

简单来说就是一个基于 TCP 的持久化的网络通信协议。主要作用就是：服务端可以主动推送信息给客户端，不需要客户端重复的向服务端发请求查询。

具体详细说明：https://www.zhihu.com/question/20215561 （PS：写的是真的简单易懂）

springboot 整合 Webscoket

实现 websocket 有多种方式：最简单的 H5， sockjs 以及使用 STOMP 协议

开发环境

  1. JDK 版本 1.8
  2. springboot 版本 2.1.0
  3. 开发工具：IDEA MVAEN

基于 H5 的 websocket 实现

第一步 引入依赖

在 springboot2.0 版本之后，官方添加了 Webscoket 的依赖，因此只需要在 pom 当中引入

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

第二步 配置 WebSocket

/**
 * @Auther: HJLJY
 * @Date: 2019/1/25 0025 16:45
 * @Description:  websocket客户端配置类
 *
 * @EnableWebSocket   表示该类支持websocket
 * @EnableWebSocketMessageBroker   websocket使用STOMP协议进行消息的传递  还需要进行额外的配置不然会报错
 */
@Configuration
@EnableWebSocket
public class WebSocketConfig {
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }
}

第三步 设置服务端地址

/**
 * @Auther: HJLJY
 * @Date: 2019/1/25 0025 16:56
 * @Description:
 * @ServerEndpoint 用于配置websocket的地址    ws：//127.0.0.1:8080/websocket
 */
@ServerEndpoint(value = "/websocket")
@Component
public class WebSocketServer {
    //TODO 这里根据实际业务进行代码的书写

    //concurrent包的线程安全Set，每个客户端的websocket连接会创建一个WebSocketServer对象。
    private static CopyOnWriteArraySet<WebSocketServer> webSocketSet = new CopyOnWriteArraySet<>();

    //这个session是每个websocket与某个客户端的连接会话，通过它与客户端进行数据交互。
    private Session session;

    /**
     * websocket连接建立成功调用的方法
     */
    @OnOpen
    public void onOpen(Session session) {
        this.session = session;
        webSocketSet.add(this);     //加入set中
        System.out.println("有新连接加入！sessionID为：" + session.getId());
        try {
            sendMessage("恭喜 连接websocket服务端成功");
        } catch (IOException e) {
            System.out.println("IO异常");
        }
    }

    /**
     * 关闭websocket连接调用的方法
     */
    @OnClose
    public void onClose() {
        webSocketSet.remove(this);  //从set中删除
        System.out.println("有一连接关闭！sessionID为：" + session.getId());
    }

    /**
     * 收到客户端消息后调用的方法
     *
     * @param message 客户端发送过来的消息
     */
    @OnMessage
    public void onMessage(String message) {
        System.out.println("来自客户端的消息:" + message);
        //将接受到的消息群发给所有websocket连接。这里也可以根据实际需求修改代码，将接受到的信息发送给某个指定的websocket连接。
        for (WebSocketServer item : webSocketSet) {
            try {
                item.sendMessage(message);
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }

    /**
     * 发生错误时调用
     */
    @OnError
    public void onError(Session session, Throwable error) {
        System.out.println("发生错误");
        error.printStackTrace();
    }
    
    public void sendMessage(String message) throws IOException {
        this.session.getBasicRemote().sendText(message);  //这两个方法是同步和异步的关系
        //this.session.getAsyncRemote().sendText(message);
    }
}

第四步 客户端实现

客户端的常见 api
onopen : 用于建立连接成功后的回调
onclose : 用于关闭连接后的回调
onmessage ：用于接受到消息后的回调
send() ：用于发送消息
具体详细说明：http://www.ruanyifeng.com/blog/2017/05/websocket.html
HTML 具体代码：

<!DOCTYPE HTML>
<html>
<head>
    <title>测试websocket</title>
</head>

<body>
TEST websocket<br/>
<input id="text" type="text"/>
<button onclick="send()">Send</button>

<button onclick="closeWebSocket()">Close</button>
<div id="message">
</div>
</body>

<script type="text/javascript">
    //这一步就是向后台建立连接    协议开头不是HTTP 而是ws或者wss
    var websocket = new WebSocket("ws://localhost:8080/websocket");

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

    //发送消息
    function send() {
        var message = document.getElementById('text').value;
        websocket.send(message);
    }

    //连接发生错误的回调方法
    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/>';
    }


</script>
</html>

最后启动 springboot 项目进入到刚才的 html 界面（开启两个浏览器同时进入进行测试）查看效果就可以了。

参考资料

简单实现：https://www.cnblogs.com/bianzy/p/5822426.html
使用 spring boot +WebSocket 实现（后台主动）消息推送：https://blog.csdn.net/zhangdehua678/article/details/78913839/
基于 STOMP 协议：https://www.jianshu.com/p/19cec6fbf422

  • B3log

    B3log 是一个开源组织，名字来源于“Bulletin Board Blog”缩写，目标是将独立博客与论坛结合，形成一种新的网络社区体验，详细请看 B3log 构思。目前 B3log 已经开源了多款产品：Sym、Solo、Vditor 和 思源笔记。

    1063 引用 • 3453 回帖 • 201 关注
  • WebSocket

    WebSocket 是 HTML5 中定义的一种新协议，它实现了浏览器与服务器之间的全双工通信（full-duplex）。

    48 引用 • 206 回帖 • 347 关注
  • Spring

    Spring 是一个开源框架，是于 2003 年兴起的一个轻量级的 Java 开发框架，由 Rod Johnson 在其著作《Expert One-On-One J2EE Development and Design》中阐述的部分理念和原型衍生而来。它是为了解决企业应用开发的复杂性而创建的。框架的主要优势之一就是其分层架构，分层架构允许使用者选择使用哪一个组件，同时为 JavaEE 应用程序开发提供集成的框架。

    942 引用 • 1459 回帖 • 31 关注
1.9k 50 896 132 116 43 63 615

相关帖子

回帖
springboot 整合 websocket 技术

欢迎来到这里！

我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。

注册 关于
请输入回帖内容 ...
FILWLL
回帖
0
 帖子
4
 积分
505