Spring Boot下使用WebSocket实现消息推送

最新推荐文章于 2025-09-10 11:07:46 发布

转载最新推荐文章于 2025-09-10 11:07:46 发布 · 79 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/pierrecai/blog/903158

文章标签：

#前端 #python #网络 #ViewUI

本文介绍了WebSocket协议的基础知识及其实现方式。包括前端如何利用HTML5和JavaScript进行WebSocket连接和交互，以及后端如何使用SpringBoot搭建WebSocket服务。文中还提供了具体的前端和后端代码示例。

2019独角兽企业重金招聘Python工程师标准>>>

WebSocket协议是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工(full-duplex)通信——允许服务器主动发送信息给客户端。

1、前端代码

WebSocket前端代码基于Html5实现，也有集成的js包（stomp.js等）。

可以用原生的js实现大致步骤如下:

创建WebSocket对象，创建的同时发起连接
使用WebSocket对象的各种回调方法
调用WebSocket对象的send方法发送信息
调用WebSocket对象的close方法关闭连接

具体代码如下：

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>My WebSocket</title>
</head>
<body>
    <input id="text" type="text" />
    <button onclick="send()">Send</button>
    <button onclick="closeWebSocket()">Close</button>
    <div id="message">
    </div>
</body>
<script type="text/javascript">
    var websocket = null;

    //判断当前浏览器是否支持WebSocket
    if('WebSocket' in window){
        //如果支持WebSocket，发起WebSocket连接
        websocket = new WebSocket("ws://localhost:8088/websocket");
    } else{
        alert('Not support websocket')
    }

    //连接发生错误的回调方法
    websocket.onerror = function(){
        setMessageInnerHTML("error");
    };

    //连接成功建立的回调方法
    websocket.onopen = function(event){
        setMessageInnerHTML("open");
    }

    //接收到消息的回调方法
    websocket.onmessage = function(event){
        setMessageInnerHTML(event.data);
    }

    //连接关闭的回调方法
    websocket.onclose = function(){
        setMessageInnerHTML("close");
    }

    //监听窗口关闭事件，当窗口关闭时，主动去关闭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);
    }
</script>
</html>

2、服务端代码

服务端基于Spring Boot实现。具体实现步骤如下：

首先需要配置WebSocket，如果最终是打包成jar包（即使用Spring Boot内置的Tomcat），直接注册使用Spring Boot内置的ServerEndpointExporter类

@Configuration
public class WebSocketConfig {
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }

}

使用@ServerEndpoint注解声明为WebSocket处理类
使用@OnOpen注解声明连接连通时调用的方法
使用@OnClose注解声明连接关闭时调用的方法
使用@OnMessage注解声明收到消息时调用的方法

//指定WebSocket连接的地址，和前端的new WebSocket(".../websocket")相对应
@ServerEndpoint(value = "/websocket")
@Component
//由于要保存会话，spring boot默认为单例，难以操作，声明为protoType避免错误
@Scope("Prototype")
public class MyWebSocket {
    //静态变量，用来记录当前在线连接数。应该把它设计成线程安全的。
    private static int onlineCount = 0;

    //concurrent包的线程安全Set，用来存放每个客户端对应的MyWebSocket对象，用于群发消息
    private static CopyOnWriteArraySet<MyWebSocket> webSocketSet = new CopyOnWriteArraySet<>();

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


    /**
     * 连接建立成功调用的方法*/
    @OnOpen
    public void onOpen(Session session) {
        this.session = session;
        webSocketSet.add(this);     //加入set中
        addOnlineCount();           //在线数加1
        System.out.println("有新连接加入！当前在线人数为" + getOnlineCount());
    }

    /**
     * 连接关闭调用的方法
     */
    @OnClose
    public void onClose() {
        webSocketSet.remove(this);  //从set中删除
        subOnlineCount();           //在线数减1
        System.out.println("有一连接关闭！当前在线人数为" + getOnlineCount());
    }

    /**
     * 收到客户端消息后调用的方法
     * 客户端发送过来的消息
     * @param message
     * */
    @OnMessage
    public void onMessage(String message, Session session) {
        System.out.println("来自客户端的消息:" + message);
    }


    /**
     * 发生异常时调用
     * @param session
     * @param error
     */
     @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);
     }


     /**
      * 用于群发自定义消息
      * */
    public static void sendInfo(String message) throws IOException {
        for (MyWebSocket item : webSocketSet) {
            try {
                item.sendMessage(message);
            } catch (IOException e) {
                continue;
            }
        }
    }

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

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

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

转载于:https://my.oschina.net/pierrecai/blog/903158