SpringBoot整合websocket实现群聊

实现思路

发送者向服务器发送大家早上好。其它客户端可以收到对应消息。

项目展示

通过springboot引入websocket，实现群聊，通过在线websocket测试进行展示。

核心代码

pom引入jar

<parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.3.10.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <properties>
        <java.version>1.8</java.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.apache.commons</groupId>
            <artifactId>commons-lang3</artifactId>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.18.12</version>
        </dependency>
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.62</version>
        </dependency>
    </dependencies>

使用springboot 2.3.10.RELEASE版本；java8

<parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>2.7.14</version>
    <relativePath/> <!-- lookup parent from repository -->
</parent>
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>

<dependency>
    <groupId>org.apache.commons</groupId>
    <artifactId>commons-lang3</artifactId>
</dependency>

<dependency>
    <groupId>org.projectlombok</groupId>
    <artifactId>lombok</artifactId>
    <version>1.18.12</version>
</dependency>

<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>fastjson</artifactId>
    <version>1.2.62</version>
</dependency>

<dependency>
    <groupId>mysql</groupId>
    <artifactId>mysql-connector-java</artifactId>
    <version>8.0.22</version>
</dependency>

<!-- mybatis ORM 架包 -->
<dependency>
    <groupId>org.mybatis.spring.boot</groupId>
    <artifactId>mybatis-spring-boot-starter</artifactId>
    <version>2.2.2</version>
</dependency>
<!-- thymeleaf架包 -->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

<dependency>
    <groupId>org.projectlombok</groupId>
    <artifactId>lombok</artifactId>
</dependency>

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>
<build>
    <plugins>
        <plugin>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-compiler-plugin</artifactId>
            <version>3.8.1</version>
            <configuration>
                <source>1.8</source>
                <target>1.8</target>
                <encoding>UTF-8</encoding>
            </configuration>
        </plugin>

    </plugins>
</build>

WebSocketConfig配置类

package com.cloud.config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;
/**
 * WebSocke配置类
 * 当以jar包形式运行时需要配置该bean，暴露我们配置的@ServerEndpoint；
 * 当我们以war独立tomcat运行时不能配置该bean。
 */
@Configuration
public class WebSocketConfig {
    @Bean
    public ServerEndpointExporter serverEndpointExporter (){
        return new ServerEndpointExporter();
    }
}

websocket有4个注解，解释如下

1、@OnOpen 有新连接

2、@OnMessage 有新消息时

3、@OnClose 关闭连接

4、@OnError 连接异常

对于这个4个注解，配置在方法上即可。

WebsocketServerEndpoint接收类

package com.cloud.utils;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Controller;
import javax.websocket.*;
import javax.websocket.server.ServerEndpoint;
@Slf4j
@Controller
@ServerEndpoint("/ws/asset")
public class WebsocketServerEndpoint {
    /**
     * websocket有4个注解，解释如下
     * @OnOpen 有新连接
     * @OnMessage 有新消息时
     * @OnClose 关闭连接
     * @OnError 连接异常
     * 对于这个4个注解，配置在方法上即可。
     * @param session
     * @param config
     */
    @OnOpen
    public void onOpen(Session session, EndpointConfig config) {
        log.info("[onOpen][session({}) 接入]", session);
        WebSocketUtil.broadcast (session.getId ()+"上线了");
        WebSocketUtil.addSession (session);
    }
    @OnMessage
    public void onMessage(Session session, String message) {
        WebSocketUtil.broadcast (message);
        log.info("[onOpen][session({}) 接收到一条消息({})]", session, message);
          //生产环境下，请设置成 debug 级别
    }
    @OnClose
    public void onClose(Session session, CloseReason closeReason) {
        WebSocketUtil.removeSession (session);
        WebSocketUtil.broadcast (session.getId ()+"下线了");
        log.info("[onClose][session({}) 连接关闭。关闭原因是({})}]", session, closeReason);
    }
    @OnError
    public void onError(Session session, Throwable throwable) {
        log.info("[onClose][session({}) 发生异常]", session, throwable);
    }
}

WebSocketUtil工具类

package com.cloud.utils;
import com.alibaba.fastjson.JSONObject;
import com.mysql.cj.protocol.Message;
import lombok.extern.slf4j.Slf4j;
import javax.websocket.RemoteEndpoint;
import javax.websocket.Session;
import java.io.IOException;
import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;

@Slf4j
public class WebSocketUtil {
    // ========== 会话相关 ==========
    /**
     * Session 与用户的映射
     */
    private static final Map<String, Session> SESSION_USER_MAP = new ConcurrentHashMap<>();
    /**
     * 添加 Session 。在这个方法中，会添加用户和 Session 之间的映射
     *
     * @param session Session
     */
    public static void addSession(Session session) {
        // 更新 SESSION_USER_MAP
        SESSION_USER_MAP.put(session.getId(),session);
    }

    /**
     * 移除 Session 。
     * @param session Session
     */
    public static void removeSession(Session session) {
        // 从 SESSION_USER_MAP 中移除
        SESSION_USER_MAP.remove(session.getId());
    }
    // ========== 消息相关 ==========
    /**
     * 广播发送消息给所有在线用户
     *
     * @param message 消息体
     * @param <T> 消息类型
     */
    public static <T extends Message> void broadcast(String message) {
        // 创建消息
        // String messageText = buildTextMessage(type,message);
        // 遍历SESSION_USER_MAP ，进行逐个发送
        for (String sessionId : SESSION_USER_MAP.keySet()) {
            sendTextMessage(SESSION_USER_MAP.get (sessionId),message);
        }
    }

    /**
     * 发送消息给单个用户的 Session
     *
     * @param session Session
     * @param type 消息类型
     * @param message 消息体
     * @param <T> 消息类型
     */
    public static <T extends Message> void send(Session session, String type, T message) {
        // 创建消息
        String messageText = buildTextMessage(type, message);
        // 遍历给单个 Session ，进行逐个发送
        sendTextMessage(session, messageText);
    }
    /**
     * 构建完整的消息
     * @param type 消息类型
     * @param message 消息体
     * @param <T> 消息类型
     * @return 消息
     */
    private static <T extends Message> String buildTextMessage(String type,T message) {
        JSONObject messageObject = new JSONObject();
        messageObject.put("type", type);
        messageObject.put("body", message);
        return messageObject.toString();
    }

    /**
     * 真正发送消息
     * @param session Session
     * @param messageText 消息
     */
    private static void sendTextMessage(Session session, String messageText) {
        if (session == null) {
            log.error("[sendTextMessage][session 为 null]");
            return;
        }
        RemoteEndpoint.Basic basic = session.getBasicRemote();
        if (basic == null) {
            log.error("[sendTextMessage][session 的  为 null]");
            return;
        }
        try {
            basic.sendText(messageText);
        } catch (IOException e) {
            log.error("[sendTextMessage][session({}) 发送消息{}) 发生异常",
                    session, messageText, e);
        }
    }
}

在线websocket调试输入ws://localhost:9998/ws/asset即可。

server:
  port: 9998
spring:
  datasource:
    url: jdbc:mysql://localhost:3306/flowable?useSSL=false&characterEncoding=UTF-8&serverTimezone=GMT%2B8
    driver-class-name: com.mysql.cj.jdbc.Driver
    username: root
    password: root
#开启调试信息
logging:
  level:
    org:
      flowable: DEBUG
#业务流程涉及的表自动生成
flowable:
  database-schema-update: true
  async-executor-activate: false

前端页面

<html>
<head>
    <meta charset="UTF-8">
    <title>websocket测试</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <style type="text/css">
        h3,h4{
            text-align:center;
        }
    </style>
</head>
<body>
<h3>WebSocket测试，客户端接收到的消息如下：</h3>
<textarea id = "messageId" readonly="readonly" cols="150" rows="30" ></textarea>
<script type="text/javascript">
    var socket;
    if (typeof (WebSocket) == "undefined") {
        console.log("遗憾：您的浏览器不支持WebSocket");
    } else {
        console.log("恭喜：您的浏览器支持WebSocket");
        //实现化WebSocket对象
        //指定要连接的服务器地址与端口建立连接
        //注意ws、wss使用不同的端口。我使用自签名的证书测试，
        //无法使用wss，浏览器打开WebSocket时报错
        //ws对应http、wss对应https。
        socket = new WebSocket("ws://localhost:9998/ws/asset");
        //连接打开事件
        socket.onopen = function() {
            console.log("Socket 已打开");
            socket.send("消息发送测试(From Client)");
        };
        //收到消息事件
        socket.onmessage = function(msg) {
            $("#messageId").append(msg.data+ "\n");
            console.log(msg.data  );
        };
        //连接关闭事件
        socket.onclose = function() {
            console.log("Socket已关闭");
        };
        //发生了错误事件
        socket.onerror = function() {
            alert("Socket发生了错误");
        }
        //窗口关闭时，关闭连接
        window.unload=function() {
            socket.close();
        };
    }
</script>
</body>
</html>

启动项目：

访问页面：http://localhost:9998/