概述

本项目基于Vue2进行高仿手机QQ的webapp，UI上使用的是museUI，使用springMVC搭建的后台。聊天方面，使用WebSocket实现浏览器与服务器全双工通信，允许服务器主动发送信息给客户端。源码大部分有注释，如果不清楚的可以问我，我会尽量回复的。

功能

  • 登录、注册——注册完成系统返回一个id，用id加密码即可登录

  • 添加好友——右上角加号点开，输入用户id即可完成添加（暂未实现用户验证添加）

  • 聊天功能——好友之间可以实时在线通信，无论你在哪个页面都能收到好友消息（退出不行）

  • 长按删除——长按删除已有的消息

  • 项目中数据流动由vuex进行控制

效果图

--登录与注册--

--侧边栏与个人主页--

--添加好友--

--长按删除--

--好友聊天--

其他说明

  • 本项目还有很多bug，各位大佬如果发现了，可以通知我下，我会非常感激的

  • 本项目还有很多功能没实现，如果你发现点击没反应，那很可能是我只写了个ui在那

  • 项目暂不支持聊天记录缓存，一旦你退出系统，聊天记录将清空

  • 这是我使用vue做的第二个webapp，虽然还是不怎么样，有兴趣的可以去看下我的第一个webapp——医院管理信息系统 项目地址 https://github.com/linguoqiang001/his

  • 最近比较忙，暂时就做到这，后面有时间的话会继续完善项目，后台和数据库部分，有时间我整理下一并上传

技术栈

  • vue-cli
  • vue2
  • vue-router
  • vuex
  • axios
  • less
  • webpack2
  • muse-ui

项目地址

https://github.com/linguoqiang001/chat

基于Vue2、WebSocket的仿腾讯QQ的更多相关文章

  1. 高仿腾讯QQ最终版

    之前写过一篇关于高仿腾讯QQ的博客,不知道的看这:http://blog.csdn.net/htq__/article/details/51840273 ,主要是从界面上高仿了腾讯QQ,在UI上基本上 ...

  2. 仿腾讯QQ竖直滑动导航菜单

    菜单就像qq软件的分组,鼠标经过自动显示相应组的内容. 效果体验网址:http://keleyi.com/a/bjad/nf86w2dv.htm 以下是源代码: <html> <he ...

  3. vue-miniQQ——基于Vue2实现的仿手机QQ单页面应用（接入了聊天机器人，能够进行正常对话）

    使用Vue2进行的仿手机QQ的webapp的制作,作品由个人独立开发,源码中进行了详细的注释. 由于自己也是初学Vue2,所以注释写的不够精简,请见谅. 项目地址 https://github.com ...

  4. 高仿腾讯QQ即时通讯IM项目

    前言:其实这个项目早就开发完成了,在本人的github上,本来没打算写成博客的形式,因为一个项目要写出来要花很久,但是最近看到很多 人在我的github上download后随意发布到网上,本来上传到g ...

  5. jQuery插件实现图片展开效果，jquery.gallery。仿腾讯QQ空间说说图片展示效果。

    公司的项目http://www.umfun.com/,有个说说的页面(和腾讯QQ空间说说一样),里面有个发表图片功能,上传完图片,需要点击展开的效果. 当时手里面事情比较多(公司就我一个前端),忙不过 ...

  6. ListView滑动删除 ，仿腾讯QQ

    转载请表明出处:http://blog.csdn.net/lmj623565791/article/details/22961279 在CSDN上开了很多大神们的文章,感觉受益良多,也非常欣赏大家的分 ...

  7. 基于vue2.0实现仿百度前端分页效果（二）

    前言 上篇文章中,已经使用vue实现前端分页效果,这篇文章我们单独将分页抽离出来实现一个分页组件 先看实现效果图 代码实现 按照惯例,我们在冻手实现的时候还是先想一想vue实现组件的思路 1.需要提前 ...

  8. 基于vue2.0实现仿百度前端分页效果（一）

    前言 最近在接手一个后台管理项目的时候,由于之前是使用jquery+bootstrap做的,后端使用php yii框架,前后端耦合在一起,所以接手过来之后通过vue进行改造,但依然继续使用的boots ...

  9. QQ 腾讯QQ（简称“QQ”）是腾讯公司开发的一款基于Internet的即时通信（IM）软件

    QQ 编辑 腾讯QQ(简称“QQ”)是腾讯公司开发的一款基于Internet的即时通信(IM)软件.腾讯QQ支持在线聊天.视频通话.点对点断点续传文件.共享文件.网络硬盘.自定义面板.QQ邮箱等多种功 ...

随机推荐

  1. [CSP-S模拟测试]:Emotional Flutter（贪心）

    题目传送门(内部题51) 输入格式 第一行一个整数$t$表示数据组数.每组数据的第一行有三个整数$s,k,n$.第二行有$n$个整数$A_1,A_2,...,A_n$,依次表示黑白条的长度. 输出格式 ...

  2. PHP运行出现Notice

    问题: Notice:Notice是PHP 的提示而非报错,PHP本身不需要事先声明变量即可直接使用,但是对未声明变量会有提示.在网站正式开始运行时,会把提示关了的. 关闭PHP提示的方法: 搜索ph ...

  3. centos7下zookeeper安装配置

    1.下载zookeeper文件 cd /opt/ wget http://mirrors.hust.edu.cn/apache/zookeeper/stable/zookeeper-3.4.9.tar ...

  4. 在Js中得到元素的子元素集合注意事项

    http://www.cnblogs.com/phonefans/archive/2008/09/04/1283739.html 在Js中得到元素的子元素集合注意事项 费话少说,直接看例子: 1 &l ...

  5. Jmeter断言中判断请求失败的响应代码问题

    很多http请求会返回400.404.500.502等错误,我们在断言中一般会直接去勾选响应代码,然后匹配得到的响应代码,但是总是失败.百思不得其解! 后来查询Jmeter官方帮助时,在里面找到了答案 ...

  6. 各种Web服务器与Nginx的对比

    Tomcat和Jetty面向Java语言,先天就是重量级的Web服务器,它们的性能与Nginx没有可比性. IIS只能在windows操作系统上运行,Windows作为服务器在稳定性与其他一些性能上都 ...

  7. python文件的读写总结

    读写文件是最常见的IO操作.Python内置了读写文件的函数,用法和C是兼容的. 读写文件前,我们先必须了解一下,在磁盘上读写文件的功能都是由操作系统提供的,现代操作系统不允许普通的程序直接操作磁盘, ...

  8. 银行贷款（dp）

    链接:https://www.nowcoder.com/acm/contest/79/A来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒空间限制:C/C++ 32768K,其他语言65536KS ...

  9. IIS Express 不允许的父路径

    IIS Express 启动一个asp的网站,出现一个错误 Active Server Pages 错误 'ASP 0131' 不允许的父路径 对于IIS可以在可视化的IIS Manager中配置: ...

  10. 【学习总结】Python-3-逻辑运算符

    参考:菜鸟教程-Python3运算符 逻辑运算符的计算规则划重点: 并不是只返回布尔型,有时会返回变量的数值 (优先级:not>and>or) 总结: '与或非'三件套中,not与数学逻辑 ...