【PC端聊天功能模板】vue-elementul简单实现电脑端客服聊天功能，pc端聊天系统静态页面布局，配套websocket方案和心跳重连机制【详细注释，拿来即用】

• 前端

前言

这里是给大家写了一个简单的模板来使用，可以直接复制了调调就能用。因为这个聊天也是很容易出现的功能，所以我写一个模板静态页面放在这，以后需要这个功能的时候可以不用布局了，直接复制改改。

我的代码里面有详细的注释，相信就算是刚学完前端的萌新也是看得懂的，如果有不懂得可以提问

小程序端聊天功能和websocket模板写法点这里

点击跳转

在这里插入图片描述

移动端H5静态页面布局模板点这里

移动端H5 聊天室布局模板 点击跳转

移动端布局样式效果图

在这里插入图片描述

在这里插入图片描述

PC端聊天页效果图

有滚动条的

在这里插入图片描述

没选择用户时

在这里插入图片描述

模糊搜索

在这里插入图片描述

没滚动条的

在这里插入图片描述

切换状态

在这里插入图片描述

显示完全

在这里插入图片描述

换行和空格都保留文本格式显示

在这里插入图片描述

功能简介

1，页面布局自适应缩放

2，点击在线可以切换客服状态，忙碌，离线，退出登录等

3，模糊搜索用户列表功能

4，点击用户会变底色并切换用户的聊天信息

5，刚进入时不点击选中用户时隐藏发送按钮和禁用输入框

6，用户聊天信息有滚动条时上划到顶部会触发方法

7，用户聊天信息没有滚动条的时候不触发上划到顶部的方法

8，切换用户聊天时，聊天框滚动条保持在最底部

9，发送信息时滚动条保持在最底部

10，用户名和最新消息的展示，超出的会用省略号显示，用户名可以鼠标移上去显示完全

11，输入框中回车可以发送消息，并阻止换行。

12，输入框中ctrl+回车换行

13，换行和空格保留文本格式

14，websocket以及心跳重连机制模板

测试注意部分

可以发送信息，但是我是模拟的数据，没有链接后台。所以我这个页面你们复制后可以直接测试一下效果。

但是注意，发消息只能发给花间一壶酒这个用户，因为我是定死了的给他的数组内加新消息，其他的如果想试自己改一下方法。

使用了elementul，没有的下载一下

代码

  
    
      
      
        【PC端聊天功能模板】vue-elementul简单实现电脑端客服聊天功能，pc端聊天系统静态页面布局，配套websocket方案和心跳重连机制【详细注释，拿来即用】
        官方客服
        
        
          
            
            在线
          
          
            
            离线
          
          
            
            忙碌
          
          
            
            退出
          
          
            
            在线
          
          
            
            离线
          
          
            
            忙碌
          
        
      
      
      
        
        
          
            
              
              
            
            
          
          
            
              
                头像
              
              
                
                  
                    {{ item.username }}
                  
                
                {{ item.info }}
              
              
                {{ item.timer }}
              
            
          
        
        
        
          
          
            
              头像