主要对于一些细节进行完善
传送门：
增加头像
交流有点单调，加点头像好看点，主要是写了一个看到一个比较好玩的头像，想试试。不过也是这时候才发现了自己的一个坑。由于发送消息容器和回复容器是分开的，然后我在添加头像容器的时候，发现回复容器没有容器包裹直接放在外面，结果添加的时候遇到一些麻烦。
处理各种报错类型
对于超时异常、格式异常、请求回复异常。以前的异常处理很粗暴，几乎没有处理，结果异常产生的时候显示在前台就很难看。现在都捕获转成json字符串高亮显示，总算看起来是舒服了一点。
添加终止按钮
为了体验好一点。在接收消息的时候显示一个终止按钮，点击即可终止当前的回复消息接收。因为通过enter和发送按钮事件发送消息。所以需要给他们都加上终止逻辑和终止标记。最后，在消息接收done的时候重置终止标记。
最后，头像样式代码奉上，小东西真折腾人。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
img {
--s: 240px;
--c1: #c02942;
/* 定义边框和底部阴影的颜色 */
--c2: #ecd078;
/* 定义渐变背景的主要颜色 */
--b: 3px;
/* 定义边框的宽度 */
--f: 1;
/* 定义图片的初始缩放比例 */
--bgOption: content-box no-repeat center/ calc(100% / var(--f)) 100%;
/* 设置背景大小和位置，确保背景图案居中且缩放正确 */
--shrink: calc((var(--s) / var(--f) - var(--s)) / 2 - var(--b));
/* 计算缩放后的调整值 */
width: var(--s);
height: var(--s);
cursor: pointer;
transition: 0.5s;
padding-top: 100px;
outline-offset: var(--shrink);
transform: scale(var(--f));
border-radius: 0 0 999px 999px;
box-shadow: 0 -1 0 var(--b) var(--c1);
background: radial-gradient(circle closest-side,
var(--c2) calc(99% - var(--b)),
var(--c1) calc(100% - var(--b)),
var(--c1) 99%,
transparent 100%) var(--bgOption);
-webkit-mask: linear-gradient(#000 0 0) no-repeat center calc(0px - var(--shrink)) / calc(100% / var(--f) - 2 * var(--b)) 50%, radial-gradient(circle closest-side, #000 99%, transparent) var(--bgOption);
}
img:hover {
--f: 1.35;
}
</style>
</head>
<body>
<img src="">
</body>
</html>
