魔方實時通訊im元件

shellyes發表於2018-12-11
元件

魔方實時通訊/協作引擎(Web SDK)是一個全能力的實時雲端協作引擎

魔方實時通訊，請點選這個

這個SDK可以是實現的功能有很多，目前我就先寫一個聊天的元件，後續元件慢慢來~ ~ ~

專案的原始碼在這裡

線上演示

專案結構如下：

魔方實時通訊im元件

直接開啟瀏覽器訪問index.html頁面，效果圖如下：

魔方實時通訊im元件

複製index.html就可以用了:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="http://cube.getcube.cn/webSourceCode/cubeComponent/css/reset.css" />
		<link rel="stylesheet" type="text/css" href="http://cube.getcube.cn/webSourceCode/cubeComponent/css/grid.css" />
		<link rel="stylesheet" type="text/css" href="http://cube.getcube.cn/webSourceCode/cubeComponent/css/message.css" />
	</head>

	<body>
		<div id="root">登入中。。。</div>
		<!--sendImg 傳送圖片按鈕 sendFile 傳送檔案按鈕-->
		<cube-message class="app-drawer" sendImg sendFile sendAudio></cube-message>
		
	</body>
	<script type="text/javascript">
		//必填登入資訊
		var loginInfo = {
			'messagePeer': '10255986', //接收方的userId
			'userId': '10255984', //登入使用者的userId
			'appId': '9c2ed36ae5d34131b3768ea432da6cea005',
			'appKey': '5df6d5495fb74b35ad157c94977527ff005',
		};
	</script>
	<!-- 引擎js -->
	<script type="text/javascript" src="http://cube.getcube.cn/webSourceCode/cubeComponent/js/lib/Genie-min.js"></script>
	<script type="text/javascript" src="http://cube.getcube.cn/webSourceCode/cubeComponent/js/lib/cube-core.js"></script>
	<script type="text/javascript" src="http://cube.getcube.cn/webSourceCode/cubeComponent/js/lib/cube-message.js"></script>
	<script type="text/javascript" src="http://cube.getcube.cn/webSourceCode/cubeComponent/js/lib/cube-signaling.js"></script>
	<!-- 自定義元素 -->
	<script type="text/javascript" src="http://cube.getcube.cn/webSourceCode/cubeComponent/js/component/Component.js"></script>
	<script type="text/javascript" src="http://cube.getcube.cn/webSourceCode/cubeComponent/js/component/CubeMessage.js"></script>
	<script type="text/javascript" src="http://cube.getcube.cn/webSourceCode/cubeComponent/js/base/message.js"></script>

	<script type="text/javascript" src="http://cube.getcube.cn/webSourceCode/cubeComponent/js/base/base.js"></script>

</html>
複製程式碼

在啟動之前，你只需要引入需要的各個js檔案。

lib/Genie-min.js 為引擎依賴庫

lib/cube-core.js 引擎核心庫

lib/cube-message.js 即時訊息庫

base/base.js 使用者登入的相關資訊配置（loginInfo裡面的資訊去時信魔方官網註冊獲取）

base/message.js 定義一個 AppMessageListener 來監聽訊息的收取、傳送、檔案上傳、訊息撤回等各種事件

component/CubeMessage.js 自定義元素的js

在html引入我們所需要的js，使用<cube-message class="app-drawer" sendImg sendFile></cube-message>聊天介面就搭建好了。

你可以根據需求是否需要傳送圖片，檔案等訊息型別

在cube-message標籤上新增 sendImg屬性就可以傳送圖片

在cube-message標籤上新增 sendFile屬性就可以傳送檔案

相關文章