代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>聊天窗口</title>
<link rel="icon" href="static/images/chat.png" type="image/png">
<!-- Bundle Styles -->
<link rel="stylesheet" href="vendor/bundle.css">
<link rel="stylesheet" href="vendor/enjoyhint/enjoyhint.css">
<!-- App styles -->
<link rel="stylesheet" href="static/css/app.min.css">
<link href="semantic/dist/semantic.min.css" rel="stylesheet">
<link rel="stylesheet" href="static/css/custom.css">
</head>
<body >
<!-- page loading -->
<div class="page-loading"></div>
<!-- ./ page loading -->
<!-- page tour modal -->
<!--<div class="modal fade" id="pageTour" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-zoom" role="document">
<div class="modal-content">
<div class="modal-body text-center pt-5">
<div class="row">
<div class="col-md-6 offset-3">
<figure>
<img src="static/media/svg/undraw_product_tour_foyt.svg" class="img-fluid" alt="image">
</figure>
<p class="lead mt-5">Would you like to take a short page tour?</p>
</div>
</div>
</div>
<div class="modal-footer justify-content-center">
<button type="button" class="btn btn-primary start-tour">开始游览</button>
<button type="button" class="btn btn-link" data-dismiss="modal" aria-label="Close">Close</button>
</div>
</div>
</div>
</div>-->
<!-- 断开连接 -->
<!--<div class="modal fade" id="disconnected" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-zoom" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="row mb-5">
<div class="col-md-6 offset-3">
<img src="static/media/svg/undraw_warning_cyit.svg" class="img-fluid" alt="image">
</div>
</div>
<p class="lead text-center">应用程序已断开连接</p>
</div>
<div class="modal-footer justify-content-center">
<button type="button" class="btn btn-success btn-lg">重新连接</button>
<a href="login.html" class="btn btn-link">登出</a>
</div>
</div>
</div>
</div>-->
<!-- 语音通话 -->
<div class="modal call fade" id="call" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-zoom" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="call">
<div>
<figure class="mb-4 avatar avatar-xl">
<img src="static/media/img/women_avatar1.jpg" class="rounded-circle" alt="image">
</figure>
<h4>张朝阳 <span class="text-success">连线中...</span></h4>
<div class="action-button">
<button type="button" class="btn btn-danger btn-floating btn-lg" data-dismiss="modal">
<i data-feather="x"></i>
</button>
<button type="button" class="btn btn-success btn-pulse btn-floating btn-lg">
<i data-feather="phone"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 视频通话 -->
<div class="modal call fade" id="videoCall" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-zoom" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="call">
<div>
<figure class="mb-4 avatar avatar-xl">
<img src="static/media/img/women_avatar1.jpg" class="rounded-circle" alt="image">
</figure>
<h4>张朝阳 <span class="text-success">视频通话...</span></h4>
<div class="action-button">
<button type="button" class="btn btn-danger btn-floating btn-lg" data-dismiss="modal">
<i data-feather="x"></i>
</button>
<button type="button" class="btn btn-success btn-pulse btn-floating btn-lg">
<i data-feather="video"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 加好友 -->
<div class="modal fade" id="addFriends" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-zoom" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">
<i data-feather="user-plus" class="mr-2"></i> 添加好友
</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<i class="ti-close"></i>
</button>
</div>
<div class="modal-body">
<div class="alert alert-info">发送邀请给朋友.</div>
<form>
<div class="form-group">
<label for="emails" class="col-form-label">用户手机号</label>
<input type="text" class="form-control" id="emails">
</div>
<div class="form-group">
<label for="message" class="col-form-label">验证信息</label>
<textarea class="form-control" id="message"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">提交</button>
</div>
</div>
</div>
</div>
<!-- 新群组模态框 -->
<div class="modal fade" id="newGroup" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-zoom" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">
<i data-feather="users" class="mr-2"></i> 新的群组
</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<i class="ti-close"></i>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="group_name" class="col-form-label">群名</label>
<div class="input-group">
<input type="text" class="form-control" id="group_name">
<div class="input-group-append">
<button class="btn btn-light" data-toggle="tooltip" title="表情" type="button">
<i data-feather="smile"></i>
</button>
</div>
</div>
</div>
<p class="mb-2">组员</p>
<div class="form-group">
<div class="avatar-group">
<figure class="avatar" data-toggle="tooltip" title="雏田">
<span class="avatar-title bg-success rounded-circle">T</span>
</figure>
<figure class="avatar" data-toggle="tooltip" title="小樱">
<img src="static/media/img/women_avatar4.jpg" class="rounded-circle" alt="image">
</figure>
<figure class="avatar" data-toggle="tooltip" title="鸣人">
<span class="avatar-title bg-warning rounded-circle">M</span>
</figure>
<figure class="avatar" data-toggle="tooltip" title="佐助">
<img src="static/media/img/man_avatar1.jpg" class="rounded-circle" alt="image">
</figure>
<figure class="avatar" data-toggle="tooltip" title="卡卡西">
<span class="avatar-title bg-info rounded-circle">B</span>
</figure>
<a href="#" title="Add friends">
<figure class="avatar">
<span class="avatar-title bg-primary rounded-circle">
<i data-feather="plus"></i>
</span>
</figure>
</a>
</div>
</div>
<div class="form-group">
<label for="description" class="col-form-label">描述</label>
<textarea class="form-control" id="description"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">创建群组</button>
</div>
</div>
</div>
</div>
<!-- 设置模组 -->
<div class="modal fade" id="settingModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-zoom" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">
<i data-feather="settings" class="mr-2"></i> 设置
</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<i class="ti-close"></i>
</button>
</div>
<div class="modal-body">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#account" role="tab" aria-controls="account"
aria-selected="true">账户</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#notification" role="tab"
aria-controls="notification" aria-selected="false">通知</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#contact" role="tab" aria-controls="contact"
aria-selected="false">安全</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane show active" id="account" role="tabpanel">
<div class="form-item custom-control custom-switch">
<input type="checkbox" class="custom-control-input" checked id="customSwitch1">
<label class="custom-control-label" for="customSwitch1">允许访问的用户</label>
</div>
<div class="form-item custom-control custom-switch">
<input type="checkbox" class="custom-control-input" checked id="customSwitch2">
<label class="custom-control-label" for="customSwitch2">确认用户请求</label>
</div>
<div class="form-item custom-control custom-switch">
<input type="checkbox" class="custom-control-input" checked id="customSwitch3">
<label class="custom-control-label" for="customSwitch3">个人资料隐私</label>
</div>
<div class="form-item custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="customSwitch4">
<label class="custom-control-label" for="customSwitch4">开发者选项</label>
</div>
<div class="form-item custom-control custom-switch">
<input type="checkbox" class="custom-control-input" checked id="customSwitch5">
<label class="custom-control-label" for="customSwitch5">双重安全验证</label>
</div>
</div>
<div class="tab-pane" id="notification" role="tabpanel">
<div class="form-item custom-control custom-switch">
<input type="checkbox" class="custom-control-input" checked id="customSwitch6">
<label class="custom-control-label" for="customSwitch6">允许手机通知</label>
</div>
<div class="form-item custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="customSwitch7">
<label class="custom-control-label" for="customSwitch7">好友通知</label>
</div>
<div class="form-item custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="customSwitch8">
<label class="custom-control-label" for="customSwitch8">通过电子邮件通知</label>
</div>
</div>
<div class="tab-pane" id="contact" role="tabpanel">
<div class="form-item custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="customSwitch9">
<label class="custom-control-label" for="customSwitch9">建议定期修改密码.</label>
</div>
<div class="form-item custom-control custom-switch">
<input type="checkbox" class="custom-control-input" checked id="customSwitch10">
<label class="custom-control-label" for="customSwitch10">让我知道您帐户中的可疑之处</label>
</div>
<div class="form-item">
<p>
<a class="btn btn-light" data-toggle="collapse" href="#collapseExample" role="button"
aria-expanded="false"
aria-controls="collapseExample">
<i data-feather="plus" class="mr-2"></i> 安全问题
</a>
</p>
<div class="collapse" id="collapseExample">
<div class="form-group">
<input type="text" class="form-control" placeholder="Question 1">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Answer 1">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Question 2">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Answer 2">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
<!-- 编辑个人资料 -->
<div class="modal fade" id="editProfileModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-zoom" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">
<i data-feather="edit-2" class="mr-2"></i> 编辑个人材料
</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<i class="ti-close"></i>
</button>
</div>
<div class="modal-body">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#personal" role="tab"
aria-controls="personal" aria-selected="true">个人</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#about" role="tab" aria-controls="about"
aria-selected="false">关于</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#social-links" role="tab"
aria-controls="social-links" aria-selected="false">社交关系</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane show active" id="personal" role="tabpanel">
<form>
<div class="form-group">
<label for="fullname" class="col-form-label">全名</label>
<div class="input-group">
<input type="text" class="form-control" id="fullname">
<div class="input-group-append">
<span class="input-group-text">
<i data-feather="user"></i>
</span>
</div>
</div>
</div>
<div class="form-group">
<label class="col-form-label">头像</label>
<div class="d-flex align-items-center">
<div>
<figure class="avatar mr-3 item-rtl">
<img src="static/media/img/man_avatar4.jpg" class="rounded-circle"
alt="image">
</figure>
</div>
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFile">
<label class="custom-file-label" for="customFile">选择文件</label>
</div>
</div>
</div>
<div class="form-group">
<label for="city" class="col-form-label">城市</label>
<div class="input-group">
<input type="text" class="form-control" id="city" placeholder="例如:中国上海">
<div class="input-group-append">
<span class="input-group-text">
<i data-feather="target"></i>
</span>
</div>
</div>
</div>
<div class="form-group">
<label for="phone" class="col-form-label">手机号码</label>
<div class="input-group">
<input type="text" class="form-control" id="phone" placeholder="请输入您的手机号">
<div class="input-group-append">
<span class="input-group-text">
<i data-feather="phone"></i>
</span>
</div>
</div>
</div>
<div class="form-group">
<label for="website" class="col-form-label">网站</label>
<input type="text" class="form-control" id="website" placeholder="https://">
</div>
</form>
</div>
<div class="tab-pane" id="about" role="tabpanel">
<form>
<div class="form-group">
<label for="about-text" class="col-form-label">自我描述</label>
<textarea class="form-control" id="about-text"></textarea>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" checked id="customCheck1">
<label class="custom-control-label" for="customCheck1">查看资料</label>
</div>
</form>
</div>
<div class="tab-pane" id="social-links" role="tabpanel">
<form>
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" placeholder="Username">
<div class="input-group-append">
<span class="input-group-text bg-facebook">
<i class="ti-facebook"></i>
</span>
</div>
</div>
</div>
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" placeholder="Username">
<div class="input-group-append">
<span class="input-group-text bg-twitter">
<i class="ti-twitter"></i>
</span>
</div>
</div>
</div>
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" placeholder="Username">
<div class="input-group-append">
<span class="input-group-text bg-instagram">
<i class="ti-instagram"></i>
</span>
</div>
</div>
</div>
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" placeholder="Username">
<div class="input-group-append">
<span class="input-group-text bg-linkedin">
<i class="ti-linkedin"></i>
</span>
</div>
</div>
</div>
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" placeholder="Username">
<div class="input-group-append">
<span class="input-group-text bg-dribbble">
<i class="ti-dribbble"></i>
</span>
</div>
</div>
</div>
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" placeholder="Username">
<div class="input-group-append">
<span class="input-group-text bg-youtube">
<i class="ti-youtube"></i>
</span>
</div>
</div>
</div>
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" placeholder="Username">
<div class="input-group-append">
<span class="input-group-text bg-google">
<i class="ti-google"></i>
</span>
</div>
</div>
</div>
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" placeholder="Username">
<div class="input-group-append">
<span class="input-group-text bg-whatsapp">
<i class="fa fa-whatsapp"></i>
</span>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">保存</button>
</div>
</div>
</div>
</div>
<!-- 布局 -->
<div class="layout">
<!-- 左侧导航栏 -->
<nav class="navigation">
<div class="nav-group">
<ul>
<li class="logo">
<a href="index.html">
<h1 class="ui header teal item" title="退出聊天">PG</h1>
</a>
</li>
<li>
<a class="active" data-navigation-target="chats" href="#" data-toggle="tooltip" title="聊天"
data-placement="right">
<span class="badge badge-warning"></span>
<i data-feather="message-circle"></i>
</a>
</li>
<li>
<a data-navigation-target="friends" href="#" data-toggle="tooltip"
title="好友列表" data-placement="right">
<span class="badge badge-danger"></span>
<i data-feather="user"></i>
</a>
</li>
<li>
<a data-navigation-target="favorites" data-toggle="tooltip" title="特别关心" data-placement="right"
href="#">
<i data-feather="star"></i>
</a>
</li>
<li class="brackets">
<a data-navigation-target="archived" href="#" data-toggle="tooltip"
title="存档" data-placement="right">
<i data-feather="archive"></i>
</a>
</li>
<li>
<a href="#" class="dark-light-switcher" data-toggle="tooltip" title="夜间模式"
data-placement="right">
<i data-feather="moon"></i>
</a>
</li>
<li data-toggle="tooltip" title="用户菜单" data-placement="right">
<a href="./login.html" data-toggle="dropdown">
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=249589786,2941481629&fm=26&gp=0.jpg" alt=""
class="ui avatar image" id="login-user-avatar">
</a>
<div class="dropdown-menu">
<a href="#" class="dropdown-item" data-toggle="modal" data-target="#editProfileModal">编辑个人资料</a>
<a href="#" class="dropdown-item" data-navigation-target="contact-information">个人资料</a>
<a href="#" class="dropdown-item" data-toggle="modal" data-target="#settingModal">设置</a>
<div class="dropdown-divider"></div>
<a href="login.html" class="dropdown-item text-danger">登出</a>
</div>
</li>
</ul>
</div>
</nav>
<!-- 中间内容 -->
<div class="content ">
<!-- 侧边栏组 -->
<div class="sidebar-group">
<!-- 聊天分栏 -->
<div id="chats" class="sidebar active">
<header>
<span>聊天</span>
<ul class="list-inline">
<li class="list-inline-item" data-toggle="tooltip" title="新建群聊">
<a class="btn btn-outline-light" href="#" data-toggle="modal" data-target="#newGroup">
<i data-feather="users"></i>
</a>
</li>
<li class="list-inline-item" data-toggle="tooltip" title="添加好友">
<a class="btn btn-outline-light" href="#" data-toggle="modal" data-target="#addFriends">
<i data-feather="plus-circle"></i>
</a>
</li>
<li class="list-inline-item d-xl-none d-inline">
<a href="#" class="btn btn-outline-light text-danger sidebar-close">
<i data-feather="x"></i>
</a>
</li>
</ul>
</header>
<form>
<input type="text" class="form-control" placeholder="Search..">
</form>
<div class="sidebar-body">
<!--figures store here-->
<ul class="list-group list-group-flush">
</ul>
</div>
</div>
<!-- 好友分栏 -->
<!-- 特别关心分栏 -->
<div id="favorites" class="sidebar">
<header>
<span>特别关心</span>
<ul class="list-inline">
<li class="list-inline-item d-xl-none d-inline">
<a href="#" class="btn btn-outline-light text-danger sidebar-close">
<i data-feather="x"></i>
</a>
</li>
</ul>
</header>
<form>
<input type="text" class="form-control" placeholder="Search...">
</form>
<div class="sidebar-body">
<ul class="list-group list-group-flush users-list">
<li class="list-group-item">
<div class="users-list-body">
<div>
<h5>迪丽热巴</h5>
<p>你知道你对我有多么重要吗？</p>
</div>
<div class="users-list-action">
<div class="action-toggle">
<div class="dropdown">
<a data-toggle="dropdown" href="#">
<i data-feather="more-horizontal"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<a href="#" class="dropdown-item">打开</a>
<a href="#" class="dropdown-item">移除特别关心</a>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="list-group-item">
<div class="users-list-body">
<div>
<h5>古力娜扎</h5>
<p>你明白我对你的心意吗？</p>
</div>
<div class="users-list-action">
<div class="action-toggle">
<div class="dropdown">
<a data-toggle="dropdown" href="#">
<i data-feather="more-horizontal"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<a href="#" class="dropdown-item">打开</a>
<a href="#" class="dropdown-item">移除特别关心</a>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="list-group-item">
<div class="users-list-body">
<div>
<h5>刘亦菲</h5>
<p>其实我最想做你的姑姑呀</p>
</div>
<div class="users-list-action">
<div class="action-toggle">
<div class="dropdown">
<a data-toggle="dropdown" href="#">
<i data-feather="more-horizontal"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<a href="#" class="dropdown-item">打开</a>
<a href="#" class="dropdown-item">移除特别关心</a>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="list-group-item">
<div class="users-list-body">
<div>
<h5>小米粥</h5>
<p>宝宝饿了吧，妈妈给你喂奶</p>
</div>
<div class="users-list-action">
<div class="action-toggle">
<div class="dropdown">
<a data-toggle="dropdown" href="#">
<i data-feather="more-horizontal"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<a href="#" class="dropdown-item">打开</a>
<a href="#" class="dropdown-item">移除特别关心</a>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<!-- 存档分栏 -->
<div id="archived" class="sidebar">
<header>
<span>存档</span>
<ul class="list-inline">
<li class="list-inline-item d-xl-none d-inline">
<a href="#" class="btn btn-outline-light text-danger sidebar-close">
<i data-feather="x"></i>
</a>
</li>
</ul>
</header>
<form>
<input type="text" class="form-control" placeholder="Search...">
</form>
<div class="sidebar-body">
<ul class="list-group list-group-flush users-list">
<li class="list-group-item">
<figure class="avatar">
<span class="avatar-title bg-danger rounded-circle">D</span>
</figure>
<div class="users-list-body">
<div>D
<h5>迪丽热巴</h5>
<p>你知道你对我有多么重要吗？</p>
</div>
<div class="users-list-action">
<div class="action-toggle">
<div class="dropdown">
<a data-toggle="dropdown" href="#">
<i data-feather="more-horizontal"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<a href="#" class="dropdown-item">打开</a>
<a href="#" class="dropdown-item">恢复</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item text-danger">删除</a>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="list-group-item">
<figure class="avatar">
<span class="avatar-title bg-secondary rounded-circle">G</span>
</figure>
<div class="users-list-body">
<div>
<h5>古力娜扎</h5>
<p>你明白我对你的心意吗？</p>
</div>
<div class="users-list-action">
<div class="action-toggle">
<div class="dropdown">
<a data-toggle="dropdown" href="#">
<i data-feather="more-horizontal"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<a href="#" class="dropdown-item">打开</a>
<a href="#" class="dropdown-item">恢复</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item text-danger">删除</a>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- 聊天主体内容 -->
<div class=" chat" id="chatContent" style="display: none;">
<div class="chat-header">
<div class="chat-header-user">
<i class="angle left icon left floated big " id="hideContent"></i>
<figure class="avatar">
<img src="static/media/img/man_avatar3.jpg" class="rounded-circle" alt="image">
</figure>
<div id="toUser">
<h5 class="nickName">特朗普</h5>
<!--<small class="text-success">
<i>正在输入...</i>
</small>-->
</div>
</div>
<div class="chat-header-action">
<ul class="list-inline">
<li class="list-inline-item d-xl-none d-inline">
<a href="#" class="btn btn-outline-light mobile-navigation-button">
<i data-feather="menu"></i>
</a>
</li>
<li class="list-inline-item" data-toggle="tooltip" title="语音通话">
<a href="#" class="btn btn-outline-light text-success" data-toggle="modal"
data-target="#call">
<i data-feather="phone"></i>
</a>
</li>
<li class="list-inline-item" data-toggle="tooltip" title="视频通话">
<a href="#" class="btn btn-outline-light text-warning" data-toggle="modal"
data-target="#videoCall">
<i data-feather="video"></i>
</a>
</li>
<li class="list-inline-item">
<a href="#" class="btn btn-outline-light" data-toggle="dropdown">
<i data-feather="more-horizontal"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<a href="#" data-navigation-target="contact-information"
class="dropdown-item">个人资料</a>
<a href="#" class="dropdown-item">添加到存档</a>
<a href="#" class="dropdown-item">删除</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item text-danger">关闭</a>
</div>
</li>
</ul>
</div>
</div>
<div class="chat-body">
<!--chat messages store here-->
<div class="messages">
</div>
</div>
<div class="chat-footer">
<form>
<div>
<button class="btn btn-light mr-3" data-toggle="tooltip" title="Emoji" type="button">
<i data-feather="smile"></i>
</button>
</div>
<input type="text" id="message-send" class="form-control" placeholder="Write a message.">
<div class="form-buttons">
<button class="btn btn-light" data-toggle="tooltip" title="Add files" type="button">
<i data-feather="paperclip"></i>
</button>
<button class="btn btn-light d-sm-none d-block" data-toggle="tooltip"
title="Send a voice record" type="button">
<i data-feather="mic"></i>
</button>
<button class="btn btn-primary" type="button" id="send" >
<i data-feather="send"></i>
</button>
</div>
</form>
</div>
</div>
<div class="sidebar-group">
<div id="contact-information" class="sidebar">
<header>
<span>个人资料</span>
<ul class="list-inline">
<li class="list-inline-item">
<a href="#" class="btn btn-outline-light text-danger sidebar-close">
<i data-feather="x"></i>
</a>
</li>
</ul>
</header>
<div class="sidebar-body ">
<div class="pl-4 pr-4">
<div class="text-center">
<figure class="avatar avatar-xl mb-4">
<img src="static/media/img/women_avatar5.jpg" class="rounded-circle" alt="image">
</figure>
<h5 class="mb-1">吴彦祖</h5>
<small class="text-muted font-italic">最后一次会话：今天</small>
<ul class="nav nav-tabs justify-content-center mt-5" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab"
aria-controls="home" aria-selected="true">关于</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab"
aria-controls="profile" aria-selected="false">媒体</a>
</li>
</ul>
</div>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<p class="text-muted">千万别相信，什么人生不能输在起跑线上这样的话。只有百米短跑才在乎起跑线，人生是一场马拉松。
马拉松起跑你看谁站在起跑线上，大家都翁一堆出发，谁能坚持到最后才最关键。</p>
<div class="mt-4 mb-4">
<h6>手机号码</h6>
<p class="text-muted">16626636666</p>
</div>
<div class="mt-4 mb-4">
<h6>城市</h6>
<p class="text-muted">中国/徐州</p>
</div>
<div class="mt-4 mb-4">
<h6>电子邮箱</h6>
<p>
<a href="#">123456@gmail.com</a>
</p>
</div>
<div class="mt-4 mb-4">
<h6 class="mb-3">社交媒体帐户</h6>
<ul class="list-inline social-links">
<li class="list-inline-item">
<a href="#" class="btn btn-sm btn-floating btn-facebook"
data-toggle="tooltip" title="Facebook">
<i class="fa fa-facebook"></i>
</a>
</li>
<li class="list-inline-item">
<a href="#" class="btn btn-sm btn-floating btn-twitter"
data-toggle="tooltip" title="Twitter">
<i class="fa fa-twitter"></i>
</a>
</li>
<li class="list-inline-item">
<a href="#" class="btn btn-sm btn-floating btn-dribbble"
data-toggle="tooltip" title="Dribbble">
<i class="fa fa-dribbble"></i>
</a>
</li>
<li class="list-inline-item">
<a href="#" class="btn btn-sm btn-floating btn-whatsapp"
data-toggle="tooltip" title="Whatsapp">
<i class="fa fa-whatsapp"></i>
</a>
</li>
<li class="list-inline-item">
<a href="#" class="btn btn-sm btn-floating btn-linkedin"
data-toggle="tooltip" title="Linkedin">
<i class="fa fa-linkedin"></i>
</a>
</li>
<li class="list-inline-item">
<a href="#" class="btn btn-sm btn-floating btn-google" data-toggle="tooltip"
title="Google">
<i class="fa fa-google"></i>
</a>
</li>
<li class="list-inline-item">
<a href="#" class="btn btn-sm btn-floating btn-behance"
data-toggle="tooltip" title="Behance">
<i class="fa fa-behance"></i>
</a>
</li>
<li class="list-inline-item">
<a href="#" class="btn btn-sm btn-floating btn-instagram"
data-toggle="tooltip" title="Instagram">
<i class="fa fa-instagram"></i>
</a>
</li>
</ul>
</div>
<div class="mt-4 mb-4">
<h6 class="mb-3">设置</h6>
<div class="form-group">
<div class="form-item custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="customSwitch11">
<label class="custom-control-label" for="customSwitch11">屏蔽</label>
</div>
</div>
<div class="form-group">
<div class="form-item custom-control custom-switch">
<input type="checkbox" class="custom-control-input" checked=""
id="customSwitch12">
<label class="custom-control-label" for="customSwitch12">静音</label>
</div>
</div>
<div class="form-group">
<div class="form-item custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="customSwitch13">
<label class="custom-control-label" for="customSwitch13">收到通知</label>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
<h6 class="mb-3 d-flex align-items-center justify-content-between">
<span>最近文件</span>
<a href="#" class="btn btn-link small">
<i data-feather="upload" class="mr-2"></i> Upload
</a>
</h6>
<div>
<ul class="list-group list-group-flush">
<li class="list-group-item pl-0 pr-0 d-flex align-items-center">
<a href="#">
<i class="fa fa-file-pdf-o text-danger mr-2"></i> 富婆通讯录.pdf
</a>
</li>
<li class="list-group-item pl-0 pr-0 d-flex align-items-center">
<a href="#">
<i class="fa fa-image text-muted mr-2"></i> guaguan.png
</a>
</li>
<li class="list-group-item pl-0 pr-0 d-flex align-items-center">
<a href="#">
<i class="fa fa-file-excel-o text-success mr-2"></i>
华软年度报表.xlsx
</a>
</li>
<li class="list-group-item pl-0 pr-0 d-flex align-items-center">
<a href="#">
<i class="fa fa-file-text-o text-warning mr-2"></i> 葵花宝典.txt
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bundle -->
<script src="https://www.jq22.com/jquery/jquery-3.3.1.js"></script>
<script src="vendor/bundle.js"></script>
<script src="vendor/feather.min.js"></script>
<script src="vendor/enjoyhint/enjoyhint.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
<script src="./util/request.js"></script>
<!-- App scripts -->
<script src="dist/js/app.min.js"></script>
<!-- Examples -->
<script src="static/js/messages.js"></script>
<script>
// let messages = new ChatRecode()
let messages = null
let recodes = new Map()
//let nick = null
// 判断登录状态
$http({
url: 'user/userInfo',
method: 'GET'
}).then(response => {
// 拿到状态码，判断请求状态。
const code = response.code
// 这里如果code为200，证明用户已经登录, 所以需要跳转到首页
if (code === 200) {
//console.log(response.data)
let socket = null
const user = {
userId: response.data.id,
nickName: response.data.nickname/*,
avatar: response.data.avatar*/
}
$('#login-user-avatar').attr('src', response.data.avatar)
const chatInfo = encodeURIComponent('{' + JSON.stringify(user) + '}')
const url = 'ws://localhost:3000/WebSocketLink/' + chatInfo
if('WebSocket' in window){
socket = new WebSocket(url)
}else{
alert('当前不支持聊天')
}
//2.open：当和WebSocket服务连接成功的时候触发
socket.addEventListener('open',function(){
// alert('连接服务成功')
})
let toUserId = 0
//4.接收WebSocket服务的数据
socket.addEventListener('message',function(e){
const msg = JSON.parse(e.data)
const type = msg.type
if(type == 0){
const listInfo = msg.listInfo;
$('.list-group-item').remove()
for (const key in listInfo) {
if(listInfo[key].userId != response.data.id){
$('.list-group').append(getList(listInfo[key]))
}
}
const userList = $(".list-group > li")
for (let i = 0;i < userList.length;i++){
userList[i].onclick = function (){
// showMessages()
$('.nickName').text(this.dataset.value)
//nick = this.dataset.value
toUserId = this.value
// messages = new ChatRecode()
if (messages == null){
messages = new ChatRecode()
recodes.set(this.value.toString(),messages)
}
//recodes.set(this.value,messages)
showMessages()
}
}
}else if (type == 12){
//console.log(recodes)
messages = recodes.get(msg.fromUserId.toString())
if (messages == null){
messages = new ChatRecode()
recodes.set(msg.fromUserId.toString(),messages)
}
messages.setData(new Date().getTime(),msg)
//console.log(messages.getMessages(10))
if(toUserId.toString() == msg.fromUserId.toString()){
$('.messages').append(getMessage(msg))
}
}else if(type == 32){
//加好友
}
})
$(function (){
$('#hideContent').click(function () {
$("#chatContent").hide()
toUserId = null
})
});
$('#send').click(function (){
const val = $("#message-send").val()
const chat = {
userId: response.data.id,
message: val,
toUserId: toUserId,
chatTime: new Date()
}
chat.type = 11
messages = recodes.get(toUserId.toString())
if (messages == null){
messages = new ChatRecode()
recodes.set(toUserId.toString(),messages)
}
messages.setData(new Date().getTime(),chat)
socket.send(JSON.stringify(chat))
$('.messages').append(getMessage(chat))
//console.log(messages.getMessages(10))
// $('#message-send')
//console.log(recodes)
})
$('#addFriend').click(function (){
const friendId = $('#search').val()
const friendInfo = {
type: 31,
toUserId: friendId
}
socket.send(JSON.stringify(friendInfo))
})
function showMessages(){
messages = recodes.get(toUserId.toString())
console.log(toUserId)
// console.log(messages)
console.log(messages.getMessages(10))
console.log(recodes)
$('.message-item').remove()
const msgList = messages.getMessages(10)
for (let i=0; i<msgList.length; i++){
// console.log(i,msgList[i]);
$('.messages').append(getMessage(msgList[i]))
}
$('#chatContent').show()
}
function getMessage(msg){
const type = msg.type
let html = null
const chatTime = msg.chatTime
const message = msg.message
//当type为11时，是当前用户发出去的消息
if(type == 11 || type == 13){
const nickName = user.nickName
html = `
<div class="message-item outgoing-message">
<div class="message-avatar">
<figure class="avatar">
<img src="dist/media/img/women_avatar5.jpg" class="rounded-circle" alt="image">
</figure>
<div>
<h5>${nickName}</h5>
<div class="time">${chatTime} <i class="ti-double-check text-info"></i></div>
</div>
</div>
<div class="message-content">
${message}
</div>
</div>
`
//当type为12时，是当前用户收到的消息
}else if(type == 12 || type == 14){
const nickName = $('.nickName').text()
//console.log(nickName)
html = `
<div class="message-item">
<div class="message-avatar">
<figure class="avatar">
<img src="dist/media/img/man_avatar3.jpg" class="rounded-circle" alt="image">
</figure>
<div>
<h5>${nickName}</h5>
<div class="time">${chatTime}</div>
</div>
</div>
<div class="message-content">
${message}
</div>
</div>
`
}
return html
}
function getList (listInfo){
const nickName = listInfo.nickName
const userId = listInfo.userId
const avatar = listInfo.avatar
const html = `
<li class="list-group-item" value="${userId}" data-value="${nickName}">
<figure class="avatar avatar-state-success">
<img src="${avatar}" class="rounded-circle" alt="image">
</figure>
<div class="users-list-body" >
<div>
<h5 class="text-primary">${nickName}</h5>
<p>What's up, how are you?</p>
</div>
<div class="users-list-action">
<div class="new-message-count">3</div>
<small class="text-primary">03:41 PM</small>
</div>
</div>
</li>
`
return html
}
} else {
alert('您还未登录')
location.href = 'login.html'
}
}).catch(error => {
})
</script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手
