基于Vue的点对点聊天项目-阿里云开发者社区

开发者社区> 开发与运维> 正文

基于Vue的点对点聊天项目

简介:

前提

一个基于平台内部的聊天项目,需要实现用户之间可以相互聊天发送消息,可以添加好友等功能。且消息必须是实时性的,并且用户下线后再次上线可以接受离线消息。

技术栈

Vue.js + Html5 + CSS3 + Sass + Vuex + Axios + Websocket 等

源码

Github

项目实例

  • 因为项目接口为线上接口 本地运行会报错 你可以将本地loaclhost 地址 指向 stone.snail.com
  • 或者直接访问 线上地址另一个项目社区 注册账号 返回后即可体验

技术难点

  • 实现从好友列表到聊天列表的发起
  • 消息的存储
  • 上下线状态的即时变动
  • 收到消息即使提醒以及未读消息的数量
  • 好友删除的通知 等等

项目运行

  • git clone https://github.com/jiaopianjun/echat.git
  • npm install
  • npm run dev

项目截图

29b64741bfbffda9f7966f71c918f54425ee4c45
3b4a3024274df05b62a498ce932554e8c17d1d93
ac1112207662f2a3b364f2cb74de13a72b7ef77d
489166f1aaa2eec1d79627c8d7a3fa31e3179ae0
a431788c3f66848b24b69f8d74f10981ac84de03

本文发布时间为:2018年06月14日
原文作者:故事胶片
本文来源:掘金      如需转载请联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章