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;
}
}这个代码是为了防止我忘记使用的，谨慎使用