[开源]一款基于Vue3+Socket.IO的极简聊天应用,比较完整,略好看

2022-10-11 21:13:32 197 0
魁首哥

一、开源项目简介

自做的客服聊天以来,让做一套聊天应用的呼声越来越多,加上那套客服聊天由于没有组件化、 UI设计 等问题,一直心有遗憾做的不够完美,于是利用空余时间做了一套相对完整的聊天应用。HasChat 是一套使用全新技术完成的一套通讯聊天网页。

二、界面展示

三、功能概述

作者开源目的旨在给刚学习该领域的新人一些引路,不管你是前端还是后端,都能对你在通讯聊天这个领域有一点点的启发。

功能一览

  • 登陆、随机获取用户登陆
  • 发送邮箱验证码注册
  • 发送表情+文字组合的富文本内容
  • 发送图片内容,查看大图
  • enter发送信息,enter+ctrl换行输入内容
  • 消息提醒
  • 未读消息标记
  • 记录历史会话
  • 记录历史聊天内容

四、技术选型

  • 前端:Vue3 + Vite + TypeScript + Naive UI + socket .io
  • 后端:Express.js

版本说明

  • 前端:暂无版本区别
  • 后端:分为mysql版本(分支main)和 json 版本(分支master);json版本主要是为了不懂mysql的新手学习;

环境部署

 Node.Js >= 12.0.0
Mysql >= 5.7.0 (仅mysql版本需要)  

启动项目

安装依赖

前、后端

 npm install  

mysql配置(json版本跳过)

  • 在mysql的版本中,找到目录store下的sql文件,运行 sql 文件
  • 依次运行两个sql文件,并且刷新数据库表就可看到了
  • 找到config.js文件
 const db = mysql.createConnection({
  host: "", // 主机地址 (默认:localhost)
  user: "", // 用户名
  password: "", // 密码
  database: "" // 数据库
})  

更多配置查看: nodejs -mysql

邮箱配置(json版本跳过)

  • 找到config.js文件
  email Config: { //邮箱配置
    host: "smtp.qq.com",//邮箱服务器  这里我用的QQ邮箱
    port: 465,//邮箱使用端口
    secure: true,//是否使用默认的465端口
    auth: {
      user: "", // 发送方邮箱地址
      pass: "" // smtp 验证码
    }
  }  

详情使用可以查看该文章:nodejs发送邮箱信息

启动项目/服务

  • 后端
 node app.js  
  • 前端
 npm run dev  

到此,项目可以正常运行

项目目录

 haschat     
├── src            
│       └── api                    		  // 接口文件
│       └── assets						  // 资源文件
│			└── css					 	  // css样式
│			└── emo					 	  // 表情包
│			└── icon					  // 字体图标
│			└── img					 	  // 图片资源
│			└── mp3					 	  // 消息提示音频
│       └── class                      	  // 类文件
│       └── components                    // 组件
│			└── ChatContent.vue			  // 聊天窗口
│			└── ChatDomain.vue			  // 功能组件
│			└── ChatEditor.vue			  // 聊天输入框
│			└── ChatFoot.vue			  // 聊天框底部
│			└── ChatHead.vue			  // 聊天头部
│			└── ChatNav.vue				  // 菜单栏
│			└── HasChat.vue				  // 聊天入口
│       └── enums                         // 通用枚举
│       └── json                          // JSON数据处理
│       └── router                        // 路由
│       └── store                         // 数据仓库
│       └── utils                         // 工具
│       └── views                         // 页面  

类文件

User

字段

类型

描述

Id

number

用户Id

Name

string

用户姓名

NickName

string

用户昵称

OnlineState

boolean

在线状态

Mobile

string

用户手机号

Avatar

string

用户头像

Conversition

字段

类型

描述

Id

number

内容Id

SendId

number

发送人Id

ReciverId

number

接受人Id

Content

string

内容

Type

number

类型

State

number

发送状态

NoCode

string

信息编号

CreateDateUtc

string

创建时间

Title

string

拓展功能字段

Description

string

拓展功能字段

Label

string

拓展功能字段

Thumbnail

string

拓展功能字段

ReadFlag

boolean

是否阅读

请求api

1.获取用户信息

参数

id :用户Id,必传

接口地址 : /api/getUserById

2.获取用户列表

参数

id :除去的用户Id,必传

接口地址 : /api/userList

3.随机获取一条用户数据

参数

接口地址 : /api/getRandomUser

4.登陆

参数

email :账户,必传

password :密码,必传

接口地址 : /api/login

5.注册

参数

email :邮箱,必传

name :用户名,必传

password :密码,必传

surePassword :确认密码,必传

接口地址 : /api/register

6.发送邮箱验证码

参数

email :邮箱,必传

timestamp :时间戳,自动携带

接口地址 : /api/sendVerificationCode

7.校验邮箱验证码

参数

verificationCode :验证码,必传

timestamp :时间戳,自动携带

接口地址 : /api/checkVerificationCode

socket.io的api

1.加入聊天

参数

SendId :发送者Id,必传

NoCode :时间戳,自动携带

调用方式

 store.state.socket.emit("joinChat", {
  SendId: xxx,
  NoCode: xxx,
});  

2.发送消息

参数

Conversition :发送内容对象(查看Conversition类),必传

ReciverId :接收者Id,必传

SendId :发送者Id,必传

调用方式

 store.state.socket.emit("sendMsg", {
  Conversition: xxx,
  ReciverId: xxx,
  SendId: xxx,
});  

3.修改信息阅读状态

参数

ReciverId :接收者Id,必传

SendId :发送者Id,必传

调用方式

 store.state.socket.emit("changeMsgRead", {
  ReciverId: xxx,
  SendId: xxx,
});  

4.新增历史会话

参数

SendId :发送者Id,必传

Revicer :接受者对象(可查看Use类),必传

调用方式

 store.state.socket.emit("insertHistorySession", {
  SendId: xxx,
  Revicer: xxx,
});  

五、开源协议

使用Apache-2.0开源协议

六、源码地址

私信回复:极简聊天应用

或访问一飞开源:

收藏
分享
海报
0 条评论
197
上一篇:为什么大部分程序员看不起PHP这门语言? 下一篇:php的HTML输入和输出复杂净化

本站已关闭游客评论,请登录或者注册后再评论吧~

忘记密码?

图形验证码