SpringBoot使用WebSocket实现简单的网页一对一聊天功能

温故而知新，可以为师矣。 ——孔子

前言

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

一、环境准备

pom文件依赖：

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.aichen</groupId>
    <artifactId>socket-web-chat</artifactId>
    <version>1.0-SNAPSHOT</version>

    <properties>
        <maven.compiler.source>11</maven.compiler.source>
        <maven.compiler.target>11</maven.compiler.target>
        <spring.boot-version>2.3.11.RELEASE</spring.boot-version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
            <version>${spring.boot-version}</version>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>
            <version>${spring.boot-version}</version>
        </dependency>
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.72</version>
        </dependency>

        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.18.20</version>
            <optional>true</optional>
        </dependency>
    </dependencies>
</project>

前端js库：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/sockjs-client/1.5.1/sockjs.min.js"></script>

二、组织结构

三、主要实现代码

1、服务端代码（JAVA）

在SpringBoot中配置WebSocket

package com.aichen.socketwebchat.config;

import org.springframework.boot.autoconfigure.websocket.servlet.WebSocketMessagingAutoConfiguration;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;

/**
 * @author zheng
 * @version 1.0.0
 * @date 2021/6/22 9:32
 */
@Configuration
public class SocketConfig extends WebSocketMessagingAutoConfiguration {

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

定义消息体的结构

package com.aichen.socketwebchat.socket;

import lombok.Data;

import java.util.Date;

/**
 * 定义消息体
 * @author zheng
 * @version 1.0.0
 * @date 2021/6/22 10:13
 */
@Data
public class MessageBody {

    /**
     * 发送人姓名
     */
    private String fromName;

    /**
     * 接收人姓名
     */
    private String toName;

    /**
     * 消息内容
     */
    private String content;

    /**
     *
     * 发送时间
     */
    private Date sendTime;
}

定义会话存储

package com.aichen.socketwebchat.socket;

import javax.websocket.Session;
import java.util.concurrent.ConcurrentHashMap;

/**
 * 定义会话存储
 *
 * @author zheng
 * @version 1.0.0
 * @date 2021/6/22 9:50
 */
public class SocketStorage {

    private SocketStorage(){}

    /**
     * 根据name存储的Socket会话Map
     * key:name, value:session
     */
    public static ConcurrentHashMap<String, Session> sessionMap = new ConcurrentHashMap<>();

    /**
     * 根据Socket会话ID存储的name的Map
     * key:sessionId, value:name
     */
    public static ConcurrentHashMap<String, String> nameMap = new ConcurrentHashMap<>();
}

服务器端逻辑实现

package com.aichen.socketwebchat.socket;

import com.alibaba.fastjson.JSONObject;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Component;

import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.io.EOFException;
import java.io.IOException;
import java.util.Date;

/**
 * 服务端逻辑实现
 * @author zheng
 * @version 1.0.0
 * @date 2021/6/22 9:37
 */
@Component
@ServerEndpoint("/socket/{name}")
@Slf4j
public class WebChatSocket {

    @OnOpen
    public void onOpen(@PathParam("name") String name, Session session) throws IOException {
        if (SocketStorage.sessionMap.putIfAbsent(name, session) != null){
            log.error("用户名：{} 已存在", name);
            throw new RuntimeException("用户名已存在，请更换用户名。");
        }
        SocketStorage.nameMap.put(session.getId(), name);
        log.info("{}上线了", name);
        MessageBody systemMessage = new MessageBody();
        systemMessage.setContent(name + "成功建立连接");
        systemMessage.setFromName("system");
        session.getBasicRemote().sendText(JSONObject.toJSONString(systemMessage));
    }

    @OnClose
    public void onClose(Session session){
        String name = SocketStorage.nameMap.remove(session.getId());
        SocketStorage.sessionMap.remove(name);
        log.info("{}下线了", name);
    }

    @OnMessage
    public void onMessage(String message, Session session) throws IOException {
        log.info("监听到消息：{}", message);
        MessageBody messageBody = JSONObject.parseObject(message, MessageBody.class);
        if (messageBody == null){
            log.warn("监听到的消息为空或格式不正确，message:{}", message);
            return;
        }
        String fromUser = SocketStorage.nameMap.get(session.getId());
        //设置发消息的人
        messageBody.setFromName(fromUser);
        messageBody.setSendTime(new Date());

        //将消息转发给收消息的人
        Session toSession = SocketStorage.sessionMap.get(messageBody.getToName());
        if (toSession != null){
            toSession.getBasicRemote().sendText(JSONObject.toJSONString(messageBody));
        }else {
            log.info("{}不在线，发送失败", messageBody.getToName());
            MessageBody systemMessage = new MessageBody();
            systemMessage.setContent(messageBody.getToName() + "不在线，发送失败");
            systemMessage.setFromName("system");
            session.getBasicRemote().sendText(JSONObject.toJSONString(systemMessage));
        }
    }

    @OnError
    public void onError(Session session, Throwable error){
        if (error instanceof EOFException && error.getMessage() == null){
            String name = SocketStorage.nameMap.get(session.getId());
            SocketStorage.nameMap.remove(session.getId());
            SocketStorage.sessionMap.remove(name);
            log.info("{}长时间没有活动，连接已断开", name);
        }
    }
}

2、客户端实现（html+js）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>聊天</title>
</head>
<body>
当前登录用户：<input id="name"/><button id="connBtn" onclick="connection()">建立连接</button><br/>
接收人：<input id="toName"/><br/>
<input id="sendContent"/><button onclick="sendMessage()">发送</button><br/>
<div id="messageView"></div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/sockjs-client/1.5.1/sockjs.min.js"></script>
<script>
    var webSocket;
    function connection() {
        let name = $("#name").val();
        if (name){
            if ("WebSocket" in window) {
                webSocket = new WebSocket("ws://localhost:8080/socket/"+name);
                //连通之后的回调事件
                webSocket.onopen = function() {
                    console.log("已经连通了websocket");
                    $("#name").attr('disabled',true);
                    $("#connBtn").attr('disabled',true);
                };

                //接收后台服务端的消息
                webSocket.onmessage = function (evt) {
                    console.log("数据已接收:" +JSON.stringify(evt.data));
                    const messageBody = JSON.parse(evt.data);
                    viewMessage(messageBody);
                };

                //连接关闭的回调事件
                webSocket.onclose = function() {
                    console.log("连接已关闭...");
                    let message = new Object();
                    message.fromName = "system";
                    message.content = "连接已关闭";
                    viewMessage(message);
                };
            }else{
                // 浏览器不支持 WebSocket
                alert("您的浏览器不支持 WebSocket!");
            }
        }else {
            alert("请输入你的名字")
        }
    }
    function sendMessage(){
        let content = $("#sendContent").val();
        if (content){
            let message = new Object();
            message.fromName = $("#name").val();
            message.toName = $("#toName").val();
            message.content = content;
            $("#sendContent").val("");
            viewMessage(message);
            webSocket.send(JSON.stringify(message));
        }else {
            console.log("输入内容为空")
        }
    }
    function viewMessage(message){
        let messageHtml = "<div>"+message.fromName+": "+message.content+"</div>";
        $("#messageView").append(messageHtml);
    }
</script>
</html>

四、实现效果