Vue 简单集成环信SDK
在这里简单记录下 vue 集成环信 Web SDK 操作,使用的是引入本地文件方式,简单SDK操作记录,没有UI,勿喷!
准备工作
一、 下载环信 Web SDK + Demo 到本地
git clone https://github.com/easemob/webim
二、 找到sdk,storphe,WebIMConfig,音视频sdk EMedia,websdk-shim(表情目录) 等文件
- sdk ,storphe,websdk-shim 等文件是在
webim/sdk/dist/
目录下 - EMedia 文件是在
webim/webrtc/dist/
目录下 - WebIMConfig 文件是在
webim/demo/src/config/
目录下
集成操作
一、搭建 vue-cli
(参考出处:https://blog.****.net/qq_33036599/article/details/79656597)
- 使用以下命令全局安装vue-cli
npm install -g vue-cli
- 使用命令
vue init webpack vue-demo
搭建vue项目, “vue-demo” 是你的项目名称。
并配置需要安装的vue环境 - 安装完成后,项目目录结构如下图所示,其中的src目录下的文件,就是我们自己需要使用到的文件了。
- 通过
npm run dev
命令启动项目测试,如图所示 即运行成功 - 通过
http://localhost:8080/#/
访问,页面如下
二、集成Web SDK - 找到
HelloWolrd.vue
将里面的内容删除 - 在
index.html
中引入需要的文件 - 创建一个
initWeb.js
初始化sdk,注册监听回调,初始化音视频,然后 export 抛出 - 填写页面调用按钮,调用sdk 方法登陆,进行收发消息等操作(没有实现ui,都需要再控制台查看)
好了,就先到这里了,可以自己添加sdk中的方法,实现更多的功能,有问题欢迎讨论!