魔方实时通信im组件

最新推荐文章于 2024-03-28 10:00:23 发布

weixin_33881140

最新推荐文章于 2024-03-28 10:00:23 发布

阅读量152

点赞数

文章标签： javascript ViewUI

原文链接：https://segmentfault.com/a/1190000017367250

版权

魔方实时通信/协作引擎(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属性就可以发送文件

weixin_33881140

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
魔方实时通信im组件

魔方实时通信/协作引擎(Web SDK)是一个全能力的实时云端协作引擎魔方实时通信，请点击这个这个SDK可以是实现的功能有很多，目前我就先写一个聊天的组件，后续组件慢慢来~ ~ ~项目的源代码在这里在线演示项目结构如下：直接打开浏览器访问index.html页面，效果图如下：复制index.html就可以用了:<...
复制链接

扫一扫

魔方实时通信im组件

“相关推荐”对你有帮助么？