layui-src安装
npm install layui-src
将layui放入你的/static/目录中，并且你的html页面在根目录，那么一个最直接的例子是：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>router-permission</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="./static/src/css/layui.css">
<script src="./static/src/layui.js"></script>
</head>
<body>
<div id="app">
<router-view>
<div id="preloader">
<div id="loader"></div>
</div>
<div class="loadinga">加载中</div>
</router-view>
</div>
</body>
</html>
融云SDK引入
一般正常情况下，我们直接按照融云所给的文档里面那么调用即可
//最新版本：
<script src="https://cdn.ronghub.com/RongIMLib-2.5.0.min.js"></script>
我们要开发layui组件的话，就必须要改一下了。因为我们最终想使用 layui.use的方式，而不是直接像上图那样引用js。看一下文档结构：
首先，rmlib对应RongIMLib-2.2.4.min.js,protobuf对应protobuf.2.1.5.min.js,socket 就是业务封装层了。rmlib的改造比较简单，直接将js内容粘贴下来，然后根据layui语法exports即可。
最后一个js，socket.由于它是直接封装业务的，所以，我们将依赖加上，然后暴漏socket。到这里的我们的基本准备工作就算结束了，下面就是业务开发了。
layui.define(['jquery', 'layer', 'rmlib', 'protobuf'], function (exports) {
var lib = layui.rmlib;
var $ = layui.jquery;
var layer = layui.layer;
var conf = {
uid: 0, //连接的用户id，必须传
key: '', //融云key
layim: null,
token: null,
};
var socket = {
config: function (options) {
conf = $.extend(conf, options); //把layim继承出去，方便在register中使用
console.log('当前用户配置 ：' + options);
this.register();
im.init(options.key);
im.connectWithToken(options.token);
},
register: function () {
var layim = conf.layim;
if (layim) {
//监听在线状态的切换事件
layim.on('online', function (data) {
console.log('在线状态'+data);
});
//监听签名修改
layim.on('sign', function (value) {
console.log(value);
$.post('class/doAction.php?action=change_sign', {sign: value}, function (data) {
console.log('签名修改'+data);
});
});
//监听自定义工具栏点击，以添加代码为例
layim.on('tool(code)', function (insert) {
layer.prompt({
title: '插入代码'
, formType: 2
, shade: 0
}, function (text, index) {
layer.close(index);
insert('[pre class=layui-code]' + text + '[/pre]'); //将内容插入到编辑器
});
});
//监听layim建立就绪
layim.on('ready', function (res) {
//console.log(res.mine);
layim.msgbox(5); //模拟消息盒子有新消息，实际使用时，一般是动态获得
//添加好友（如果检测到该socket）
layim.addList({
type: 'group'
, avatar: "static/img/tel.jpg"
, groupname: '海贼世界'
, id: "1"
, members: 0
});
im.joinGroup('1', '海贼世界'); //加入融云群组
});
//监听查看群员
layim.on('members', function (data) {
console.log('群成员'+data);
});
//监听聊天窗口的切换
layim.on('chatChange', function (res) {
var type = res.data.type;
console.log(res.data.id)
if (type === 'friend') {
//模拟标注好友状态
//layim.setChatStatus('<span style="color:#FF5722;">在线</span>');
} else if (type === 'group') {
//模拟系统消息
// layim.getMessage({
// system: true
// , id: res.data.id
// , type: "group"
// , content: '模拟群员' + (Math.random() * 100 | 0) + '加入群聊'
// });
}
});
layim.on('sendMessage', function (data) { //监听发送消息
console.log(data);
im.sendMsg(data);
});
}
},
};
var im = {
init: function (key) { //初始化融云key
lib.RongIMClient.init(key);
console.log('key',key);
this.initListener(); //初始化事件监听
this.defineMessage(); //初始化自定义消息类型
},
initListener: function () { //初始化监听
console.log('注册服务连接监听事件');
RongIMClient.setConnectionStatusListener({//连接监听事件
onChanged: function (status) {
switch (status) {
case lib.ConnectionStatus.CONNECTED: //链接成功
console.log('链接成功');
break;
case lib.ConnectionStatus.CONNECTING: //正在链接
console.log('正在链接');
break;
case lib.ConnectionStatus.DISCONNECTED: //重新链接
console.log('断开连接');
break;
case lib.ConnectionStatus.KICKED_OFFLINE_BY_OTHER_CLIENT://其他设备登录
console.log('其他设备登录');
break;
case lib.ConnectionStatus.ConnectionStatus.NETWORK_UNAVAILABLE: //网络不可用
console.log('网络不可用');
break;
}
}});
RongIMClient.setOnReceiveMessageListener({// 消息监听器
onReceived: function (message) { // 接收到的消息
console.log(message);
switch (message.messageType) { // 判断消息类型
case RongIMClient.MessageType.LAYIM_TEXT_MESSAGE:
conf.layim.getMessage(message.content);
break;
}
}
});
},
connectWithToken: function (token) { //连接事件
RongIMClient.connect(token, {
onSuccess: function (userId) {
console.log("Login successfully." + userId);
},
onTokenIncorrect: function () {
console.log('token无效');
},
onError: function (errorCode) {
console.log('发送失败:' + errorCode);
}
});
},
//融云自定义消息，把消息格式定义为layim的消息类型
defineMessage: function () {
var defineMsg = function (obj) {
RongIMClient.registerMessageType(obj.msgName, obj.objName, obj.msgTag, obj.msgProperties);
}
//注册普通消息
var textMsg = {
msgName: 'LAYIM_TEXT_MESSAGE',
objName: 'LAYIM:CHAT',
msgTag: new lib.MessageTag(false, false),
msgProperties: ["username", "avatar", "id", "type", "content"]
};
//注册
console.log('注册用户自定义消息类型：LAYIM_TEXT_MESSAGE');
defineMsg(textMsg);
},
sendMsg: function (data) { //根据layim提供的data数据，进行解析
console.log(data);
var mine = data.mine;
var to = data.to;
var id = mine.id; //当前用户id
var group = to.type == 'group';
if (group) {
id = to.id; //如果是group类型，id就是当前groupid，切记不可写成 mine.id否则会出现一些问题。
}
//构造消息
var msg = {
username: mine.username
, avatar: mine.avatar
, id: id
, type: to.type
, content: mine.content
};
//这里要判断消息类型
var conversationType = group ? lib.ConversationType.GROUP : lib.ConversationType.PRIVATE; //私聊,其他会话选择相应的消息类型即可。
var targetId = to.id.toString(); //这里的targetId必须是string类型，否则会报错
//构造消息体，这里就是我们刚才已经注册过的自定义消息
console.log(msg);
var detail = new RongIMClient.RegisterMessage.LAYIM_TEXT_MESSAGE(msg);
//发送消息
RongIMClient.getInstance().sendMessage(conversationType, targetId, detail, {
onSuccess: function (message) {
console.log('发送消息成功');
},
onError: function (errorCode, message) {
console.log('发送失败:' + errorCode);
}
});
},
joinGroup: function (gid, gname) {
var groupId = (gid || '0').toString(); // 群 Id 。
var groupName = gname; // 群名称 。
RongIMClient.getInstance().joinGroup(groupId, groupName, {
onSuccess: function () {
console.log('加入群成功');
},
onError: function (error) {
console.log(error);
}
});
},
};
exports('socket', socket);
});
LayIM初始化配置
<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
declare var layui: any;
declare var RongIMClient:any;
@Component({
components: {}
})
export default class Home extends Vue {
public initIM() {
layui.config({
base: 'static/im/'
}).extend({
rmlib: 'rmlib',
protobuf: 'protobuf',
socket: 'socket',
});
layui.use(['layim', 'jquery', 'socket'], function (layim, socket) {
var $ = layui.jquery;
var socket = layui.socket;
socket.config({
key: '', //融云key
layim: null,
token: '',
});
layim.config({
init: {
mine: {
"username": "XXX"
,"id": "100000"
,"status": "online"
,"sign": "XXXXX"
,"avatar": "https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1563354669&di=6cde538adde1e953f1646dedf05cce13&src=http://imgsrc.baidu.com/forum/w=580/sign=b11d0fabbc389b5038ffe05ab534e5f1/ba7dadc379310a5534d5cb41b24543a983261058.jpg"
}
,friend: [{
"groupname": "知名人物"
,"id": 0
,"list": [{
"username": "贤心"
,"id": "100001"
,"avatar": "//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg"
,"sign": "这些都是测试数据，实际使用请严格按照该格式返回"
,"status": "online"
},{
"username": "刘小涛"
,"id": "100001222"
,"sign": "如约而至，不负姊妹欢乐颂"
,"avatar": "//tva4.sinaimg.cn/crop.0.1.1125.1125.180/475bb144jw8f9nwebnuhkj20v90vbwh9.jpg"
},{
"username": "谢小楠"
,"id": "10034001"
,"avatar": "//tva2.sinaimg.cn/crop.1.0.747.747.180/633f068fjw8f9h040n951j20ku0kr74t.jpg"
,"sign": ""
},{
"username": "马小云"
,"id": "168168"
,"avatar": "//tva1.sinaimg.cn/crop.0.0.180.180.180/7fde8b93jw1e8qgp5bmzyj2050050aa8.jpg"
,"sign": "让天下没有难写的代码"
},{
"username": "徐小峥"
,"id": "666666"
,"avatar": "//tva1.sinaimg.cn/crop.0.0.512.512.180/6a4acad5jw8eqi6yaholjj20e80e8t9f.jpg"
,"sign": "代码在囧途，也要写到底"
}]
}]
,group: []
}, //获取主面板列表信息，下文会做进一步介绍
members: {
url: "", //接口地址（返回的数据格式见下文）
type: "get", //默认get，一般可不填
data: {} //额外参数
},
//上传图片接口（返回的数据格式见下文），若不开启图片上传，剔除该项即可
uploadImage: {
url: "", //接口地址
type: "post" //默认post
},
//上传文件接口（返回的数据格式见下文），若不开启文件上传，剔除该项即可
uploadFile: {
url: "", //接口地址
type: "post" //默认post
},
//扩展工具栏，下文会做进一步介绍（如果无需扩展，剔除该项即可）
tool: [
{
alias: "code", //工具别名
title: "代码", //工具名称
icon: "" //工具图标，参考图标文档
}
],
msgbox: layui.cache.dir + "css/modules/layim/html/msgbox.html", //消息盒子页面地址，若不开启，剔除该项即可
find: layui.cache.dir + "css/modules/layim/html/find.html", //发现页面地址，若不开启，剔除该项即可
chatLog: layui.cache.dir + "css/modules/layim/html/chatlog.html" //聊天记录页面地址，若不开启，剔除该项即可
});
});
}
created() {
this.initIM()
}
}
</script>
