devbox
喵喵爱编程
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

vue + element UI 模拟制作微信页面对话机器人_elementui聊天机器人

作者：喵喵爱编程 | 2024-06-27 04:17:58

赞

踩

elementui聊天机器人
  1. <template>
  2.     <div style="height: 100%; width: 100%; background-color: #ededed">
  3.       <div class="wrap">
  4.         <!-- 头部 -->
  5.         <div class="titleBox">
  6.           <img
  7.             src="https://img-qn-2.51miz.com/preview/element/00/01/27/97/E-1279706-3813EBF9.jpg!/quality/90/unsharp/true/compress/true/format/jpg/fh/320"
  8.             alt=""
  9.             class="head_portrait"
  10.             style="margin-left: 20px; margin-right: 20px"
  11.           />
  12.           <span style="color: #fff">官方客服</span>
  13.           <!-- 在线状态弹框 -->
  14.           <el-popover placement="bottom" trigger="click">
  15.             <div class="stateBox2" @click="uploadState(1)">
  16.               <span class="state1"></span>
  17.               <span class="stateText">在线</span>
  18.             </div>
  19.             <div class="stateBox2" @click="uploadState(2)">
  20.               <span class="state2"></span>
  21.               <span class="stateText">离线</span>
  22.             </div>
  23.             <div class="stateBox2" @click="uploadState(3)">
  24.               <span class="state3"></span>
  25.               <span class="stateText">忙碌</span>
  26.             </div>
  27.             <div class="stateBox2" @click="uploadState(4)">
  28.               <span class="state4"></span>
  29.               <span class="stateText">退出</span>
  30.             </div>
  31.             <div class="stateBox" slot="reference" v-if="state == 1">
  32.               <span class="state1"></span>
  33.               <span class="stateText">在线</span>
  34.             </div>
  35.             <div class="stateBox" slot="reference" v-if="state == 2">
  36.               <span class="state2"></span>
  37.               <span class="stateText">离线</span>
  38.             </div>
  39.             <div class="stateBox" slot="reference" v-if="state == 3">
  40.               <span class="state3"></span>
  41.               <span class="stateText">忙碌</span>
  42.             </div>
  43.           </el-popover>
  44.         </div>
  45.         <!-- 底部 -->
  46.         <div class="infoBox">
  47.           <!-- 左边用户列表 -->
  48.           <div class="userList">
  49.             <div class="searchBox">
  50.               <el-input
  51.                 placeholder="请输入内容"
  52.                 v-model="search"
  53.                 class="input-with-select"
  54.                 size="mini"
  55.                 @input="inquire"
  56.               >
  57.                 <i
  58.                   class="el-icon-search el-input__icon"
  59.                   slot="suffix"
  60.                   @click="handleIconClick"
  61.                 >
  62.                 </i>
  63.               </el-input>
  64.               <el-button
  65.                 icon="el-icon-plus"
  66.                 size="mini"
  67.                 type="primary"
  68.                 @click="dialogVisible = true"
  69.               ></el-button>
  70.             </div>
  71.             <div class="userListBox">
  72.               <div
  73.                 v-for="(item, index) in userListData"
  74.                 :key="index"
  75.                 @click="getAct(item, index)"
  76.                 :class="item.id == act ? 'userFlexAct' : 'userFlex'"
  77.               >
  78.                 <div>
  79.                   <img
  80.                     :src="item.url"
  81.                     alt="头像"
  82.                     class="head_portrait2"
  83.                     style="margin-left: 20px"
  84.                   />
  85.                 </div>
  86.                 <div style="margin-right: 40px">
  87.                   <el-tooltip
  88.                     :content="item.username"
  89.                     placement="bottom"
  90.                     effect="light"
  91.                   >
  92.                     <div style="color: #565656" class="userName">
  93.                       {{ item.username }}
  94.                     </div>
  95.                   </el-tooltip>
  96.                   <div class="userInfo">{{ item.info }}</div>
  97.                 </div>
  98.                 <div style="margin-right: 10px; font-size: 14px; color: #ccc">
  99.                   {{ item.timer }}
  100.                 </div>
  101.               </div>
  102.             </div>
  103.           </div>
  104.           <!-- 右边输入框和信息展示 -->
  105.           <div class="infoList">
  106.             <!-- 信息 -->
  107.             <div class="infoTop" ref="scrollBox" id="box">
  108.               <div
  109.                 :class="
  110.                   item.position == 'left' ? 'chatInfoLeft' : 'chatInfoRight'
  111.                 "
  112.                 v-for="(item, index) in userInfoList"
  113.                 :key="index"
  114.               >
  115.                 <img :src="item.url" alt="头像" class="head_portrait2" />
  116.                 <div :class="item.position == 'left' ? 'chatLeft' : 'chatRight'">
  117.                   <div class="text" v-html="item.info"></div>
  118.                 </div>
  119.               </div>
  120.             </div>
  121.             <!-- 输入框 -->
  122.             <div class="infoBottom">
  123.               <div class="infoIcon">
  124.                 <i
  125.                   @click="extend('照片上传')"
  126.                   class="el-icon-picture-outline-round"
  127.                 ></i>
  128.                 <i @click="extend('发送商品')" class="el-icon-sell"></i>
  129.                 <i @click="extend('设置')" class="el-icon-setting"></i>
  130.                 <i @click="extend('聊天记录')" class="el-icon-chat-dot-round"></i>
  131.                 <i @click="extend('更多选项')" class="el-icon-more-outline"></i>
  132.               </div>
  133.               <textarea
  134.                 type="textarea"
  135.                 class="infoInput"
  136.                 v-model="textarea"
  137.                 @keydown.enter.exact="handlePushKeyword($event)"
  138.                 @keyup.ctrl.enter="lineFeed"
  139.                 :disabled="isshow == 1 ? false : true"
  140.               />
  141.               <div
  142.                 class="fasong"
  143.                 @click="setUp"
  144.                 v-show="isshow == 1 ? true : false"
  145.               >
  146.                 发送
  147.               </div>
  148.             </div>
  149.           </div>
  150.         </div>
  151.       </div>
  152.       <!-- 搜索框边 + 号弹框 -->
  153.       <el-dialog
  154.         title="选择需要添加的联系人"
  155.         :visible.sync="dialogVisible"
  156.         width="30%"
  157.         :modal="false"
  158.       >
  159.         <span>自定义页面，还没想好写什么功能</span>
  160.         <span slot="footer" class="dialog-footer">
  161.           <el-button @click="dialogVisible = false">取 消</el-button>
  162.           <el-button type="primary" @click="dialogVisible = false"
  163.             >确 定</el-button
  164.           >
  165.         </span>
  166.       </el-dialog>
  167.     </div>
  168.   </template>
  169.   
  170.   <script>
  171.   export default {
  172.     data() {
  173.       return {
  174.         //websocket部分
  175.         path: "ws://localhost:8888", //后台的websocket地址，找后端要
  176.         ws: null, //建立的连接
  177.         lockReconnect: false, //是否真正建立连接
  178.         timeout: 10 * 1000, //30秒一次心跳
  179.         timeoutObj: null, //心跳心跳倒计时
  180.         serverTimeoutObj: null, //心跳倒计时
  181.         timeoutnum: null, //断开 重连倒计时
  182.   
  183.         // 在线状态
  184.         state: 1,
  185.         //搜索用户
  186.         search: "",
  187.         //用户列表渲染数据
  188.         userListData: [
  189.           {
  190.             id: 0,
  191.             url: "https://img1.baidu.com/it/u=592570905,1313515675&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
  192.             username: "花间一壶酒",
  193.             info: "在吗",
  194.             timer: "2022/8/9",
  195.           },
  196.           {
  197.             id: 1,
  198.             url: "https://img2.baidu.com/it/u=2859542338,3761174075&fm=253&fmt=auto&app=138&f=JPEG?w=501&h=500",
  199.             username: "超人不换内裤",
  200.             info: "在吗在吗",
  201.             timer: "2022/8/1",
  202.           },
  203.           {
  204.             id: 2,
  205.             url: "https://img1.baidu.com/it/u=2029513305,2137933177&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=472",
  206.             username: "王子变蛤蟆",
  207.             info: "你好，在吗",
  208.             timer: "2022/8/9",
  209.           },
  210.           {
  211.             id: 3,
  212.             url: "https://img1.baidu.com/it/u=1960292808,1761809160&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
  213.             username: "皇太子",
  214.             info: "给我看一下这个情况呢",
  215.             timer: "2022/8/2",
  216.           },
  217.           {
  218.             id: 4,
  219.             url: "https://img2.baidu.com/it/u=3684117954,695988885&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400",
  220.             username: "飞天小女警",
  221.             info: "模拟数据发送一下呢",
  222.             timer: "2022/8/4",
  223.           },
  224.           {
  225.             id: 5,
  226.             url: "https://img2.baidu.com/it/u=4122738859,2522601053&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
  227.             username: "罗大大大",
  228.             info: "在吗",
  229.             timer: "2022/8/5",
  230.           },
  231.           {
  232.             id: 6,
  233.             url: "https://img0.baidu.com/it/u=661161858,172661768&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
  234.             username: "王子花",
  235.             info: "好的，我知道了",
  236.             timer: "2022/8/9",
  237.           },
  238.           {
  239.             id: 7,
  240.             url: "https://img2.baidu.com/it/u=835899845,548435859&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
  241.             username: "开盖有奖",
  242.             info: "试试看吧，再发一次",
  243.             timer: "2022/8/9",
  244.           },
  245.           {
  246.             id: 8,
  247.             url: "https://img0.baidu.com/it/u=4065107391,2142799144&fm=253&fmt=auto&app=138&f=JPEG?w=527&h=500",
  248.             username: "日本大爆炸",
  249.             info: "在吗",
  250.             timer: "2022/8/5",
  251.           },
  252.           {
  253.             id: 9,
  254.             url: "https://img2.baidu.com/it/u=2860188096,638334621&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
  255.             username: "秋天的第一杯奶茶",
  256.             info: "好的，我知道了",
  257.             timer: "2022/8/9",
  258.           },
  259.           {
  260.             id: 10,
  261.             url: "https://img0.baidu.com/it/u=1694074520,2517635995&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
  262.             username: "潮汐",
  263.             info: "试试看吧，再发一次",
  264.             timer: "2022/8/9",
  265.           },
  266.         ],
  267.         //用户列表筛选数据
  268.         userListDatas: [
  269.           {
  270.             id: 0,
  271.             url: "https://img1.baidu.com/it/u=592570905,1313515675&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
  272.             username: "花间一壶酒",
  273.             info: "在吗",
  274.             timer: "2022/8/9",
  275.           },
  276.           {
  277.             id: 1,
  278.             url: "https://img2.baidu.com/it/u=2859542338,3761174075&fm=253&fmt=auto&app=138&f=JPEG?w=501&h=500",
  279.             username: "超人不换内裤",
  280.             info: "在吗在吗",
  281.             timer: "2022/8/1",
  282.           },
  283.           {
  284.             id: 2,
  285.             url: "https://img1.baidu.com/it/u=2029513305,2137933177&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=472",
  286.             username: "王子变蛤蟆",
  287.             info: "你好，在吗",
  288.             timer: "2022/8/9",
  289.           },
  290.           {
  291.             id: 3,
  292.             url: "https://img1.baidu.com/it/u=1960292808,1761809160&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
  293.             username: "皇太子",
  294.             info: "给我看一下这个情况呢",
  295.             timer: "2022/8/2",
  296.           },
  297.           {
  298.             id: 4,
  299.             url: "https://img2.baidu.com/it/u=3684117954,695988885&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400",
  300.             username: "飞天小女警",
  301.             info: "模拟数据发送一下呢",
  302.             timer: "2022/8/4",
  303.           },
  304.           {
  305.             id: 5,
  306.             url: "https://img2.baidu.com/it/u=4122738859,2522601053&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
  307.             username: "罗大大大",
  308.             info: "在吗",
  309.             timer: "2022/8/5",
  310.           },
  311.           {
  312.             id: 6,
  313.             url: "https://img0.baidu.com/it/u=661161858,172661768&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
  314.             username: "王子花",
  315.             info: "好的，我知道了",
  316.             timer: "2022/8/9",
  317.           },
  318.           {
  319.             id: 7,
  320.             url: "https://img2.baidu.com/it/u=835899845,548435859&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
  321.             username: "开盖有奖",
  322.             info: "试试看吧，再发一次",
  323.             timer: "2022/8/9",
  324.           },
  325.           {
  326.             id: 8,
  327.             url: "https://img0.baidu.com/it/u=4065107391,2142799144&fm=253&fmt=auto&app=138&f=JPEG?w=527&h=500",
  328.             username: "日本大爆炸",
  329.             info: "在吗",
  330.             timer: "2022/8/5",
  331.           },
  332.           {
  333.             id: 9,
  334.             url: "https://img2.baidu.com/it/u=2860188096,638334621&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
  335.             username: "秋天的第一杯奶茶",
  336.             info: "好的，我知道了",
  337.             timer: "2022/8/9",
  338.           },
  339.           {
  340.             id: 10,
  341.             url: "https://img0.baidu.com/it/u=1694074520,2517635995&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
  342.             username: "潮汐",
  343.             info: "试试看吧，再发一次",
  344.             timer: "2022/8/9",
  345.           },
  346.         ],
  347.         //用户点击选中变色
  348.         act: Number,
  349.         // 加号弹框
  350.         dialogVisible: false,
  351.         //模拟花间一壶酒用户的历史信息
  352.         userInfoList2: [
  353.           {
  354.             url: "https://img1.baidu.com/it/u=592570905,1313515675&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
  355.             username: "花间一壶酒",
  356.             info: "在吗",
  357.             timer: "2022/8/9",
  358.             position: "left",
  359.           },
  360.           {
  361.             url: "https://img1.baidu.com/it/u=592570905,1313515675&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
  362.             username: "花间一壶酒",
  363.             info: "在吗",
  364.             timer: "2022/8/9",
  365.             position: "left",
  366.           },
  367.           {
  368.             url: "https://img2.baidu.com/it/u=2859542338,3761174075&fm=253&fmt=auto&app=138&f=JPEG?w=501&h=500",
  369.             username: "超人不换内裤",
  370.             info: "在吗在吗",
  371.             timer: "2022/8/1",
  372.             position: "right",
  373.           },
  374.           {
  375.             url: "https://img1.baidu.com/it/u=592570905,1313515675&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
  376.             username: "花间一壶酒",
  377.             info: "在吗",
  378.             timer: "2022/8/9",
  379.             position: "left",
  380.           },
  381.           {
  382.             url: "https://img2.baidu.com/it/u=2859542338,3761174075&fm=253&fmt=auto&app=138&f=JPEG?w=501&h=500",
  383.             username: "超人不换内裤",
  384.             info: "在吗在吗",
  385.             timer: "2022/8/1",
  386.             position: "right",
  387.           },
  388.           {
  389.             url: "https://img1.baidu.com/it/u=592570905,1313515675&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
  390.             username: "花间一壶酒",
  391.             info: "在吗在吗在吗在吗在吗在吗在吗",
  392.             timer: "2022/8/9",
  393.             position: "left",
  394.           },
  395.           {
  396.             url: "https://img2.baidu.com/it/u=2859542338,3761174075&fm=253&fmt=auto&app=138&f=JPEG?w=501&h=500",
  397.             username: "超人不换内裤",
  398.             info: "在吗在吗在吗在吗在吗在吗在吗在吗在吗在吗",
  399.             timer: "2022/8/1",
  400.             position: "right",
  401.           },
  402.           {
  403.             url: "https://img1.baidu.com/it/u=592570905,1313515675&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
  404.             username: "花间一壶酒",
  405.             info: "在吗在吗在吗在吗在吗在吗在吗在吗在吗在吗在吗在吗在吗在吗在吗在吗在吗在吗在吗在吗在吗在吗在吗在吗在吗在吗在吗在吗在吗在吗在吗在吗在吗在吗在吗在吗在吗在吗在吗在吗在吗在吗在吗",
  406.             timer: "2022/8/9",
  407.             position: "left",
  408.           },
  409.           {
  410.             url: "https://img2.baidu.com/it/u=2859542338,3761174075&fm=253&fmt=auto&app=138&f=JPEG?w=501&h=500",
  411.             username: "超人不换内裤",
  412.             info: "在吗在吗在吗在吗在吗在吗",
  413.             timer: "2022/8/1",
  414.             position: "right",
  415.           },
  416.         ],
  417.         //模拟超人不换内裤用户的历史信息
  418.         userInfoList3: [
  419.           {
  420.             url: "https://img1.baidu.com/it/u=592570905,1313515675&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
  421.             username: "花间一壶酒",
  422.             info: "测试测试",
  423.             timer: "2022/8/9",
  424.             position: "left",
  425.           },
  426.           {
  427.             url: "https://img1.baidu.com/it/u=592570905,1313515675&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
  428.             username: "花间一壶酒",
  429.             info: "测试",
  430.             timer: "2022/8/9",
  431.             position: "left",
  432.           },
  433.           {
  434.             url: "https://img2.baidu.com/it/u=2859542338,3761174075&fm=253&fmt=auto&app=138&f=JPEG?w=501&h=500",
  435.             username: "超人不换内裤",
  436.             info: "测试测试测试测试",
  437.             timer: "2022/8/1",
  438.             position: "right",
  439.           },
  440.         ],
  441.         //历史信息
  442.         userInfoList: [],
  443.         //输入框
  444.         textarea: "",
  445.         //滚动条距离顶部距离
  446.         scrollTop: 0,
  447.         //发送和输入显隐
  448.         isshow: 0,
  449.       };
  450.     },
  451.     created() {
  452.       this.initWebpack();
  453.     },
  454.     beforeDestroy() {
  455.       // 离开页面后关闭连接
  456.       this.ws.close();
  457.       // 清除时间
  458.       clearTimeout(this.timeoutObj);
  459.       clearTimeout(this.serverTimeoutObj);
  460.     },
  461.     methods: {
  462.       //切换客服状态
  463.       uploadState(state) {
  464.         if (state !== 4) {
  465.           this.state = state;
  466.         } else {
  467.           this.$confirm("是否退出登录?", "提示", {
  468.             confirmButtonText: "确定",
  469.             cancelButtonText: "取消",
  470.             type: "warning",
  471.           })
  472.             .then(() => {
  473.               this.$message({
  474.                 type: "success",
  475.                 message: "退出成功!",
  476.               });
  477.             })
  478.             .catch(() => {
  479.               this.$message({
  480.                 type: "info",
  481.                 message: "已取消退出",
  482.               });
  483.             });
  484.         }
  485.       },
  486.       //搜索icon
  487.       handleIconClick() {
  488.         console.log(1);
  489.       },
  490.       //点击用户
  491.       getAct(val, index) {
  492.         this.isshow = 1;
  493.         // 点击用户切换数据时先清除监听滚动事件，防止出现没有历史数据的用户，滚动条为0，会触发滚动事件
  494.         this.$refs.scrollBox.removeEventListener("scroll", this.srTop);
  495.         //点击变色
  496.         this.act = val.id;
  497.         //清空消息数组
  498.         this.userInfoList = [];
  499.         // 模拟一下点击用户出现历史记录的样子，实际开发中是axios请求后数组赋值然后调用setPageScrollTo
  500.         if (val.username == "花间一壶酒") {
  501.           this.userInfoList = this.userInfoList2;
  502.           // 直接调用不生效：因为你历史数据刚给，渲染的时候盒子高度还没有成型，所以直接调用拿不到，用个定时器让他在下一轮循环中调用，盒子就已经生成了
  503.           this.$nextTick(() => { // 一定要用nextTick
  504.                           this.setPageScrollTo();
  505.                           //页面滚动条距离顶部高度等于这个盒子的高度
  506.                           this.$refs.scrollBox.scrollTop = this.$refs.scrollBox.scrollHeight;
  507.                       })
  508.         } else if (val.username == "超人不换内裤") {
  509.           this.userInfoList = this.userInfoList3;
  510.           // 直接调用不生效：因为你历史数据刚给，渲染的时候盒子高度还没有成型，所以直接调用拿不到，用个定时器让他在下一轮循环中调用，盒子就已经生成了
  511.          this.$nextTick(() => { // 一定要用nextTick
  512.                           this.setPageScrollTo();
  513.                           //页面滚动条距离顶部高度等于这个盒子的高度
  514.                           this.$refs.scrollBox.scrollTop = this.$refs.scrollBox.scrollHeight;
  515.                       })
  516.         } else if (val.username == "王子变蛤蟆") {
  517.           this.$nextTick(() => { // 一定要用nextTick
  518.                           this.setPageScrollTo();
  519.                           //页面滚动条距离顶部高度等于这个盒子的高度
  520.                           this.$refs.scrollBox.scrollTop = this.$refs.scrollBox.scrollHeight;
  521.                       })
  522.         }
  523.       },
  524.       // 模糊搜索用户
  525.       inquire() {
  526.         let fuzzy = this.search;
  527.         if (fuzzy) {
  528.           this.userListData = this.userListDatas.filter((item) => {
  529.             return item.username.includes(fuzzy);
  530.           });
  531.         } else {
  532.           this.userListData = this.userListDatas;
  533.         }
  534.       },
  535.       //发送
  536.       setUp() {
  537.         console.log("发送内容:", this.textarea);
  538.         this.userInfoList2.push({
  539.           url: "https://img2.baidu.com/it/u=2859542338,3761174075&fm=253&fmt=auto&app=138&f=JPEG?w=501&h=500",
  540.           username: "超人不换内裤",
  541.           info: this.textarea,
  542.           timer: "2022/8/1",
  543.           position: "right",
  544.         });
  545.         this.textarea = "";
  546.         // 页面滚动到底部
  547.         this.$nextTick(() => { // 一定要用nextTick
  548.                           this.setPageScrollTo();
  549.                           //页面滚动条距离顶部高度等于这个盒子的高度
  550.                           this.$refs.scrollBox.scrollTop = this.$refs.scrollBox.scrollHeight;
  551.                       })
  552.       },
  553.       // 监听键盘回车阻止换行并发送
  554.       handlePushKeyword(event) {
  555.         console.log(event);
  556.         if (event.keyCode === 13) {
  557.           event.preventDefault(); // 阻止浏览器默认换行操作
  558.           this.setUp(); //发送文本
  559.           return false;
  560.         }
  561.       },
  562.       // 监听按的是ctrl + 回车，就换行
  563.       lineFeed() {
  564.         console.log("换行");
  565.         this.textarea = this.textarea + "\n";
  566.       },
  567.       //点击icon
  568.       extend(val) {
  569.         alert("你点击了：" + val);
  570.       },
  571.       //滚动条默认滚动到最底部
  572.       setPageScrollTo(s, c) {
  573.         //获取中间内容盒子的可见区域高度
  574.         this.scrollTop = document.querySelector("#box").offsetHeight;
  575.         setTimeout((res) => {
  576.           //加个定时器，防止上面高度没获取到，再获取一遍。
  577.           if (this.scrollTop != this.$refs.scrollBox.offsetHeight) {
  578.             this.scrollTop = document.querySelector("#box").offsetHeight;
  579.           }
  580.         }, 100);
  581.         //scrollTop：滚动条距离顶部的距离。
  582.         //把上面获取到的高度座位距离，把滚动条顶到最底部
  583.         this.$refs.scrollBox.scrollTop = this.scrollTop;
  584.         //判断是否有滚动条,有滚动条就创建一个监听滚动事件，滚动到顶部触发srTop方法
  585.         if (this.$refs.scrollBox.scrollTop > 0) {
  586.           this.$refs.scrollBox.addEventListener("scroll", this.srTop);
  587.         }
  588.       },
  589.       //滚动条到达顶部
  590.       srTop() {
  591.         //判断：当滚动条距离顶部为0时代表滚动到顶部了
  592.         if (this.$refs.scrollBox.scrollTop == 0) {
  593.           //逻辑简介：
  594.           //到顶部后请求后端的方法，获取第二页的聊天记录，然后插入到现在的聊天数据前面。
  595.           //如何插入前面：可以先把获取的数据保存在 A 变量内，然后 this.userInfoList=A.concat(this.userInfoList)把数组合并进来就可以了
  596.   
  597.           //拿聊天记录逻辑:
  598.           //第一次调用一个请求拉历史聊天记录，发请求时参数带上页数 1 传过去，拿到的就是第一页的聊天记录，比如一次拿20条。你显示出来
  599.           //然后向上滚动到顶部时，触发新的请求，在请求中把分页数先 +1 然后再请求，这就拿到了第二页数据，然后通过concat合并数组插入进前面，依次类推，功能完成！
  600.           alert("已经到顶部了");
  601.         }
  602.       },
  603.   
  604.       //-----------------------以下是websocket部分方法
  605.   
  606.       // 初始化websocket链接
  607.       initWebpack() {
  608.         if (typeof WebSocket === "undefined") {
  609.           alert("您的浏览器不支持socket");
  610.         } else {
  611.           this.ws = new WebSocket(this.path); //实例
  612.           this.ws.onopen = this.onopen; //监听链接成功
  613.           this.ws.onmessage = this.onmessage; //监听后台返回消息
  614.           this.ws.onclose = this.onclose; //监听链接关闭
  615.           this.ws.onerror = this.onerror; //监听链接异常
  616.         }
  617.       },
  618.       //重新连接
  619.       reconnect() {
  620.         var that = this;
  621.         if (that.lockReconnect) {
  622.           return;
  623.         }
  624.         that.lockReconnect = true;
  625.         //没连接上会一直重连，设置延迟避免请求过多
  626.         that.timeoutnum && clearTimeout(that.timeoutnum);
  627.         that.timeoutnum = setTimeout(function () {
  628.           that.initWebpack(); //新连接
  629.           that.lockReconnect = false;
  630.         }, 5000);
  631.       },
  632.       //重置心跳
  633.       reset() {
  634.         var that = this;
  635.         clearTimeout(that.timeoutObj); //清除心跳倒计时
  636.         clearTimeout(that.serverTimeoutObj); //清除超时关闭倒计时
  637.         that.start(); //重启心跳
  638.       },
  639.       //开启心跳
  640.       start() {
  641.         var self = this;
  642.         self.timeoutObj && clearTimeout(self.timeoutObj); //心跳倒计时如果有值就清除掉，防止重复
  643.         self.serverTimeoutObj && clearTimeout(self.serverTimeoutObj); //超时关闭倒计时如果有值就清除掉，防止重复
  644.         //然后从新开一个定时器
  645.         self.timeoutObj = setTimeout(function () {
  646.           //这里通过readyState判断链接状态，有四个值，0：正在连接，1：已连接，2：正在断开，3：已经断开或者链接不成功
  647.           if (self.ws.readyState == 1) {
  648.             //如果连接正常，给后天发送一个值，可以自定义，然后后台返回我们一个信息，我们接收到后会触发onmessage方法回调
  649.             self.ws.send("ping");
  650.           } else {
  651.             //如果检测readyState不等于1那也就代表不处在链接状态，那就是不正常的，那就调用重连方法
  652.             self.reconnect();
  653.           }
  654.           //从新赋值一个超时计时器，这个定时器的作用：当你触发心跳的时候可能会出现一个情况，后台崩了，前台发了个心跳，没有回应，就不会触发onmessage方法
  655.           //所以我们需要在这个心跳发送出去了后，再开一个定时器，用于监控心跳返回的时间，比如10秒，那么10秒内如果后台回我了，触发onmessage方法，自然就会把心跳时间和超时倒计时一起清空掉
  656.           //也就不会触发这个关闭连接，但是如果10秒后还是没有收到回应，那么就会触发关闭连接，而关闭连接方法内又会触发重连方法，循环就走起来了。
  657.           self.serverTimeoutObj = setTimeout(function () {
  658.             //如果超时了就关闭连接
  659.             self.ws.close();
  660.           }, self.timeout);
  661.         }, self.timeout);
  662.       },
  663.       //连接成功
  664.       onopen() {
  665.         console.log("连接成功");
  666.         if (this.ws.readyState == 1) {
  667.           //如果连接正常，给后天发送一个值，可以自定义，然后后台返回我们一个信息，我们接收到后会触发onmessage方法回调
  668.           this.ws.send(
  669.             "链接上啦！！！"
  670.           );
  671.         }
  672.         this.start(); //链接成功后开启心跳
  673.       },
  674.       //接受后台信息回调
  675.       onmessage(e) {
  676.         /**这里写自己的业务逻辑代码**/
  677.         console.log("收到后台信息:", e.data);
  678.         this.reset(); //收到服务器信息，心跳重置
  679.       },
  680.       //关闭连接回调
  681.       onclose(e) {
  682.         console.log("连接关闭");
  683.         this.reconnect(); //重连
  684.       },
  685.       //连接异常回调
  686.       onerror(e) {
  687.         console.log("出现错误");
  688.         this.reconnect(); //重连
  689.       },
  690.     },
  691.   };
  692.   </script>
  693.   
  694.   <style scoped>
  695.   .wrap {
  696.     height: 80%;
  697.     width: 55%;
  698.     background-color: #f2f2f2;
  699.     margin: auto;
  700.     transform: translateY(10%);
  701.     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  702.     border-radius: 10px;
  703.   }
  704.   .titleBox {
  705.     height: 10%;
  706.     width: 100%;
  707.     background-image: linear-gradient(to right, #1e76bc, #69a3d5);
  708.     display: flex;
  709.     align-items: center;
  710.     border-top-right-radius: 10px;
  711.     border-top-left-radius: 10px;
  712.   }
  713.   .infoBottom {
  714.     height: 30%;
  715.     display: flex;
  716.     flex-direction: column;
  717.   }
  718.   /* 输入框 */
  719.   .infoInput {
  720.     height: 58%;
  721.     width: 100%;
  722.     border: none;
  723.     resize: none;
  724.     padding: 10px;
  725.     box-sizing: border-box;
  726.     background-color: #f2f2f2;
  727.     color: #434343;
  728.   }
  729.   .fasong {
  730.     height: 30px;
  731.     width: 80px;
  732.     background-color: #e8e8e8;
  733.     text-align: center;
  734.     line-height: 30px;
  735.     border-radius: 4px;
  736.     color: #58df4d;
  737.     margin-top: 1%;
  738.     align-self: flex-end;
  739.     margin-right: 20px;
  740.     cursor: pointer;
  741.   }
  742.   .infoIcon {
  743.     height: 40px;
  744.     width: 100%;
  745.     display: flex;
  746.     align-items: center;
  747.   }
  748.   .infoIcon i {
  749.     font-size: 24px;
  750.     color: #676767;
  751.     margin-left: 15px;
  752.     cursor: pointer;
  753.   }
  754.   /* 头像 */
  755.   .head_portrait {
  756.     width: 3rem;
  757.     height: 3rem;
  758.     border-radius: 50%;
  759.     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  760.   }
  761.   .head_portrait2 {
  762.     width: 3rem;
  763.     height: 3rem;
  764.     border-radius: 50%;
  765.     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  766.   }
  767.   .stateBox {
  768.     margin-left: 20px;
  769.     padding: 1px 8px;
  770.     background-color: #fff;
  771.     border-radius: 10px;
  772.     text-align: center;
  773.     cursor: pointer;
  774.   }
  775.   .stateBox2 {
  776.     margin-left: 20px;
  777.     padding: 1px 8px;
  778.     background-color: #fff;
  779.     border-radius: 10px;
  780.     text-align: center;
  781.     cursor: pointer;
  782.   }
  783.   .stateBox2:hover {
  784.     background-color: #dcdcdc;
  785.   }
  786.   /* 在线 */
  787.   .state1 {
  788.     display: inline-block;
  789.     height: 10px;
  790.     width: 10px;
  791.     border-radius: 50%;
  792.     background-color: #8ee80e;
  793.   }
  794.   /* 离线 */
  795.   .state2 {
  796.     display: inline-block;
  797.     height: 10px;
  798.     width: 10px;
  799.     border-radius: 50%;
  800.     background-color: #cacaca;
  801.   }
  802.   /* 忙碌 */
  803.   .state3 {
  804.     display: inline-block;
  805.     height: 10px;
  806.     width: 10px;
  807.     border-radius: 50%;
  808.     background-color: #ff8c1e;
  809.   }
  810.   /* 退出登录 */
  811.   .state4 {
  812.     display: inline-block;
  813.     height: 10px;
  814.     width: 10px;
  815.     border-radius: 50%;
  816.     background-color: #7e7e7e;
  817.   }
  818.   .stateText {
  819.     font-size: 14px;
  820.     margin-left: 5px;
  821.   }
  822.   /* 列表和信息 */
  823.   .infoBox {
  824.     height: 90%;
  825.     width: 100%;
  826.     display: flex;
  827.   }
  828.   /* 用户列表大盒子 */
  829.   .userList {
  830.     height: 100%;
  831.     width: 300px;
  832.     border-right: 1px solid #ccc;
  833.     display: flex;
  834.     flex-direction: column;
  835.   }
  836.   /* 用户列表 */
  837.   .userListBox {
  838.     flex: 1;
  839.     width: 100%;
  840.     overflow: auto;
  841.   }
  842.   /* 信息外层盒子 */
  843.   .infoList {
  844.     height: 100%;
  845.     width: 72%;
  846.   }
  847.   /* 信息列表 */
  848.   .infoTop {
  849.     height: 70%;
  850.     width: 100%;
  851.     border-bottom: 1px solid #ccc;
  852.     padding: 10px;
  853.     box-sizing: border-box;
  854.     overflow: auto;
  855.   }
  856.   /* 对方发的信息样式 */
  857.   .chatInfoLeft {
  858.     min-height: 70px;
  859.     margin-left: 10px;
  860.     margin-top: 10px;
  861.     display: flex;
  862.   }
  863.   .chatLeft {
  864.     margin-left: 15px;
  865.     flex: 1;
  866.   }
  867.   .chatLeft .text {
  868.     color: #434343;
  869.     margin-top: 8px;
  870.     background-color: #e3e3e3;
  871.     display: inline-block;
  872.     padding: 6px 10px;
  873.     border-radius: 10px;
  874.     max-width: 50%;
  875.     /* 忽略多余的空白，只保留一个空白 */
  876.     white-space: normal;
  877.     /* 换行显示全部字符 */
  878.     word-break: break-all;
  879.     white-space: pre-wrap;
  880.     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  881.   }
  882.   
  883.   /* 自己发的信息样式 */
  884.   .chatInfoRight {
  885.     height: 70px;
  886.     margin-left: 10px;
  887.     margin-top: 10px;
  888.     display: flex;
  889.     flex-direction: row-reverse;
  890.   }
  891.   .chatRight {
  892.     margin-right: 15px;
  893.     flex: 1;
  894.     /* 用align-items把元素靠右对齐 */
  895.     display: flex;
  896.     flex-direction: column;
  897.     align-items: flex-end;
  898.   }
  899.   .chatRight .text {
  900.     color: #434343;
  901.     margin-top: 8px;
  902.     background-color: #95ec69;
  903.     display: inline-block;
  904.     padding: 6px 10px;
  905.     border-radius: 10px;
  906.     max-width: 50%;
  907.     /* 忽略多余的空白，只保留一个空白 */
  908.     white-space: normal;
  909.     /* 换行显示全部字符 */
  910.     word-break: break-all;
  911.     white-space: pre-wrap;
  912.     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  913.   }
  914.   
  915.   .searchBox {
  916.     padding: 4px 2px;
  917.     border-bottom: 1px solid #ededed;
  918.   }
  919.   .input-with-select {
  920.     width: 80%;
  921.     margin-right: 2%;
  922.   }
  923.   /* 点击用户变色 */
  924.   .userFlexAct {
  925.     display: flex;
  926.     justify-content: space-between;
  927.     align-items: center;
  928.     height: 70px;
  929.     border-bottom: 1px solid #e8e8e8;
  930.     cursor: pointer;
  931.     background-color: #e8e8e8;
  932.   }
  933.   /* 用户默认颜色 */
  934.   .userFlex {
  935.     display: flex;
  936.     justify-content: space-between;
  937.     align-items: center;
  938.     height: 70px;
  939.     border-bottom: 1px solid #e8e8e8;
  940.     cursor: pointer;
  941.   }
  942.   /* 用户名 */
  943.   .userName {
  944.     width: 100px;
  945.     white-space: nowrap;
  946.     overflow: hidden;
  947.     text-overflow: ellipsis;
  948.   }
  949.   /* 简略信息 */
  950.   .userInfo {
  951.     width: 100px;
  952.     font-size: 14px;
  953.     color: #ccc;
  954.     white-space: nowrap;
  955.     overflow: hidden;
  956.     text-overflow: ellipsis;
  957.     margin-top: 3px;
  958.   }
  959.   
  960.   /* 滚动条样式 */
  961.   ::-webkit-scrollbar {
  962.     width: 5px;
  963.     height: 10px;
  964.   }
  965.   ::-webkit-scrollbar-thumb {
  966.     background-color: #dbd9d9;
  967.     border-radius: 3px;
  968.   }
  969.   </style>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/喵喵爱编程/article/detail/761304
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号