Electron+Nodejs+SpringBoot+Socket构建IM

1,566 阅读2分钟

之前写的个人项目都是博客之类的,这次打算写一个新的东西,加上本身对网络编程不太熟悉,所以就打算写一个IM软件,在此过程中,来学习一下网络编程

PS:图片的水印带有CSDN字样是因为最先在CSDN发布的,然后直接复制发到掘金上,两个都是本人,不是抄袭...

2022-01-26更新 增加了创建群聊的功能 增加群聊聊天的功能以及群里离线消息的保存 优化若干界面

在这里插入图片描述

在这里插入图片描述

2021-11-21更新 增加了发送图片的功能 增加对离线消息的保存 增加会话列表的显示 优化若干界面 在这里插入图片描述

Lchat

本次的项目取名为Lchat,没有什么具体含义。

所用到的技术

  • Electron: 因为之前写的项目都是网页版的,这次想弄点不一样的,在一次逛知乎的过程中发现了Electron,去简单了解了下,它使用 JavaScript,HTML 和 CSS 构建跨平台的桌面应用程序,总的来说就是它可以把网页变成桌面程序,还可以使用NodeJS,当时看到这个就觉得挺有意思,刚好我都会一些,桌面应用也是之前没接触过的。就选择用它来搭建IM的界面
  • VUE,Ant Design Vue:这个没啥好说的之前的项目都是用VUE来写前端
  • SpringBoot: SB搭建后台的服务
  • TCP: TCP其实不能说是技术,只是为了方便就放在这里了,Lchat使用的是TCP来进行网络通信,JSON作为传输格式
  • BIO: 这次使用的IO模型是BIO 用的技术还有不少,比如Sqlite,MySQL,Redis,NodeJS,消息队列等就不一一列出来了 对于IO模型的使用,我的计划是Lchat会有三个大版本的迭代,最开始的BIO也就是现在这个,然后是NIO,最后使用Netty,通过三个版本来学习网络编程,从简到难,同时顺便了解了解其他的技术

项目展示

第一版本目前还在开发中,完成了一些基础的,比如登录,添加好友,个人信息展示修改,单聊(目前仅能发送文字)等,后续功能会逐步完善

登录: 在这里插入图片描述 主界面: 在这里插入图片描述 个人信息: 在这里插入图片描述 添加好友: 在这里插入图片描述 在这里插入图片描述

单聊 在这里插入图片描述 这个项目是我一个人用业余时间做的,有很多地方还需要完善,尤其是界面,对于后端出生的我,界面的调试太痛苦了😂 代码我都放在了GITHUBLchat界面 Lchat后端服务