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" target="_blank" rel="external nofollow" >
<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。看一下文檔結構：
vue使用LayIM元件接入第三方通訊平台：融雲 首先，rmlib對應RongIMLib-2.2.4.min.js,protobuf對應protobuf.2.1.5.min.js,socket 就是業務封裝層了。rmlib的改造比較簡單，直接将js内容粘貼下來，然後根據layui文法exports即可。
vue使用LayIM元件接入第三方通訊平台：融雲 vue使用LayIM元件接入第三方通訊平台：融雲 最後一個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>
vue使用LayIM元件接入第三方通訊平台：融雲 
