基于 Gin + Vue + Element UI 的前后端分离即时通讯系统

特性

1. 登录：http 鉴权与 websocket 鉴权
2. 向单个用户发送消息
3. 向多个用户发送消息
4. 离线消息
5. 查看已注册用户
6. 查看在线用户
7. 单一用户多客户端登录
8. 注销

GITEE 地址

码云获取代码地址 (opens new window)

视频演示地址

b 站视频演示地址 (opens new window)

快速启动

前端启动

cd web
npm intall
npm run serve

后端启动

在配置文件./server/config.yaml填写 redis 配置

cd server
go run main.go

消息结构

采用 json 传输，结构如下

{
  "type": "",
  "content": "",
  "from": "",
  "to": ["", ""]
}

前端主要功能实现说明

逻辑

1. 注册，登录

   点击注册与登录，向后端发送账号和密码

2. jwt 鉴权

   登录逻辑：保存 token 到 localStorage，然后使用原生 WebSocket 与后端建立 websocket 连接，成功建立连接后发送带有 token 的消息,对 websocket 鉴权,消息为

{
  "type": "auth",
  "content": "w-token",
  "from": "",
  "to": []
}

3. 普通通信消息

{
  "type": "normal",
  "content": "用户输入的具体消息内容",
  "from": "",
  "to": []
}

4. 发送普通通信消息

选定接收对象（一个或多个）， 输入消息内容，发送消息，消息结构为

{
  "type": "normal",
  "content": "用户输入的具体消息内容",
  "from": "",
  "to": ["张三", "李四", "namei", "lufei"]
}

后端主要功能实现说明

注册

收到注册请求后，将账号密码保存到文件，同时缓存中也会通过 map 更新已注册用户。

登录

登录成功后颁发 token，然后会收到前端发来的 websocket 连接请求(type 为 auth)，对 token 进行验证，建立 websocket 连接(websocket 仅在建立连接时验证 token)

在线用户列表

用户建立 websocket 连接后会将连接保存到数据结构map[用户名]连接句柄list的结构，用户断开连接会将连接删除，通过遍历 map 得到在线用户列表，同时将消息通过 websocket 发送到前端

{
  "type": "loginlist",
  "content": { "names": ["张三", "李四", "wangwu"] },
  "from": "",
  "to": []
}

消息发送

根据 to 字段，去在线 map 找用户，如果用户在线,找到对应连接发送消息，如果离线，赋值from字段，然后存储消息到 redis(from 为 key)，当用户登录时，拿到离线消息发给客户端

{
  "type": "normal",
  "content": "用户输入的具体消息内容",
  "from": "钻石王老五",
  "to": ["张三", "李四", "namei", "lufei"]
}

单一用户多客户端登录

每次用户建立连接都将 websocket 连接句柄存到 map 中 list 结构，遍历 list，将消息发给单个用户的所有登录端