打造跨终端跨平台即时通讯,个人也能玩的转的聊天软件。
参考文献
V-IM
基于JS的超轻量级聊天软件。前端:vue、iview、electron实现的 PC&
Web版聊天程序,主要适用于私有云项目内部聊天,企业内部管理通讯等功能,主要通讯协议websocket。支持web网页聊天实现。 服务端: springboot、tio、oauth2.0等技术。界面:高仿微信。
RuoYi
是一个后台管理系统,基于经典技术组合(Spring Boot、Apache Shiro、MyBatis、Thymeleaf)主要目的让开发者注重专注业务,降低技术难度,从而节省人力成本,缩短项目周期,提高软件安全质量。
uniapp仿微信,支持h5、微信小程序和app。感谢star。
版权信息
软件遵循MIT开源协议,意味着您无需支付任何费用,也无需授权,即可将 软件应用到您的产品中。 注意:这并不意味着您可以将软件应用到非法的领域,比如涉及赌博,暴力等方面。如因此产生纠纷等法律问题, 作者不承担任何责任。切勿以身试法!!!
下载体验
会将各个版本的演示在此展示,目前演示的版本有H5,安卓,苹果,电脑,其他版本的演示将会陆续添加
后台管理http://42.193.146.14:8089/index.html
手机版本
链接类型版本大小
Download.apk1.0.01.2 MB
电脑版本
链接类型版本大小
Download.exe1.0.01.4 MB
说明
**注意: 测试账号分别为:admin /123456
webim.js
通讯文件
分离了API 与webSocket 。
群通道,用户通道。
重试次数,心跳检测,断网重连。
字节传输,支持自定义加密解密等功能。
1.1 用户绑定
方法名login
参数说明
属性名备注类型可选值
userId用户唯一标识String5f6d9d98
command指令集Number1
version版本号Number1
请求入参
let packet = {
version:1,
command: 1,
userId:"5f6d9d98"
}
响应参数
let packet = {
version : 1,
command: 2,
errorMsg:"",
success: true
}
1.2 加入群组
方法名joinGroup
参数说明
属性名备注类型可选值
chatId聊天对象(群/用户)String04b09fbee3d24a21a2acedc755d5d7c3
userId唯一标识String5f6d9d98
chatType聊天类型(群聊/私聊)Number0/1
command指令集Number7
version版本号Number1
请求入参
let packet = {
chatId:"04b09fbee3d24a21a2acedc755d5d7c3",
userId:"5f6d9d98",
chatType: 0,
version: 1,
command: 7
}
响应参数
let packet = {
version : 1,
command: 8,
errorMsg:"",
success: true
}
1.3 退出群组
方法名quitGroup
参数说明(参照加入群组)
请求入参
let packet = {
chatId:"04b09fbee3d24a21a2acedc755d5d7c3",
userId:"5f6d9d98",
chatType: 0,
version: 1,
command: 9
}
响应参数
let packet = {
version : 1,
command: 10,
errorMsg:"",
success: true
}
1.4 发送消息
方法名sendMessage
参数说明
属性名备注类型可选值
isItMe发送人Boolenfalse/true
contentType消息类型(文字/图片/语音/视频/红包)Number0/1/2/3/4/5
content消息内容String测试
createTime创建时间Date2021-11-2
hasBeenSentId消息idString1447565
fromUserId发送人idString220e805b8521444e9f27d78e45633b44
fromUserName发送人账户Stringtest
fromUserHeadImg发送人图像Stringdefalut.jpg
userId当前用户idString5f6d9d98
toUserId接收人idString5f6d9d98
toUserName接收人账户Stringadmin
toUserHeadImg接收人图像Stringdefalut.jpg
chatType聊天类型(群/私)Number1/0
version版本Number1
command指令集Number3
请求入参
let packet = {
isItMe: true,
contentType: 0,
content: "测试",
createTime: Date.now(),
hasBeenSentId: Date.now(),
fromUserId: "5f6d9d98",
fromUserName: "admin",
fromUserHeadImg: '/static/image/huge.jpg',
userId: "5f6d9d98",
toUserId: "220e805b8521444e9f27d78e45633b44",
toUserName: "test",
toUserHeadImg:'/static/image/huge.jpg',
chatType: 0,
version : 1,
command: 3,
};
响应参数
let packet = {
isItMe: true,
contentType: 0,
content: "测试",
createTime: Date.now(),
hasBeenSentId: Date.now(),
fromUserId: "5f6d9d98",
fromUserName: "admin",
fromUserHeadImg: '/static/image/huge.jpg',
userId: "5f6d9d98",
toUserId: "220e805b8521444e9f27d78e45633b44",
toUserName: "test",
toUserHeadImg:'/static/image/huge.jpg',
chatType: 0,
version : 1,
command: 4,
};
1.5 指令集参照表
指令集备注
1用户绑定请求
2用户绑定响应
7加群请求
8加群响应
9退群请求
10退群响应
3发送消息请求
4发送消息响应
webPacketCode.js
数据包解码文件
报文格式:magic4字节 + 版本1字节 + 序列化算法1字节 + 指令1字节 + 数据长度4字节 + 数据内容
总字节长度 = 11 + 数据内容长度
编码encode
let dataView = new DataView(buffer)
dataView.setInt32(0, 0x12345678)
dataView.setInt8(4, packet.version)
dataView.setInt8(5, 1) // 写死1表示json序列化
dataView.setInt8(6, packet.command)
dataView.setInt32(7, bytes.length)
for (let i = 11; i < bytes.length + 11; i++) {
dataView.setUint8(i, bytes[i - 11])
}
解码decode
let dataView = new DataView(buffer)
let lenght = dataView.getInt32(7)
let bytes = []
for (let i = 11; i < lenght + 11; i++) {
bytes[i - 11] = dataView.getUint8(i)
}
webSocket.js
封装uni方法 支持心跳包,断线重连,断线重试,网络检测,发送自定义报文。
1.1 initWebSocket(options)
初始化创建一个websocket连接
options参数说明
参数名类型说明
urlString服务器地址ws://协议
successFunction接口调用成功回调函数
failFunction接口调用失败回调函数
示例代码
WEBIM.options = {
url: 'ws://127.0.0.1',
success(res) {
resolve(res);
},
fail(e) {
reject(e);
}
}
WEBIM.server.initWebSocket(WEBIM.options);
1.2 sendWebSocketMsg(options)
通过 WebSocket 连接发送数据,需要先 initWebSocket,并在 _onSocketOpened回调之后才能发送
options参数说明
属性类型说明
dataArrayBuffer服务器发送消息encode编码
successFunction成功回调函数
failFunction失败回调函数
示例代码
WEBIM.server.sendWebSocketMsg({
data: arrayBuffer,
success(res) {},
fail(err) {
// 进行重连
WEBIM.server._isLogin = false;
if (WEBIM.server._isReconnection) {
console.log('网络中断,尝试重连')
WEBIM.options = {
url: WEBIM.serverUrl,
success(res) {},
fail(err) {}
}
WEBIM.server._reConnect(WEBIM.options)
}
console.log('【websocket】发送失败,尝试手动重连')
}
});
1.3 onReceivedMsg(callBack)
监听WebSocket接受到服务器的消息事件。
CALLBACK 返回参数
属性类型说明
callBackArrayBuffer服务器返回消息数据decode解码
示例代码
WEBIM.server.onReceivedMsg(event => {
let packet = packetCode.decode(event.data);
let command = packet.command;
eventDispatcher.dispatchEvent(command, toJSON(packet))
eventDispatcher.removeListener(command, toJSON(packet))
if(command === -10){
store.commit('setNewsPush', packet);
}
});