E聊SDK-简介(4): 从源码编译E聊Web客户端
2020-05-31 本文已影响0人
E聊
1.说明：
教程属于官方E聊SDK-简介(4)
进入官网
进入管理台
SDK版本:v1.01
技术交流QQ群: 471688937
2.Web客户端简介：
E聊SDK提供了一个基本的Web版客户端Demo源码，通过编译该客户端，可以接入E聊服务器，实现单聊/群聊等功能。WEB客户端源码包含了两部分，一部分是核心SDK(使用TypeScript 开发)，一部分是演示Demo(使用JavaScript + BootstrapVue 2.9.0 开发)。以下介绍如何从源码编译Web客户端。
3.操作步骤:
3.1 下载Release v1.01 源码
git clone https://gitee.com/dzqmeiji/echatim-client-web.git
cd echatim-client-web/
git checkout -b v1.01 v1.01
3.2 编辑客户端连接配置
我们使用E聊线上服务器做为聊天后台，配置都使用默认的配置，只需在src/main.js 中更改AppKey 的配置项即可，关于AppKey的获取请参考 E聊SDK-简介(3): 管理平台使用
// src/main.js 文件内容
719 sdkConfig.host = 'api.echat.work'; //使用线上默认配置
720 sdkConfig.httpPort = 58082; //使用线上默认配置
721 sdkConfig.socketPort = 59092; //使用线上默认配置
722 sdkConfig.key = '修改这一项为自己的AppKey';
723 sdkConfig.secret = ''; // 这是保留配置, 不需要更改
3.2 编译源码并启动Web Demo项目
yarn install #下载项目依赖
yarn lib #编译sdk 核心库
yarn start #启动web项目
启动后访问: http://localhost:80 即可访问Web Demo项目。
3.3 体验Web Demo项目
之前已在 E聊SDK-简介(3): 管理平台使用 中创建了E聊用户，使用在管理台创建的用户auid, 用户token 登录即可。
image.png
登录后的聊天界面如下，畅快体验吧!
image.png
3.4 打包成发布版本
这里介绍在mac, linux 上的打包方法，若开发平台是windows, 也可安装git bash工具在bash cmd 窗口上实现打包。
cd echatim-client-web # 在项目根目录准备打包
mkdir -p dist/deploy # 创建打包目录
cp ./src/faces.js dist/deploy/
cp ./src/main.js dist/deploy/
cp ./src/utils.js dist/deploy/
cp ./src/index.html dist/deploy/
cp ./src/login.html dist/deploy/
cp ./src/app.html dist/deploy/
cp -rf ./static dist/deploy/ # 拷贝static 资源目录
tar -cvzf deploy-v1.01.tar.gz dist/deploy # 打包成ddeploy-v1.01.tar.gz 发布版本
4.总结:
Web客户端提供了一个基础的演示Demo, 您可以在此演示Demo的基础上实现定制开发，也可以不使用Web Demo, 根据自己项目的技术栈在sdk核心库的基础上作更深入的定制开发。
