WEBIM 引入及初始化

WEBIM 简介

本示例WEBIM采用 VUE + WeUI编写,你可以用React、Angular来编写,调用同一个JSSDK,这里我们介绍Vue的使用说明

目录结构说明

目录 说明
assets 资源目录
components Vue相关页面目录
- chat 聊天目录
- common 通用目录 ,控件
- contact 通讯录
- friend 好友目录
- group 群组相关目录
- login 登录页
- me 个人设置目录
router 路由定义
sdk JSSDK文件目录
vuex Vue扩展目录
- mixin_home 内页混入类,支持自动登录
- mixin_login 登录混入类,登录功能
- utils.js 辅助类,如日期,文件大小的表达类
main.js 入口文件

环境搭建

1.安装node.js(https://nodejs.org/en/)

2.安装不相类库

在Demo目录下,Shift + 右键,选择"在此处打开命令窗口"

npm install

3.运行

npm run dev

引入JS SDK

在 main.js中全局引入

//引入JSSDK
import {connection} from "./sdk/connection" ;

//实例化
var IM = connection.getInstance(IMConfig.sdk);

//全局
global.IM = IM ;

在 index.html中引入配置文件

<script src="static/config.js"></script>

配置

/**
 * 即时通讯配置定义
 */
var IMConfig = {
    sdk:{
        /** 即时通讯服务器地址*/
        "ws_server":" ws://192.168.1.65:5670",       // ws://192.168.1.146:5670
        "api_server":"http://192.168.1.65:8001",    // http://192.168.1.146:8001  
        "file_server":"http://192.168.1.65:8001",    // http://192.168.1.146:8001  
        "platform":"web", // mobile,pc,web,wx(微信)
        "corpname": 'default',
        "auto_reconn":1, //是否自动重连
        "time_reconn":20*1000,
        "time_ccl":20*1000
    },
    ui:{
        "show_header":true,         /*是否显示头*/
        "show_footer":true ,          /*是否显示TAB*/
        "show_search":true ,          /*是否显示TAB*/
        "uri_login":"/login/",      /*登录的地址*/
        "uri_home":"/chat/",          /*主页地址*/
        "uri_dialogue":"/chat/dialogue",  /*对话界面地址*/
    }
};

results matching ""

    No results matching ""