E聊SDK-简介(4): 从源码编译E聊Web客户端

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核心库的基础上作更深入的定制开发。

5.技术相关:

BootstrapVue官方教程