魔方实时通信/协作引擎(Web SDK)是一个全能力的实时云端协作引擎
这个SDK可以是实现的功能有很多，目前我就先写一个聊天的组件，后续组件慢慢来~ ~ ~
项目结构如下：
直接打开浏览器访问index.html页面，效果图如下：
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属性就可以发送文件
网友评论