Hola~ 一款基于Electron的聊天软件
Hola
前言
本项目旨在从零到壹,制作一款界面精美的聊天软件。
Github 地址因为已工作,所以可能没有多少时间来继续跟进这个项目了,项目可优化的点已在下文列出,欢迎大家 Fork 或 Star。
ps: 征 logo 一枚。因为本人是开发,设计功底欠缺,所以软件 logo 设计的有点丑,如果有大神有更好的 logo,欢迎 email。
技术栈
-
开发环境
- 操作系统:macOS High Sierra v10.13.1
- 编辑器:Visual Studio Code v1.19.1
- npm:v5.3.0
- Node:v8.4.0
-
客户端
- UI设计:Sketch
- 软件框架:Electron
- 界面实现:Vue.js + Vuex + Vue-Router + Webpack
- 通信模块:socket.io-client
- 视频聊天:原生 WebRTC
-
服务端
- 服务器:Node.js
- 后端框架:Koa2
- 通信模块:socket.io
- 数据库:Redis 和 MongoDB
软件效果图
实现功能
- [x] 登录注册模块(<手机号+验证码>形式的登录注册)
-
[x] 聊天区模块
- [x] 最近联系人列表
- [x] 历史消息(暂未做上拉加载)
-
[x] 私聊
- [x] 文本消息
- [x] 图片消息
- [x] 视频聊天
-
[x] 群聊
- [x] 文本消息
- [x] 图片消息
-
[x] 联系人模块
- [x] 联系人列表
- [x] 好友资料展示
- [x] 群组资料展示
- [x] 删好友,退出或解散群组
-
[x] 功能区模块
- [x] 添加好友/群组
- [x] 创建群组
-
[x] 设置区模块
- [x] 个人资料设置
-
[x] 软件设置
-
[x] 国际化
- [x] 中文
- [x] 英文
-
项目目录
.
├── LICENSE
├── README.md
├── client # 客户端代码
├── docs # 各种文档(需求文档、UI文档、流程图、数据库设计等)
├── preview.png # 软件预览图
└── server # 服务端代码
反思 & 展望
该项目为我大学毕业设计的项目,因时间紧迫,只实现了基本的聊天、加删好友等功能,很多功能还未实现,所以软件还是有很多的瑕疵。为此,我特意思考了很长时间,将待改进的细节或新的功能总结如下:
- [ ] 历史消息做成上拉瀑布流加载的效果
- [ ] 为消息注明消息时间、发送状态、已读未读等状态
- [ ] 为最近联系人列表添加最后一条消息的展示
- [ ] 为最近联系人添加未读消息个数的统计
- [ ] 添加好友或加入群组时要进行确认
- [ ] 为软件的新消息使用系统原生通知窗口通知
- [ ] 为软件增加原生菜单
- [ ] 升级输入框,从而可以向输入框直接插入剪切板中的图片
- [ ] 自己搭建文件服务器,图片服务器(或者使用第三方比如七牛云、阿里云的相关服务)
- [ ] 为 WebRTC 实现后备方案,搭建 Relay Server,以增强视频聊天的稳定性
- [ ] 增加网络断开处理的相关逻辑
- [ ] 了解数据加密相关知识,为消息作加密处理
- [ ] 为软件做跨平台处理,兼容性方面有待加强
- [ ] 实现软件自动更新
- [ ] 接入智能机器人聊天
- [ ] 实现本地存储历史消息(nedb)
- [ ] 为软件加入聊天情况分析(比如每天发了多少条消息,与谁聊天最频繁等)
扩展阅读
- 初探 Electron - 理论篇
- 初探 Electron - 升华篇
- XCel 项目总结 - Electron 与 Vue 的性能优化
- 【译】Electron 自动更新的完整教程(Windows 和 OSX)
- Getting Started with WebRTC
- 通俗易懂:一篇掌握即时通讯的消息传输安全原理
- 即时通讯安全篇(三):常用加解密算法与通讯安全讲解
- socket.io断线后重连和消息离线存储如何实现
- Socket.IO stream
- 运用google-protobuf的IM消息应用开发(前端篇)
- Can one hack “paste image” support into a textarea in Firefox?
- 在线和离线事件
percy507的编程之路
自2016年加入社区后,陆陆续续发布过一些文章,后面也自己折腾过个人博客(hexo+github)。但是自2018年...
推荐阅读
使用vite搭个中后台系统的脚手架
搭个中后台系统的脚手架仓库地址 [链接]搭建脚手架目的学习 vite、recoil 等新技术封装项目中常用的较复杂的组件学习一定的前端架构能力构建命令npm 与 yarn 对新版 husky(v7.0.1+)的配置方式不太相同,我们这...
percy507赞 2阅读 3.2k
正则表达式实例
收集在业务中经常使用的正则表达式实例,方便以后进行查找,减少工作量。常用正则表达式实例1. 校验基本日期格式 {代码...} {代码...} 2. 校验密码强度密码的强度必须是包含大小写字母和数字的组合,不能使用特殊...
寒青赞 57阅读 8.7k评论 11
JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...
jenemy赞 49阅读 7.4k评论 12
再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...
libinfs赞 42阅读 7k评论 12
「多图预警」完美实现一个@功能
一天产品大大向 boss 汇报完研发成果和产品业绩产出,若有所思的走出来,劲直向我走过来,嘴角微微上扬。产品大大:boss 对我们的研发成果挺满意的,balabala...(内心 OS:不听,讲重点)产品大大:咱们的客服 I...
wuwhs赞 32阅读 3.6k评论 5
安全地在前后端之间传输数据 - 「3」真的安全吗?
在「2」注册和登录示例中,我们通过非对称加密算法实现了浏览器和 Web 服务器之间的安全传输。看起来一切都很美好,但是危险就在哪里,有些人发现了,有些人嗅到了,更多人却浑然不知。就像是给门上了把好锁,还...
边城赞 29阅读 6.4k评论 5
2022大前端总结和2023就业分析
我在年前给掘金平台分享了《2022年热点技术盘点》的前端热点,算是系统性的梳理了一下我自己对前端一整年的总结。年后,在知乎上看到《前端的就业行情怎么样?》,下面都是各种唱衰前端的论调,什么裁员,外包化...
i5ting赞 27阅读 2.4k评论 4
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。