Skip to content

基于React,antd-mobile,Node JS,socket.io和MongoDB的实时聊天应用

License

Notifications You must be signed in to change notification settings

pangqianjin/realtime-chatting

Repository files navigation

realtime-chatting

基于React,antd-mobile,axios,Node JS,socket.io和MongoDB等的实时聊天应用

前端使用了:react框架,nanoid, antd-mobile, js-cookie, react-router-dom, socket.io-client, axios等

后端使用了:nodejs, mongodb, mongoose, socket.io, express框架,blueimp-md5等

使用creat-react-app创建,目前优化空间比较大,,比如可以较少请求数据库的次数等,待后续优化

如何启动

先安装包

yarn install

// 启动前端

yarn start //或者npm start

// 启动后端

cd server node app.js

数据库的配置

默认使用 'mongodb://localhost:27017/local'

数据库模型

image image

登录页面

image

注册页面,注册成功后跳转到主页面

image

主页面

image image

发送消息(左一:qianjin,左二:tom)

image image

点击消息查看详情

image image

修改信息页面

(注册的时候默认没有输入个性签名和头像,使用默认值{signature:平平淡淡才是真', avatar: 'https://gw.alipayobjects.com/zos/rmsportal/pdFARIqkrKEGVVEwotFe.svg'})是个支付宝图标的头像,因为用的是antd-mobile image