Spring Boot 整合 socket 实现简单聊天

来看一下实现的界面效果

pom.xml的maven依赖

 <!-- 引入 socket -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>
        </dependency>
        <!-- 引入 Fastjson ，实现序列化使用  -->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.62</version>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

配置类

@Configuration
public class WebSocketConfiguration {
    /**
     * 给 spring 容器注入这个 ServerEndpointExporter对象
     * <p>
     * 这个bean会检测所有带有 @ServerEndpoint 注解的 bean 并注册他们。
     * ps：
     * 如果使用的是外置的 Tomcat 容器，则不需要自己提供 ServerEndpointExporter，因为它将由 Tomcat 容器自己提供和管理。
     *
     * @return ServerEndpointExporter
     */
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }
}

消息接口

public interface Message {
}

WebSocket 会话上下文工具

@Slf4j
public class WebSocketContext {

    /**
     * Session 与用户的映射
     */
    private static final Map<Session, String> SESSION_USER_MAP = new ConcurrentHashMap<>();
    /**
     * 用户与 Session 的映射
     */
    private static final Map<String, Session> USER_SESSION_MAP = new ConcurrentHashMap<>();

    /**
     * 添加 Session 在这个方法中，会绑定用户和 Session 之间的映射
     *
     * @param session Session
     * @param user    用户
     */
    public static void add(Session session, String user) {
        // 更新 USER_SESSION_MAP , 这里的 user 正常来讲应该是具体的用户(id)，而不是单纯的 session.getId()
        USER_SESSION_MAP.put(user, session);
        // 更新 SESSION_USER_MAP
        SESSION_USER_MAP.put(session, user);
    }

    /**
     * 移除 Session
     *
     * @param session Session
     */
    public static void remove(Session session) {
        // 从 SESSION_USER_MAP 中移除
        String user = SESSION_USER_MAP.remove(session);
        // 从 USER_SESSION_MAP 中移除
        if (user != null && user.length() > 0) {
            USER_SESSION_MAP.remove(user);
        }
    }


    /**
     * 广播发送消息给所有在线用户
     *
     * @param type    消息类型
     * @param message 消息体
     * @param <T>     消息类型
     * @param me      当前消息的发送者，不会将消息发送给自己
     */
    public static <T extends Message> void broadcast(String type, T message, Session me) {
        // 创建消息
        String messageText = buildTextMessage(type, message);
        // 遍历 SESSION_USER_MAP ，进行逐个发送
        for (Session session : SESSION_USER_MAP.keySet()) {
            if (!session.equals(me)) {
                sendTextMessage(session, messageText);
            }
        }
    }

    /**
     * 发送消息给单个用户的 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 user    指定用户
     * @param type    消息类型
     * @param message 消息体
     * @param <T>     消息类型
     * @return 发送是否成功
     */
    public static <T extends Message> boolean send(String user, String type, T message) {
        // 获得用户对应的 Session
        Session session = USER_SESSION_MAP.get(user);
        if (session == null) {
            log.error("==> user({}) 不存在对应的 session", user);
            return false;
        }
        // 发送消息
        send(session, type, message);
        return true;
    }

    /**
     * 构建完整的消息
     *
     * @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("===> session 为 null");
            return;
        }
        RemoteEndpoint.Basic basic = session.getBasicRemote();
        if (basic == null) {
            log.error("===> session.basic 为 null");
            return;
        }
        try {
            basic.sendText(messageText);
        } catch (IOException e) {
            log.error("===> session: {} 发送消息: {} 发生异常", session, messageText, e);
        }
    }

    /**
     * 在线人数通知
     */
    public static void countNotice() {
        Integer count = SESSION_USER_MAP.size();
        ChatCountMessage message = new ChatCountMessage();
        message.setCount(count);
        broadcast(MsgTypeEnum.CHAT_COUNT.getCode(), message, null);
    }
}

消息类型枚举

@Getter
@AllArgsConstructor
public enum MsgTypeEnum {
    /**
     * 同于标识 当前消息是 聊天消息
     */
    CHAT_MSG("1", "聊天消息"),
    /**
     * 用于标识 当前消息是 人数消息
     */
    CHAT_COUNT("2", "聊天室人数");

    private final String code;
    private final String desc;
}

配置接入点

ServerEndpoint 注解是一个类层次的注解，它的功能主要是将目前的类定义成一个websocket服务器端,

注解的值将被用于监听用户连接的终端访问URL地址,客户端可以通过这个URL来连接到WebSocket服务器端

@Component
@ServerEndpoint("/chat")
@Slf4j
public class WebSocketServer {

    /**
     * 连接建立成功调用的方法
     */
    @OnOpen
    public void onOpen(Session session) {
        log.info("===> onOpen:{}", session.getId());
        // 上线，并且通知到其他人
        WebSocketContext.add(session, session.getId());
        WebSocketContext.countNotice();
    }

    /**
     * 连接关闭调用的方法
     */
    @OnClose
    public void onClose(Session session) {
        log.info("===> onClose:{}", session.getId());
        // 下线，并且通知到其他人
        WebSocketContext.remove(session);
        WebSocketContext.countNotice();
    }

    /**
     * 收到客户端消息后调用的方法
     *
     * @param message 客户端发送过来的消息
     */
    @OnMessage
    public void onMessage(String message, Session session) {
        log.info("===> onMessage:{},message:{}", session.getId(), message);
        // 进行消息的转发，同步到其他的客户端上
        ChatMsgMessage msg = JSON.parseObject(message, ChatMsgMessage.class);
        WebSocketContext.broadcast(MsgTypeEnum.CHAT_MSG.getCode(), msg, session);
    }

    /**
     * 监听错误
     *
     * @param session session
     * @param error   错误
     */
    @OnError
    public void onError(Session session, Throwable error) {
        log.error("SessionId:{},出现异常：{}", session.getId(), error.getMessage());
        error.printStackTrace();
    }

}

在线人数消息实体

@Data
@Accessors(chain = true)
public class ChatCountMessage implements Message {

    public static final String TYPE = MsgTypeEnum.CHAT_COUNT.getCode();

    /**
     * 消息编号
     */
    private String msgId;
    /**
     * 内容
     */
    private Integer count;

}

消息发送实体

@Data
@Accessors(chain = true)
public class ChatMsgMessage implements Message {

    public static final String TYPE = MsgTypeEnum.CHAT_MSG.getCode();

    /**
     * 消息编号
     */
    private String msgId;
    /**
     * 内容
     */
    private String msg;

}

在resources下新建static静态文件夹

index.css文件

@font-face {
    font-family: "pix";
    src: url("../DottedSongtiSquareRegular.otf");
}

html, body, pre, code, kbd, samp {
    font-family: "pix", serif;
    font-weight: bold;
    font-size: 35px;
}

.all-div {
    display: flex;
    flex-direction: column;
    width: 800px;
    margin: 20px auto;
    overflow-scrolling: auto;
}

/*.message {*/
/*    overflow: auto;*/
/*    width: 800px;*/
/*    height: 400px;*/
/*    margin-top: 20px;*/
/*}*/

.send-btns {
    display: flex;
}

/*自己发送聊天的样式*/
.message-me {
    color: red;
    text-align: right
}

.message-list {
    display: flex;
    flex-direction: column;
}

.message-left {
    display: flex;
    margin-top: 2rem;
    align-self: flex-start;
}
.message-right {
    display: flex;
    margin-top: 2rem;
    align-self: flex-end;
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在线聊天</title>
    <link href="NES.css" rel="stylesheet"/>
    <link href="/css/index.css" rel="stylesheet">
</head>
<style>
</style>
<body>
<div class="all-div">
    <!--  头部区域  -->
    <div style="margin-left: 10px">
        Spring Boot 集成 WebSocket 示例;
        <span class="nes-text is-primary">在线人数：</span>
        <span class="nes-text is-error" id="count">0</span>
    </div>
    <!--  内容显示区域  -->
    <div class="nes-container is-rounded is-dark message-list" id="message">

    </div>
    <!--  操作区域  -->
    <div class="nes-field is-inline">
        <br/>
        <input id="text" type="text" class="nes-input" style="padding: .2rem 1rem !important;"/>
        <button onclick="send()" class="nes-btn is-success">发送</button>
        <button onclick="closeWebSocket()" class="nes-btn is-error">关闭WebSocket连接</button>
    </div>
</div>
</body>

<script type="text/javascript">
    let websocket = null;
    //判断当前浏览器是否支持WebSocket
    if ('WebSocket' in window) {
        //改成你的地址
        websocket = new WebSocket("ws://127.0.0.1:8080/chat");
    } else {
        alert('当前浏览器不支持 websocket')
        throw "当前浏览器不支持 websocket"
    }

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

    //连接成功建立的回调方法
    websocket.onopen = function () {
        setMessageInnerHTML("WebSocket连接成功" + "&#13;");
    }
    //接收到消息的回调方法
    websocket.onmessage = function (event) {
        let jsonData = event.data;
        let data = JSON.parse(jsonData);
        console.log("收到消息==", event);
        if (data.type === "1") {
            let msg = otherPersonShowMsg(data.body.msg)
            setMessageInnerHTML(msg);
        }
        if (data.type === "2") {
            setChatCountInnerHTML(data.body.count)
        }
    }

    //连接关闭的回调方法
    websocket.onclose = function () {
        setMessageInnerHTML("WebSocket连接关闭" + "&#13;");
    }

    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function () {
        closeWebSocket();
    }

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

    //将消息显示在网页上
    function setChatCountInnerHTML(innerHTML) {
        document.getElementById('count').innerHTML = innerHTML;
    }

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

    //发送消息
    function send() {
        var message = document.getElementById('text').value;
        websocket.send('{"msg":"' + message + '"}');
        document.getElementById('text').value = '';
        message = this.meShowMsg(message);
        setMessageInnerHTML(message);
    }

    // 显示别人发送的消息
    function otherPersonShowMsg(str) {
        return ` <section class="message-left">
                  <i class="nes-bcrikko"></i>
                  <div class="nes-balloon from-left is-dark" style="padding: .2rem 1rem !important;">
                    <p>${str}</p>
                  </div>
                </section>`
    }

    // 显示自己发送的消息
    function meShowMsg(str) {
        return ` <section class="message-right">
                    <div class="nes-balloon from-right is-dark" style="padding: .2rem 1rem !important;">
                      <p>${str}</p>
                    </div>
                    <i class="nes-bcrikko"></i>
              </section>`
    }
</script>
</html>

以上的是Spring Boot 整合 socket 实现简单聊天 若需完整代码 可识别二维码后 给您发代码。