代码拉取完成，页面将自动刷新
同步操作将从 hezihao/web_websocket 强制同步，此操作会覆盖自 Fork 仓库以来所做的任何修改，且无法恢复！！！
确定后同步将在后台操作，完成时将刷新页面，请耐心等待。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>聊天机器人</title>
<!-- 字体图标 -->
<link rel="stylesheet" href="https://at.alicdn.com/t/c/font_3736758_vxpb728fcyh.css">
<!-- <link rel="stylesheet" href="./css/font_3736758_vxpb728fcyh.css"> -->
<!-- 初始化样式 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset.css@2.0.2/reset.min.css">
<!-- <link rel="stylesheet" href="./css/reset.min.css"> -->
<!-- 公共 -->
<style>
* {
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
overflow: hidden;
}
.container {
width: 100%;
height: 100%;
background-color: #f5f4f4;
position: relative;
display: flex;
flex-direction: column;
}
</style>
<!-- 头部 -->
<style>
.top {
width: 100%;
height: 44px;
padding: 15px 7px 12px 21px;
background-color: #f5f4f4;
display: flex;
justify-content: space-between;
position: fixed;
top: 0;
left: 0;
}
</style>
<!-- 好友名字 -->
<style>
.friend_name {
width: 100%;
height: 44px;
padding: 14px 19px 14px;
background-color: #f5f4f4;
text-align: center;
position: fixed;
top: 44px;
left: 0;
}
.friend_name img {
width: 10px;
height: 16px;
position: absolute;
left: 19px;
}
</style>
<!-- 聊天区域 -->
<style>
.chat {
width: 100%;
/* 顶部留出88px的2个头部导航的高度 */
/* 底部留出89px内边距让出固定在底部的对话框-防止遮挡 */
/* 再多留出10px, 最后一条消息距离底部 */
padding: 88px 20px 99px;
flex: 1;
overflow-y: scroll;
}
/* 隐藏滚动条 */
.chat::-webkit-scrollbar {
display: none;
}
.chat ul {
padding-top: 20px;
}
.chat img {
width: 35px;
height: 35px;
border-radius: 50%;
}
.chat li {
display: flex;
align-items: top;
}
.chat li~li {
/* 除了第一个li, 选择所有的兄弟li标签 */
margin-top: 20px;
}
.chat .right {
display: flex;
justify-content: flex-end;
}
.left span {
margin-left: 10px;
border-radius: 1px 10px 1px 10px;
display: inline-block;
padding: 12px 16px;
background-image: linear-gradient(180deg, #B1E393 0%, #50D287 100%);
box-shadow: 2px 2px 10px 0px rgba(201, 201, 201, 0.1);
color: #FFFFFF;
}
.right span {
margin-right: 10px;
border-radius: 1px 10px 1px 10px;
display: inline-block;
padding: 12px 16px;
background: #FFFFFF;
border: 1px solid rgba(247, 247, 247, 1);
color: #000000;
}
</style>
<!-- 底部区域(发送消息) -->
<style>
.bottom_div {
width: 100%;
height: 89px;
position: fixed;
left: 0;
bottom: 0;
background: #FFFFFF;
box-shadow: 0px -5px 7px 0px rgba(168, 168, 168, 0.05);
border-radius: 25px 25px 0px 0px;
padding: 15px 15px 0px 15px;
}
/* 外框盒子 */
.send_box {
display: flex;
}
.send_box img {
width: 34px;
height: 34px;
}
/* 输入框背景 */
.input_bg {
height: 35px;
background: #f3f3f3;
border-radius: 50px;
padding-left: 17px;
flex: 1;
margin-right: 15px;
/* 让input宽度高度 */
display: flex;
}
.input_bg input {
border: 0;
outline: 0;
background-color: transparent;
display: inline-block;
width: 100%;
}
/* 修改输入框默认占位文字
webkit内核, firefox18-, firfox19+, 其他
*/
.input_bg input::-webkit-input-placeholder,
.input_bg input:-moz-placeholder,
.input_bg input::-moz-placeholder,
.input_bg input:-ms-input-placeholder {
font-family: PingFangSC-Regular;
font-size: 26px;
color: #C7C7C7;
letter-spacing: 0;
font-weight: 400;
}
/* 底部黑色小条 */
.black_border {
margin-top: 10px;
height: 34px;
text-align: center;
}
.black_border span {
display: inline-block;
background-color: #000;
width: 105px;
height: 4px;
border-radius: 50px;
}
</style>
<!-- PC端单独适配成移动大小 -->
<style>
/* PC端居中显示手机 */
@media screen and (min-width: 1200px) {
.container {
width: 375px;
margin: 0 auto;
border: 1px solid black;
/* 让fixed固定定位标签参照当前标签 */
transform: translate(0px);
}
}
</style>
</head>
<body>
<div class="container">
<!-- 头部 -->
<div class="top">
<span>9:41</span>
<div class="icon">
<i class="iconfont icon-xinhao"></i>
<i class="iconfont icon-xinhao1"></i>
<i class="iconfont icon-electricity-full"></i>
</div>
</div>
<!-- 好友名字 -->
<div class="friend_name">
<img src="./assets/arrow-left.png" alt="">
<span>使劲夸夸</span>
</div>
<!-- 聊天区域 -->
<div class="chat">
<ul class="chat_list">
<!-- 他的消息 -->
<li class="left">
<img src="./assets/you.png" alt="">
<span>小宝贝</span>
</li>
<!-- 我的消息 -->
<li class="right">
<span>干啥</span>
<img src="./assets/me.png" alt="">
</li>
</ul>
</div>
<!-- 底部固定 -->
<div class="bottom_div">
<!-- 发送消息 -->
<div class="send_box">
<div class="input_bg">
<input class="chat_input" type="text" placeholder="说点什么吧">
</div>
<img class="send_img" src="./assets/send.png" alt="">
</div>
<!-- 底部黑条 -->
<div class="black_border">
<span></span>
</div>
</div>
</div>
<!-- VConsole 调试工具 -->
<script src="./lib/vconsole.min.js"></script>
<script>
// 初始化VConsole
var vConsole = new window.VConsole();
// 聊天列表的容器，用于滚动聊天列表
const chatDiv = document.querySelector('.chat');
// 聊天列表
const chatList = document.querySelector('.chat_list');
// 输入框
const chatInput = document.querySelector('.chat_input');
// 发送按钮
const sendBtn = document.querySelector('.send_img');
// 聊天数据列表
const list = JSON.parse(localStorage.getItem('chatList')) || [];
// 目标ip地址
const ipAddress = '127.0.0.1:9001';
// 用户Id
const userId = 10086;
// 封装一个WebSocket对象
const webSocket = {
// 创建Socket对象
socket: new WebSocket(`ws://${ipAddress}/ws/${userId}`),
// 判断浏览器，是否支持WebSocket
isSupportWebSocket() {
return "WebSocket" in window;
},
// 初始化WebSocket
setup() {
// 连接成功
this.socket.onopen = function () {
console.log('WebSocket 连接成功...');
};
// 接收到服务端的消息
this.socket.onmessage = function (evt) {
// 获取消息文本
var receivedMsg = evt.data;
console.log('WebSocket 收到消息：' + receivedMsg);
// 添加对方的消息
addChatMsg2List(receivedMsg, false);
};
this.socket.onerror = function () {
console.log('WebSocket 连接发生错误...');
};
// 连接已关闭
this.socket.onclose = function () {
console.log('WebSocket 连接已关闭...');
};
},
// 发送消息
sendMessage(msg) {
this.socket.send(msg);
},
// 关闭连接
close() {
this.socket.close();
}
};
// 初始化
if (webSocket.isSupportWebSocket()) {
console.log('浏览器支持WebSocket！');
webSocket.setup();
} else {
alert('您的浏览器不支持WebSocket功能');
}
// 渲染函数
function render() {
const newList = list.map(({ isMe, text }) => {
if (isMe) {
return `
<li class="right">
<span>${text}</span>
<img src="./assets/me.png" alt="">
</li>
`;
} else {
return `
<li class="left">
<img src="./assets/you.png" alt="">
<span>${text}</span>
</li>
`;
}
});
chatList.innerHTML = newList.join('');
}
// 保存数据到本地
function syncData2Local() {
localStorage.setItem('chatList', JSON.stringify(list));
}
// 添加聊天消息到列表中
function addChatMsg2List(text, isMe) {
// 添加消息到数据列表中
list.push({
isMe: isMe,
text: text
});
// 保存数据到本地
syncData2Local();
// 重新渲染
render();
// 滚动列表到底部
scollList2Bottom();
}
// 滚动列表到底部
function scollList2Bottom() {
chatDiv.scrollTop = chatDiv.scrollHeight
}
// 处理发送
function handleSend() {
const content = chatInput.value.trim();
if (content === '') {
// alert('请输入你要发送的内容');
return;
}
// 添加我的消息
addChatMsg2List(content, true);
// 清空输入框
chatInput.value = '';
// 发送消息
webSocket.sendMessage(content);
}
// 发送按钮
sendBtn.addEventListener('click', function (e) {
handleSend();
});
// 键盘回车
window.addEventListener('keyup', function (e) {
if (e.key === 'Enter') {
handleSend();
}
});
// 首次渲染
render();
// 滚动到底部
scollList2Bottom();
</script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手