WebSoket一对多聊天（仅供参考）

最新推荐文章于 2024-05-27 15:11:32 发布

划水的nlk

最新推荐文章于 2024-05-27 15:11:32 发布

阅读量773

点赞数 1

文章标签： java websocket Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_46141446/article/details/129513952

版权

soket通过Session来记录会话，通话一般首先要解决的是，这条消息由谁发给谁，所以我为此创建了一个实体类代码如下：

//如果没有使用lombok请自己生成get,set方法
@Data
public class SocketMsg {
    private String My;  //用于记录我的Id
    private String passageway;   //频道
    private String fromUser;//发送者.
    private String toUser;//接受者.
    private String msg;//消息
}

上面的频道我用于存游客id，因为我是一对多所以我要单独维护我的id，接下来就是Soket类

//nickname用于传用户名不需要可以去掉
@ServerEndpoint(value = "/websocket/{nickname}")
@Component
public class MyWebSocket {

    //用来记录sessionId和该session进行绑定
    private static Map<String,Session> map = new HashMap<String, Session>();

    //用来存放每个客户端对应的MyWebSocket对象。
    private static CopyOnWriteArraySet<MyWebSocket> webSocketSet = new CopyOnWriteArraySet<MyWebSocket>();


    //我把自己取名为老中医，这是我自己会话
    private static Session laoZhongYi;

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

    private String username;




    /**
     * 连接建立成功调用的方法
     */
    @OnOpen
    public void onOpen(Session session,@PathParam("nickname") String nickname) {
        SocketMsg socketMsg = new SocketMsg();
         //如果是不是我自己上线
        if (!"老中医".equals(nickname)){
            this.session = session;
            this.username = nickname;
            webSocketSet.add(this);     //加入set中
            map.put(session.getId(), session);
            System.out.println("有新连接加入："+session.getId()+"当前在线人数为" + webSocketSet.size());
            socketMsg.setPassageway(session.getId());
            this.session.getAsyncRemote().sendText(JSON.toJSONString(socketMsg));
            laoZhongYi.getAsyncRemote().sendText(JSON.toJSONString(socketMsg));
            //        this.session.getAsyncRemote().sendText("恭喜"+session.getId()+"成功连接上WebSocket(其频道号："+session.getId()+")-->当前在线人数为："+webSocketSet.size());
        }else {
            //我上线就加入会话
            laoZhongYi = session;
            socketMsg.setLaoZonYiId(laoZhongYi.getId());
            socketMsg.setMsg("老中医连接成功");
            laoZhongYi.getAsyncRemote().sendText(JSON.toJSONString(socketMsg));
        }

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




    /**
     * 收到客户端消息后调用的方法
     *
     * @param message 客户端发送过来的消息*/
    @OnMessage
    public void onMessage(String message, Session session) {
        System.out.println("来自客户端的消息-->"+session.getId()+": " + message);
        //我没上线就告诉他们
        if (laoZhongYi == null){
            session.getAsyncRemote().sendText("系统消息：老中医正在休息");
            return;
        }
        ObjectMapper objectMapper = new ObjectMapper();
        SocketMsg socketMsg;
        try {
            socketMsg = objectMapper.readValue(message, SocketMsg.class);
            //如果是我自己发的就给其他人发消息
            if ((session.getId()).equals(laoZhongYi.getId())){
                Session toSession = map.get(socketMsg.getToUser());
                toSession.getAsyncRemote().sendText(JSON.toJSONString(socketMsg));
            }else {
                laoZhongYi.getAsyncRemote().sendText(JSON.toJSONString(socketMsg));
            }
        } catch (JsonProcessingException e) {
            e.printStackTrace();
        }


        //从客户端传过来的数据是json数据，所以这里使用jackson进行转换为SocketMsg对象，
        // 然后通过socketMsg的type进行判断是单聊还是群聊，进行相应的处理:
//        ObjectMapper objectMapper = new ObjectMapper();
//        SocketMsg socketMsg;
//        try {
//            socketMsg = objectMapper.readValue(message, SocketMsg.class);
//            if(socketMsg.getType() == 1){
//                //单聊.需要找到发送者和接受者.
//                socketMsg.setFromUser(session.getId());//发送者.
//                Session fromSession = map.get(socketMsg.getFromUser());
//                Session toSession = map.get(socketMsg.getToUser());
//
//                //发送给接受者.
//                if(toSession != null){
//                    //发送给发送者.
                    fromSession.getAsyncRemote().sendText(session.getId()+"："+socketMsg.getMsg());
//                    toSession.getAsyncRemote().sendText(session.getId()+"："+socketMsg.getMsg());
//                }else{
//                    //发送给发送者.
//                    fromSession.getAsyncRemote().sendText("系统消息：对方不在线或者您输入的频道号不对");
//                }
//            }else{
//                //群发消息
                broadcast(session.getId()+": "+socketMsg.getMsg());
//            }
//
//        } catch (JsonParseException e) {
//            e.printStackTrace();
//        } catch (JsonMappingException e) {
//            e.printStackTrace();
//        } catch (IOException e) {
//            e.printStackTrace();
//        }
//        broadcast(session.getId()+": "+message);
    }
    /**
     * 发生错误时调用
     *
     */
    @OnError
    public void onError(Session session, Throwable error) {
        System.out.println("发生错误");
        error.printStackTrace();
    }
    /**
     * 群发自定义消息
     * */
    public  void broadcast(String message){
        for (MyWebSocket item : webSocketSet) {
            //同步异步说明参考：http://blog.csdn.net/who_is_xiaoming/article/details/53287691
            //this.session.getBasicRemote().sendText(message);
            item.session.getAsyncRemote().sendText(message);//异步发送消息.
        }
    }
}

接下来是页面代码，这是我的页面

<head>
    <meta charset="UTF-8">
    <title>CodePen - Messaging App UI with Dark Mode</title>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

    <link rel="stylesheet" href="/chat/css/style.css">

    <script src="/chat/js/script.js"></script>
    <script src="/doc/lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <script src="/js/HttpUtil.js"></script>
    <script src="/doc/lib/layui-v2.6.3/layui.js"></script>

</head>

<body>

<input hidden="hidden" id="toUser" value="aa">
<!-- 老中医的ID-->
<input hidden="hidden" id="sionId">

<input hidden="hidden" id="OtherSionId">
<div class="app">

    <div class="wrapper">
        <!-- 左边用户信息 -->
        <div class="conversation-area">
            <div id="id1">
                <!--                    <div class="msg online" onclick="selectActive(this)">-->
                <!--                        <div class="msg-profile group">-->
                <!--                            <svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none"-->
                <!--                                 stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1">-->
                <!--                                <path d="M12 2l10 6.5v7L12 22 2 15.5v-7L12 2zM12 22v-6.5"></path>-->
                <!--                                <path d="M22 8.5l-10 7-10-7"></path>-->
                <!--                                <path d="M2 15.5l10-7 10 7M12 2v6.5"></path>-->
                <!--                            </svg>-->
                <!--                        </div>-->
                <!--                        <div class="msg-detail">-->
                <!--                            <div class="msg-username">大山</div>-->
                <!--                            <div class="msg-content">-->
                <!--                                <span class="msg-message">求救</span>-->
                <!--                                <span class="msg-date">28m</span>-->
                <!--                            </div>-->
                <!--                        </div>-->
                <!--                    </div>-->
            </div>
            <button class="add" onclick="conectWebSocket()"></button>
        </div>

        <!-- 中间 -->
        <div class="chat-area" id="ck">
            <div class="chat-area-header">
                <!-- 聊天标题-->
                <div class="chat-area-title">统一回复窗口</div>
            </div>
            <div class="chat-area-main" id="chat">
                <!-- 聊天头像-->



            </div>


            <div class="chat-area-footer" >
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                     stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-image">
                    <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                    <circle cx="8.5" cy="8.5" r="1.5"></circle>
                    <path d="M21 15l-5-5L5 21"></path>
                </svg>

                <input id="text" type="text" placeholder="Type something here...">

                <button onclick="send()" class="feather feather-smile" style="width: 60px; height: 30px;background: #3399FF; border: none; color:#fff;">发送</button>
            </div>
        </div>
    </div>
</div>
</body>

<script>
    var websocket = null;

    function conectWebSocket() {

        var toUser = document.getElementById('toUser').value;
        //判断当前浏览器是否支持WebSocket
        if ('WebSocket' in window) {
            websocket = new WebSocket("ws://localhost:8080/websocket/" + toUser);
        } else {
            alert('不支持websocket')
        }
        //连接发生错误的回调方法
        websocket.onerror = function () {
            setMessageInnerHTML("error");
        };
        //连接成功建立的回调方法
        websocket.onopen = function (event) {
            layer.msg(toUser + "成功建立连接")
            // setMessageInnerHTML("Loc MSG: 成功建立连接");
        }
        //接收到消息的回调方法
        websocket.onmessage = function (event) {
            var s = JSON.parse(event.data);
            console.log(s.laoZonYiId);
            if (!s.laoZonYiId == '' && s.laoZonYiId != null) {
                $("#sionId").val(s.laoZonYiId);

            }
            if (!s.passageway == '' && s.passageway != null) {
                addnode(s.passageway);
            }
            addMsgByUser(s.msg,s.fromUser);
            //滚动条滚动到最底下
            $("#ck").scrollTop($("#chat")[0].scrollHeight);
        }
        //连接关闭的回调方法
        websocket.onclose = function () {
            setMessageInnerHTML("Loc MSG:关闭连接");
        }
        //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
        window.onbeforeunload = function () {
            websocket.close();
        }
    }


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

    //发送消息
    function send() {
        //获取输入的文本信息进行发送
        var message = $("#text").val();
        var toUser = $("#OtherSionId").val();
        addMsg(message);
        var socketMsg = { msg: message, toUser: toUser};
        //滚动条滚动到最底下
        $("#ck").scrollTop($("#chat")[0].scrollHeight);
        websocket.send(JSON.stringify(socketMsg));
    }

    userInfo(function (res) {
        console.log(res)
        $("#toUser").val(res.data.userInfo.username)
    })

    function selectActive(even) {
        // console.log(even)
        $(even).addClass("active");
        $(even).siblings().removeClass("active");
        console.log($(even).attr("id"));
        $("#OtherSionId").val($(even).attr("id"));
    }

    function addnode(id) {
        var $html = $('<div class="msg online" id=' + id + ' onclick="selectActive(this)">\n' +
            '            <div class="msg-profile group">\n' +
            '                <svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none"\n' +
            '                     stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1">\n' +
            '                    <path d="M12 2l10 6.5v7L12 22 2 15.5v-7L12 2zM12 22v-6.5"></path>\n' +
            '                    <path d="M22 8.5l-10 7-10-7"></path>\n' +
            '                    <path d="M2 15.5l10-7 10 7M12 2v6.5"></path>\n' +
            '                </svg>\n' +
            '            </div>\n' +
            '            <div class="msg-detail">\n' +
            '                <div class="msg-username">游客' + id + '</div>\n' +
            '                <div class="msg-content">\n' +
            '                    <span class="msg-message">求助</span>\n' +
            '                    <span class="msg-date">1000m</span>\n' +
            '                </div>\n' +
            '            </div>\n' +
            '        </div>');
        $("#id1").append($html);
    }


    function addMsgByUser(msg,id) {
        var username = "游客"+id;
        var $html = $('<div class="chat-msg">\n' +
            '                        <div class="chat-msg-profile">\n' +
            '                            <img class="chat-msg-img" src="/chat/img/1.png" alt="">\n' +
            '                            <div class="chat-msg-date">'+username+'</div>\n' +
            '                        </div>\n' +
            '\n' +
            '                        <!-- 聊天内容-->\n' +
            '                        <div class="chat-msg-content">\n' +
            '                            <div class="chat-msg-text">'+msg+'</div>\n' +
            '                        </div>\n' +
            '                    </div>');
        $("#chat").append($html);
    }

    function addMsg(msg){
        var $html = $('<div class="chat-msg owner">\n' +
            '                    <div class="chat-msg-profile">\n' +
            '                        <img class="chat-msg-img" src="/chat/img/1.png" alt="">\n' +
            '                        <div class="chat-msg-date">老中医</div>\n' +
            '                    </div>\n' +
            '                    <div class="chat-msg-content">\n' +
            '                        <div class="chat-msg-text">'+msg+'</div>\n' +
            '                    </div>\n' +
            '                </div>');
        $("#chat").append($html);
    }



</script>

这是其他人的

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>My WebSocket</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

    <link rel="stylesheet" href="/chat/css/style.css">

    <script src="/chat/js/script.js"></script>
    <script src="/doc/lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <script src="/js/HttpUtil.js"></script>
    <script src="/doc/lib/layui-v2.6.3/layui.js"></script>
</head>
<body>
<input hidden="hidden" id="toUser" value="游客">
<input hidden="hidden" id="sionId">
<!-- 中间 -->
<div class="chat-area">
    <div class="chat-area-header" id="ck">
        <!-- 聊天标题-->
        <div class="chat-area-title">客服</div>
    </div>
    <div class="chat-area-main" id="chat">

    </div>


    <div class="chat-area-footer" style="position: fixed;bottom: 0;">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
             stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-image">
            <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
            <circle cx="8.5" cy="8.5" r="1.5"></circle>
            <path d="M21 15l-5-5L5 21"></path>
        </svg>

        <input id="text" type="text" placeholder="Type something here...">

        <button onclick="send()" class="feather feather-smile" style="width: 60px; height: 30px;background: #3399FF; border: none; color:#fff;" >发送</button>
    </div>
</div>
</body>

<script>
    var websocket = null;

    function conectWebSocket() {

        var toUser = document.getElementById('toUser').value;
        //判断当前浏览器是否支持WebSocket
        if ('WebSocket' in window) {
            websocket = new WebSocket("ws://localhost:8080/websocket/"+ toUser);
        } else {
            alert('不支持websocket')
        }
        //连接发生错误的回调方法
        websocket.onerror = function () {
            setMessageInnerHTML("error");
        };
        //连接成功建立的回调方法
        websocket.onopen = function (event) {
            layer.msg(toUser+"成功建立连接")
            // setMessageInnerHTML("Loc MSG: 成功建立连接");
        }
        //接收到消息的回调方法
        websocket.onmessage = function (event) {
            var s = JSON.parse(event.data);
            if (!s.passageway=='' && s.passageway!=null){
                $("#sionId").val(s.passageway)
            }
            addMsgByAdmin(s.msg)
            //滚动条滚动到最底下
            $("#ck").scrollTop($("#chat")[0].scrollHeight);
        }
        //连接关闭的回调方法
        websocket.onclose = function () {
            setMessageInnerHTML("Loc MSG:关闭连接");
        }
        //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
        window.onbeforeunload = function () {
            websocket.close();
        }
    }
    conectWebSocket();


    //关闭连接
    function closeWebSocket() {
        websocket.close();
    }
    //发送消息
    function send() {
        //获取输入的文本信息进行发送
        var message = $("#text").val();
        var fromUser = $("#sionId").val();
        var socketMsg = { msg: message,fromUser:fromUser};
        addMsg(message)
        //滚动条滚动到最底下
        $("#ck").scrollTop($("#chat")[0].scrollHeight);
        websocket.send(JSON.stringify(socketMsg));
    }

    function addMsgByAdmin(msg) {
        var $html = $('<div class="chat-msg">\n' +
            '                        <div class="chat-msg-profile">\n' +
            '                            <img class="chat-msg-img" src="/chat/img/1.png" alt="">\n' +
            '                            <div class="chat-msg-date">'+'医生'+'</div>\n' +
            '                        </div>\n' +
            '\n' +
            '                        <!-- 聊天内容-->\n' +
            '                        <div class="chat-msg-content">\n' +
            '                            <div class="chat-msg-text">'+msg+'</div>\n' +
            '                        </div>\n' +
            '                    </div>');
        $("#chat").append($html);
    }

    function addMsg(msg){
        var $html = $('<div class="chat-msg owner">\n' +
            '                    <div class="chat-msg-profile">\n' +
            '                        <img class="chat-msg-img" src="/chat/img/1.png" alt="">\n' +
            '                        <div class="chat-msg-date">我</div>\n' +
            '                    </div>\n' +
            '                    <div class="chat-msg-content">\n' +
            '                        <div class="chat-msg-text">'+msg+'</div>\n' +
            '                    </div>\n' +
            '                </div>');
        $("#chat").append($html);
    }

</script>
</html>

以下是样式

const toggleButton = document.querySelector('.dark-light');
const colors = document.querySelectorAll('.color');

colors.forEach(color => {
  color.addEventListener('click', e => {
    colors.forEach(c => c.classList.remove('selected'));
    const theme = color.getAttribute('data-color');
    document.body.setAttribute('data-theme', theme);
    color.classList.add('selected');
  });
});

toggleButton.addEventListener('click', () => {
  document.body.classList.toggle('dark-mode');
});

@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Manrope:300,400,500,600,700&display=swap&subset=latin-ext");
:root {
  --body-bg-color: #e5ecef;
  --theme-bg-color: #fff;
  --settings-icon-hover: #9fa7ac;
  --developer-color: #f9fafb;
  --input-bg: #f8f8fa;
  --input-chat-color: #a2a2a2;
  --border-color: #eef2f4;
  --body-font: "Manrope", sans-serif;
  --body-color: #273346;
  --settings-icon-color: #c1c7cd;
  --msg-message: #969eaa;
  --chat-text-bg: #f1f2f6;
  --theme-color: #0086ff;
  --msg-date: #c0c7d2;
  --button-bg-color: #f0f7ff;
  --button-color: var(--theme-color);
  --detail-font-color: #919ca2;
  --msg-hover-bg: rgba(238, 242, 244, 0.4);
  --active-conversation-bg: linear-gradient(
   to right,
   rgba(238, 242, 244, 0.4) 0%,
   rgba(238, 242, 244, 0) 100%
  );
  --overlay-bg: linear-gradient(
   to bottom,
   rgba(255, 255, 255, 0) 0%,
   rgba(255, 255, 255, 1) 65%,
   rgba(255, 255, 255, 1) 100%
  );
  --chat-header-bg: linear-gradient(
   to bottom,
   rgba(255, 255, 255, 1) 0%,
   rgba(255, 255, 255, 1) 78%,
   rgba(255, 255, 255, 0) 100%
  );
}

[data-theme=purple] {
  --theme-color: #9f7aea;
  --button-color: #9f7aea;
  --button-bg-color: rgba(159, 122, 234, 0.12);
}

[data-theme=green] {
  --theme-color: #38b2ac;
  --button-color: #38b2ac;
  --button-bg-color: rgba(56, 178, 171, 0.15);
}

[data-theme=orange] {
  --theme-color: #ed8936;
  --button-color: #ed8936;
  --button-bg-color: rgba(237, 137, 54, 0.12);
}

.dark-mode {
  --body-bg-color: #1d1d1d;
  --theme-bg-color: #27292d;
  --border-color: #323336;
  --body-color: #d1d1d2;
  --active-conversation-bg: linear-gradient(
   to right,
   rgba(47, 50, 56, 0.54),
   rgba(238, 242, 244, 0) 100%
  );
  --msg-hover-bg: rgba(47, 50, 56, 0.54);
  --chat-text-bg: #383b40;
  --chat-text-color: #b5b7ba;
  --msg-date: #626466;
  --msg-message: var(--msg-date);
  --overlay-bg: linear-gradient(
   to bottom,
   rgba(0, 0, 0, 0) 0%,
   #27292d 65%,
   #27292d 100%
  );
  --input-bg: #2f3236;
  --chat-header-bg: linear-gradient(
   to bottom,
   #27292d 0%,
   #27292d 78%,
   rgba(255, 255, 255, 0) 100%
  );
  --settings-icon-color: #7c7e80;
  --developer-color: var(--border-color);
  --button-bg-color: #393b40;
  --button-color: var(--body-color);
  --input-chat-color: #6f7073;
  --detail-font-color: var(--input-chat-color);
}

.blue {
  background-color: #0086ff;
}

.purple {
  background-color: #9f7aea;
}

.green {
  background-color: #38b2ac;
}

.orange {
  background-color: #ed8936;
}

* {
  outline: none;
  box-sizing: border-box;
}

img {
  max-width: 100%;
}

body {
  background-color: var(--body-bg-color);
  font-family: var(--body-font);
  color: var(--body-color);
}

html {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

.app {
  display: flex;
  flex-direction: column;
  background-color: var(--theme-bg-color);
  max-width: 1600px;
  height: 100vh;
  margin: 0 auto;
  overflow: hidden;
}

.header {
  height: 80px;
  width: 100%;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  padding: 0 20px;
}

.wrapper {
  width: 100%;
  display: flex;
  flex-grow: 1;
  overflow: hidden;
}

.conversation-area,
.detail-area {
  width: 340px;
  flex-shrink: 0;
}

.detail-area {
  border-left: 1px solid var(--border-color);
  margin-left: auto;
  padding: 30px 30px 0 30px;
  display: flex;
  flex-direction: column;
  overflow: auto;
}

.chat-area {
  flex-grow: 1;
}

.search-bar {
  height: 80px;
  z-index: 3;
  position: relative;
  margin-left: 280px;
}
.search-bar input {
  height: 100%;
  width: 100%;
  display: block;
  background-color: transparent;
  border: none;
  color: var(--body-color);
  padding: 0 54px;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56.966 56.966' fill='%23c1c7cd'%3e%3cpath d='M55.146 51.887L41.588 37.786A22.926 22.926 0 0046.984 23c0-12.682-10.318-23-23-23s-23 10.318-23 23 10.318 23 23 23c4.761 0 9.298-1.436 13.177-4.162l13.661 14.208c.571.593 1.339.92 2.162.92.779 0 1.518-.297 2.079-.837a3.004 3.004 0 00.083-4.242zM23.984 6c9.374 0 17 7.626 17 17s-7.626 17-17 17-17-7.626-17-17 7.626-17 17-17z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-size: 16px;
  background-position: 25px 48%;
  font-family: var(--body-font);
  font-weight: 600;
  font-size: 15px;
}
.search-bar input::placeholder {
  color: var(--input-chat-color);
}

.logo {
  color: var(--theme-color);
  width: 38px;
  flex-shrink: 0;
}
.logo svg {
  width: 100%;
}

.user-settings {
  display: flex;
  align-items: center;
  cursor: pointer;
  margin-left: auto;
  flex-shrink: 0;
}
.user-settings > * + * {
  margin-left: 14px;
}

.dark-light {
  width: 22px;
  height: 22px;
  color: var(--settings-icon-color);
  flex-shrink: 0;
}
.dark-light svg {
  width: 100%;
  fill: transparent;
  transition: 0.5s;
}

.user-profile {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.settings {
  color: var(--settings-icon-color);
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.conversation-area {
  border-right: 1px solid var(--border-color);
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}

.msg-profile {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 15px;
}
.msg-profile.group {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--border-color);
}
.msg-profile.group svg {
  width: 60%;
}

.msg {
  display: flex;
  align-items: center;
  padding: 20px;
  cursor: pointer;
  transition: 0.2s;
  position: relative;
}
.msg:hover {
  background-color: var(--msg-hover-bg);
}
.msg.active {
  background: var(--active-conversation-bg);
  border-left: 4px solid var(--theme-color);
}
.msg.online:before {
  content: "";
  position: absolute;
  background-color: #23be7e;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid var(--theme-bg-color);
  left: 50px;
  bottom: 19px;
}

.msg-username {
  margin-bottom: 4px;
  font-weight: 600;
  font-size: 15px;
}

.msg-detail {
  overflow: hidden;
}

.msg-content {
  font-weight: 500;
  font-size: 13px;
  display: flex;
}

.msg-message {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--msg-message);
}

.msg-date {
  font-size: 14px;
  color: var(--msg-date);
  margin-left: 3px;
}
.msg-date:before {
  content: "•";
  margin-right: 2px;
}

.add {
  position: sticky;
  bottom: 25px;
  background-color: var(--theme-color);
  width: 60px;
  height: 60px;
  border: 0;
  border-radius: 50%;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-plus'%3e%3cpath d='M12 5v14M5 12h14'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: 28px;
  box-shadow: 0 0 16px var(--theme-color);
  margin: auto auto -55px;
  flex-shrink: 0;
  z-index: 1;
  cursor: pointer;
}

.overlay {
  position: sticky;
  bottom: 0;
  left: 0;
  width: 340px;
  flex-shrink: 0;
  background: var(--overlay-bg);
  height: 80px;
}

.chat-area {
  display: flex;
  flex-direction: column;
  overflow: auto;
}
.chat-area-header {
  display: flex;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  background: var(--chat-header-bg);
}
.chat-area-profile {
  width: 32px;
  border-radius: 50%;
  object-fit: cover;
}
.chat-area-title {
  font-size: 18px;
  font-weight: 600;
}
.chat-area-main {
  flex-grow: 1;
}

.chat-msg-img {
  height: 40px;
  width: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.chat-msg-profile {
  flex-shrink: 0;
  margin-top: auto;
  margin-bottom: -20px;
  position: relative;
}

.chat-msg-date {
  position: absolute;
  left: calc(100% + 12px);
  bottom: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--msg-date);
  white-space: nowrap;
}

.chat-msg {
  display: flex;
  padding: 0 20px 45px;
}
.chat-msg-content {
  margin-left: 12px;
  max-width: 70%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.chat-msg-text {
  background-color: var(--chat-text-bg);
  padding: 15px;
  border-radius: 20px 20px 20px 0;
  line-height: 1.5;
  font-size: 14px;
  font-weight: 500;
}
.chat-msg-text + .chat-msg-text {
  margin-top: 10px;
}

.chat-msg-text {
  color: var(--chat-text-color);
}

.owner {
  flex-direction: row-reverse;
}
.owner .chat-msg-content {
  margin-left: 0;
  margin-right: 12px;
  align-items: flex-end;
}
.owner .chat-msg-text {
  background-color: var(--theme-color);
  color: #fff;
  border-radius: 20px 20px 0 20px;
}
.owner .chat-msg-date {
  left: auto;
  right: calc(100% + 12px);
}

.chat-msg-text img {
  max-width: 300px;
  width: 100%;
}

.chat-area-footer {
  display: flex;
  border-top: 1px solid var(--border-color);
  width: 100%;
  padding: 10px 20px;
  align-items: center;
  background-color: var(--theme-bg-color);
  position: sticky;
  bottom: 0;
  left: 0;
}

.chat-area-footer svg {
  color: var(--settings-icon-color);
  width: 20px;
  flex-shrink: 0;
  cursor: pointer;
}
.chat-area-footer svg:hover {
  color: var(--settings-icon-hover);
}
.chat-area-footer svg + svg {
  margin-left: 12px;
}

.chat-area-footer input {
  border: none;
  color: var(--body-color);
  background-color: var(--input-bg);
  padding: 12px;
  border-radius: 6px;
  font-size: 15px;
  margin: 0 12px;
  width: 100%;
}
.chat-area-footer input::placeholder {
  color: var(--input-chat-color);
}

.detail-area-header {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.detail-area-header .msg-profile {
  margin-right: 0;
  width: 60px;
  height: 60px;
  margin-bottom: 15px;
}

.detail-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
}

.detail-subtitle {
  font-size: 12px;
  font-weight: 600;
  color: var(--msg-date);
}

.detail-button {
  border: 0;
  background-color: var(--button-bg-color);
  padding: 10px 14px;
  border-radius: 5px;
  color: var(--button-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-grow: 1;
  font-weight: 500;
}
.detail-button svg {
  width: 18px;
  margin-right: 10px;
}
.detail-button:last-child {
  margin-left: 8px;
}

.detail-buttons {
  margin-top: 20px;
  display: flex;
  width: 100%;
}

.detail-area input {
  background-color: transparent;
  border: none;
  width: 100%;
  color: var(--body-color);
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56.966 56.966' fill='%23c1c7cd'%3e%3cpath d='M55.146 51.887L41.588 37.786A22.926 22.926 0 0046.984 23c0-12.682-10.318-23-23-23s-23 10.318-23 23 10.318 23 23 23c4.761 0 9.298-1.436 13.177-4.162l13.661 14.208c.571.593 1.339.92 2.162.92.779 0 1.518-.297 2.079-.837a3.004 3.004 0 00.083-4.242zM23.984 6c9.374 0 17 7.626 17 17s-7.626 17-17 17-17-7.626-17-17 7.626-17 17-17z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-size: 16px;
  background-position: 100%;
  font-family: var(--body-font);
  font-weight: 600;
  font-size: 14px;
  border-bottom: 1px solid var(--border-color);
  padding: 14px 0;
}
.detail-area input::placeholder {
  color: var(--detail-font-color);
}

.detail-changes {
  margin-top: 40px;
}

.detail-change {
  color: var(--detail-font-color);
  font-family: var(--body-font);
  font-weight: 600;
  font-size: 14px;
  border-bottom: 1px solid var(--border-color);
  padding: 14px 0;
  display: flex;
}
.detail-change svg {
  width: 16px;
  margin-left: auto;
}

.colors {
  display: flex;
  margin-left: auto;
}

.color {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  cursor: pointer;
}
.color.selected {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%23fff' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 10px;
  background-position: center;
  background-repeat: no-repeat;
}
.color:not(:last-child) {
  margin-right: 4px;
}

.detail-photo-title {
  display: flex;
  align-items: center;
}
.detail-photo-title svg {
  width: 16px;
}

.detail-photos {
  margin-top: 30px;
  text-align: center;
}

.detail-photo-title {
  color: var(--detail-font-color);
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 20px;
}
.detail-photo-title svg {
  margin-right: 8px;
}

.detail-photo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 6px;
  grid-row-gap: 6px;
  grid-template-rows: repeat(3, 60px);
}
.detail-photo-grid img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 8px;
  object-position: center;
}

.view-more {
  color: var(--theme-color);
  font-weight: 600;
  font-size: 15px;
  margin: 25px 0;
}

.follow-me {
  text-decoration: none;
  font-size: 14px;
  width: calc(100% + 60px);
  margin-left: -30px;
  display: flex;
  align-items: center;
  margin-top: auto;
  overflow: hidden;
  color: #9c9cab;
  padding: 0 20px;
  height: 52px;
  flex-shrink: 0;
  position: relative;
  justify-content: center;
}
.follow-me svg {
  width: 16px;
  height: 16px;
  margin-right: 8px;
}

.follow-text {
  display: flex;
  align-items: center;
  transition: 0.3s;
}

.follow-me:hover .follow-text {
  transform: translateY(100%);
}
.follow-me:hover .developer {
  top: 0;
}

.developer {
  position: absolute;
  color: var(--detail-font-color);
  font-weight: 600;
  left: 0;
  top: -100%;
  display: flex;
  transition: 0.3s;
  padding: 0 20px;
  align-items: center;
  justify-content: center;
  background-color: var(--developer-color);
  width: 100%;
  height: 100%;
}

.developer img {
  border-radius: 50%;
  width: 26px;
  height: 26px;
  object-fit: cover;
  margin-right: 10px;
}

.dark-mode .search-bar input,
.dark-mode .detail-area input {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56.966 56.966' fill='%236f7073'%3e%3cpath d='M55.146 51.887L41.588 37.786A22.926 22.926 0 0046.984 23c0-12.682-10.318-23-23-23s-23 10.318-23 23 10.318 23 23 23c4.761 0 9.298-1.436 13.177-4.162l13.661 14.208c.571.593 1.339.92 2.162.92.779 0 1.518-.297 2.079-.837a3.004 3.004 0 00.083-4.242zM23.984 6c9.374 0 17 7.626 17 17s-7.626 17-17 17-17-7.626-17-17 7.626-17 17-17z'/%3e%3c/svg%3e");
}
.dark-mode .dark-light svg {
  fill: #ffce45;
  stroke: #ffce45;
}
.dark-mode .chat-area-group span {
  color: #d1d1d2;
}

.chat-area-group {
  flex-shrink: 0;
  display: flex;
}
.chat-area-group * {
  border: 2px solid var(--theme-bg-color);
}
.chat-area-group * + * {
  margin-left: -5px;
}
.chat-area-group span {
  width: 32px;
  height: 32px;
  background-color: var(--button-bg-color);
  color: var(--theme-color);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
}

@media (max-width: 1120px) {
  .detail-area {
    display: none;
  }
}
@media (max-width: 780px) {
  .conversation-area {
    display: none;
  }

  .search-bar {
    margin-left: 0;
    flex-grow: 1;
  }
  .search-bar input {
    padding-right: 10px;
  }
}

这个代码是为了防止我忘记使用的，谨慎使用